How JSX Gets Compiled to JavaScript: The React.createElement Story

How JSX Gets Compiled to JavaScript: The React.createElement Story

You write JSX, the browser runs JavaScript. Something transforms one into the other. Understanding that transformation removes the magic from React.

JSX Is Not Native JavaScript

Browsers cannot read JSX. If you put JSX in a plain script tag, it throws a syntax error. JSX must be compiled before it reaches the browser.

The Compiler

A tool like Babel or a bundler's built-in compiler reads your JSX and rewrites it. Modern React uses the automatic JSX runtime, which inserts helper functions so you do not even need to import React in every file.

The Output: React.createElement

Each JSX element becomes a React.createElement call. An opening tag, its attributes, and its children turn into arguments: the element type, a props object, and child elements.

What createElement Returns

createElement returns a plain JavaScript object describing the element: its type, its props, and its children. This object is React's internal description of a piece of UI.

Nested JSX Becomes Nested Calls

A parent element with child elements becomes nested createElement calls. The structure of your JSX maps directly onto a tree of function calls returning a tree of objects.

Why This Matters

When you understand that JSX is just objects, concepts like props, children, and conditional rendering stop being magical. You can reason about what React receives and why certain patterns work.

The Takeaway

JSX is syntactic sugar for function calls that produce plain objects. Babel or your compiler rewrites it, React turns the objects into DOM, and the browser runs ordinary JavaScript. That is the whole story.