How React Renders JSX Into the DOM: A Beginner's View

How React Renders JSX Into the DOM: A Beginner's View

You write JSX, and somehow HTML appears in the browser. What happens in between? Understanding this flow is the difference between using React and understanding React.

Step 1: You Write JSX

You write something that looks like HTML inside JavaScript. This is JSX, and the browser cannot read it directly.

Step 2: JSX Compiles to JavaScript

A build tool or Babel transforms your JSX into React.createElement calls. An element like <h1>Hello</h1> becomes a JavaScript function call that returns an object describing the UI.

Step 3: React Has a Description of the UI

After compilation, React holds a plain JavaScript object that describes what the UI should look like: the type of element, its props, and its children.

Step 4: ReactDOM Updates the DOM

ReactDOM takes that description and creates or updates real DOM nodes to match it. On the first render, it creates nodes. On later renders, it updates only what changed.

Step 5: Re-renders Update the Description

When state changes, React builds a new description of the UI and compares it to the previous one. It then updates the DOM only where the descriptions differ. This is reconciliation.

Why This Matters

Beginners who skip this model treat React as magic. When a bug appears, like a UI not updating, they have no mental model to debug it. Understanding the flow gives you that model.

The Takeaway

React rendering is: write JSX, compile to an object describing the UI, let ReactDOM turn that into DOM, and on state change, build a new description and update only the differences. That is the whole game.