You Write the Code. React Renders the UI. But What Happens Between Your Code and the Magic?

To understand the magic, you first need to understand what a React element is.

So, a React element is, by definition, a lightweight description of a UI node.

A React element looks like this:

{
  type: "h1",
  props: {
    children: "Hello, World!"
  }
}

It’s a description of the UI, where it describes which elements to render, what content they contain, and, if there are more props, more details about that UI.

The JSX code is first converted into React elements.

But a React element does not, by itself, represent an actual browser DOM node.

Now the question comes to mind:

How does React create DOM elements, and why does it need to introduce React elements?

In a JSX component, you describe only the desired UI. But React needs a description of those elements.

For that reason, it processes that UI using its rendering machinery and creates React elements.

Now React creates the DOM elements from those React elements and inserts them into the document during the commit process. After the commit, you see the magic on the screen.

To understand the commit process, we need to understand many concepts. One of them is the Fiber tree, which we will discuss in the next post.