DEV Community

Aryse Gabrielle Pagano
Aryse Gabrielle Pagano

Posted on

React is just JavaScript

Not sure I would personally agree with that. If you ask my opinion, React is not JUST JavaScript but rather a whole bunch of it that I don't have to write.

I don't know about you, but when I first started learning JavaScript one commonly used exercise (DOM and DOM manipulation) was to create a page entirely with Javascript.

That required Imperative Programming, where you write line by line the steps required for something to happen.

Because this post does not intend to dive deep in the rabbit hole, here's a simple and easily readable example:

const body = document.getElementById("body");
const h1 = document.createElement("h1");
h1.innerText = "This is my h1";
body.append(h1);

Enter fullscreen mode Exit fullscreen mode

What you see up there is just JavaScript.
Now let's try to accomplish the same thing with React, which works in a declarative manner:

const HeadEl = ()=> <h1>This is my h1</h1>;
Enter fullscreen mode Exit fullscreen mode

What you see up there, that looks like HTML is JSX (JavaScript XML) which kinda looks like HTML so we can be happy, and then gets compiled via BABEL to something that would look like this:

/*#__PURE__*/React.createElement("h1", null, "This is my h1");
Enter fullscreen mode Exit fullscreen mode

If we were to be curious and console.log(React.createElement) here's a little something from what we get:

function createElementWithValidation(type, props, children) {
  var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
  // succeed and there will likely be errors in render.

  if (!validType) {
    var info = '';

    if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
      info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
    }

    var sourceInfo = getSourceInfoErrorAddendumForProps(props);

    if (sourceInfo) {
      info += sourceInfo;
    } else {
      info += getDeclarationErrorAddendum();
    }

    var typeString;

    if (type === null) {
      typeString = 'null';
    } else if (isArray(type)) {
      typeString = 'array';
    } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
      typeString = "<" + (getComponentNameFromType(type.type) || 'Unknown') + " />";
      info = ' Did you accidentally export a JSX literal instead of a component?';
    } else {
      typeString = typeof type;
    }

    {
      error('React.createElement: type is invalid -- expected a string (for ' + 'built-in components) or a class/function (for composite ' + 'components) but got: %s.%s', typeString, info);
    }
  }

  var element = createElement.apply(this, arguments); // The result can be nullish if a mock or a custom function is used.
  // TODO: Drop this when these are no longer allowed as the type argument.

  if (element == null) {
    return element;
  } // Skip key warning if the type isn't valid since our key validation logic
  // doesn't expect a non-string/function type and can throw confusing errors.
  // We don't want exception behavior to differ between dev and prod.
  // (Rendering will throw with a helpful message and as soon as the type is
  // fixed, the key warnings will appear.)


  if (validType) {
    for (var i = 2; i < arguments.length; i++) {
      validateChildKeys(arguments[i], type);
    }
  }

  if (type === REACT_FRAGMENT_TYPE) {
    validateFragmentProps(element);
  } else {
    validatePropTypes(element);
  }

  return element;
}
Enter fullscreen mode Exit fullscreen mode

All of that is what? Javascript, I agree. But to reduce this entire process into "It's just JavaScript" shows a little bit of lack understanding the very foundation of React, especially if that's all you have to offer when the question pops in a job interview.
Hopefully I got you curious enough to go do some research and have a better understanding about this whole bunch of JavaScript you don't have to write. =)

Top comments (0)