Understand raw React

Plain HTML and the DOM

To display some text on the page we can use plain HTML like this:

<html>
  <body>
    <div>Hello World 🌍</div>
  </body>
</html>

Then, the browser will take this HTML code and generate the Document Object Model (DOM) out of it. The DOM is a programming interface for web documents. It represents the page so that programs can manipulate the structure, content, and style. We can modify those properties using language such as JavaScript. React uses JavaScript to generate and interact with DOM nodes. That’s why, first and foremost, we should understand how to create basic DOM nodes and insert them into the document.

JavaScript rendered Hello World 🌍

Let’s setup basic HTML structure:

<body>
  <div id="root"></div>
  <script type="module">
    // here we can embed executable code or data (typically JavaScript)
  </script>
</body>

Adding JavaScript instructions

We want to create the same div element as previously. At first, we have to assign the <div id="root"> to some variable. The next step will be creating a new HTML element - in our case div so we can manipulate its properties such as text content or class name. Lastly, we want to append a newly created element to our root element to display it on our page.

<body>
  <div id="root"></div>
  <script type="module">
    const rootElement = document.getElementById('root')
    const element = document.createElement('div')
    element.textContent = 'Hello World 🌍'
    element.className = 'container'
    rootElement.append(element)
  </script>
</body>

Hello World 🌍 with React

React is a JavaScript library for building user interfaces. It uses the same API that we have used when creating DOM nodes. React is widely used on multiple platforms (web, native) and that’s the reason why need two JS files to write React applications for the web:

React: responsible for creating React elements (similar to document.createElement())
ReactDOM: responsible for rendering React elements to the DOM (like rootElement.append())

Converting our code to use React

There are many ways to create new React app. For creating SPA it is recommended to use Create React App, for server-rendered website with Node.js we should use Next.js. For our example, we can use React by adding two <script> tags to the HTML page

<script
  src="https://unpkg.com/react@17/umd/react.development.js"
  crossorigin
></script>
<script
  src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
  crossorigin
></script>

After including those tags we will have new global variables to use: React and ReactDOM. Let’s see how to use them!

Raw React API

Here’s our starting HTML structure:

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
  <script type="module">
    // here whole magic 🪄 will happen
  </script>
</body>

Similarly to the previous example we have to grab our rootElement using document. getElementById('root') selector and then create new React element:

<script type="module">
  const rootElement = document.getElementById('root')
  const element = React.createElement(
    'div',
    { className: 'container' },
    'Hello'
  )
</script>

Finally we can render the React element using ReactDOM package by adding the following line inside our script tag:

ReactDOM.render(element, rootElement)

As you can see, createElement in this case accepts (in that order) a tag name string (eg. div or span), props and children.

If you know React already probably the syntax using JSX is much more familiar to you. Let’s try to rewrite the previous code snippet using a JSX.

const Hello = () => <div className="container">Hello</div>

ReactDOM.render(<Hello />, document.getElementById('root'))

Summary

There are many topic to cover about the mechanics of React. Here you can see how does the browser DOM element is connected to React DOM.