React - Fundamentals

October 05, 2020

Introduction to native react calls

Going back to the basics with React in order to gain a better foundation on how React works.

JSX elements are syntactic sugar for calling:

React.createElement(component, props, ...children)

Code written in JSX such as the following:

function Hi({ name }) {
  return <div> hello {name} </div>
}

Is converted to the following thanks to babel:

function Hi({
  name
}) {
  return /*#__PURE__*/
    React.createElement(
      "div", null, "hello ", name);
}

Pretty neat huh?

How do you use it to build react applications?

Well, let's be honest here for a second. This function is cool and all but it becomes pretty hard to follow when we begin to build more components. For example, how would I represent this html in React.

<html>
  <body>
    <div id="main">
      <div class="main-class">
        <div>Hello</div>
      </div>
      <div>World</div>
    </div>
  </body>
</html>

Becomes (really not pretty and it isn't sustainable for large react apps.)

<html>
  <body>
    <div id="root" />
  </body>
  <script>
    const helloDiv = React.createElement("div", {
      children: "Hello"
    })

    const mainClassDiv = React.createElement("div", {
      className: "main-class",
      children: helloDiv
    })

    const worldDiv = React.createElement("div", {
      children: "World"
    })

    const mainDiv = React.createElement("div", {
      id: "main",
      children: [
        mainClassDiv,
        worldDiv
      ]
    })
    ReactDOM.render(mainDiv, document.getElementById("root"))
  </script>