JSX Compilation Transform

JSX is transformed into JavaScript before the resulting code executes. Depending on the configured JSX transform, the generated code uses React element creation functions such as `React.createElement` or the newer automatic runtime helpers.

JSX is syntax that resembles HTML but is embedded in JavaScript or TypeScript. A build tool such as Babel, a TypeScript compiler configuration, or another transpiler transforms JSX into ordinary JavaScript that the runtime can execute.

With the classic transform, an expression such as `<Button disabled={true} />` becomes a call resembling `React.createElement(Button, { disabled: true })`. The JSX syntax itself is therefore not something the JavaScript engine needs to understand.

Modern React projects can use the automatic JSX runtime. In that mode, the compiler emits imports from a JSX runtime package and calls helpers such as `jsx` or `jsxs`, so application code does not generally need an explicit `React` identifier solely because JSX is present.

The transform also handles JSX expressions, children, fragments, and nested elements. JavaScript expressions inside `{}` remain JavaScript expressions while the surrounding JSX structure is represented in the generated calls.

The exact emitted code depends on the compiler and its configuration, so interview answers should distinguish the general compilation idea from a particular toolchain's output.

Key points

• JSX is compile-time syntax, not native JavaScript syntax.
• The classic transform produces `React.createElement(...)` calls.
• The automatic transform uses JSX runtime helper functions and does not require `React` to be in scope solely for JSX.
• JavaScript expressions inside JSX are preserved as expressions in the generated code.
• Compiler configuration determines the exact generated output.

Interview questions

What happens to JSX before the browser executes it?

JSX is transformed by a compiler or transpiler into ordinary JavaScript. With the classic React transform, JSX becomes calls such as `React.createElement`. With the automatic transform, the compiler can emit calls to JSX runtime helpers instead. The browser executes the resulting JavaScript rather than JSX syntax itself.

How would `<Greeting name="Sam" />` relate to `React.createElement`?

Conceptually, the classic transform represents it as `React.createElement(Greeting, { name: "Sam" })`. `Greeting` is passed as the element type, while `name` becomes a property in the props object. JSX therefore provides concise syntax for constructing the same kind of React element description.

What is the difference between the classic and automatic JSX transforms?

The classic transform generally turns JSX into `React.createElement` calls, which is why older React code commonly imported `React` whenever JSX was used. The automatic transform instead generates calls to helpers supplied by the JSX runtime. This removes the need to have `React` in scope solely for JSX syntax. The choice is controlled by the project's compiler and build configuration.

Does JSX transformation perform React rendering or reconciliation?

No. JSX transformation is a source-to-source compilation step that produces JavaScript representing React elements. Rendering and reconciliation happen later when React processes those element descriptions at runtime. Keeping these stages separate helps explain why changing JSX syntax does not itself perform a DOM update. The exact runtime behavior then depends on React and the renderer being used.

How are JavaScript expressions handled inside JSX?

Expressions inside `{}` are evaluated as JavaScript expressions in the generated program. For example, `<h1>{name}</h1>` represents an element whose children include the value of `name`. The JSX transform preserves the expression's role while converting the surrounding JSX syntax into JavaScript. This is different from putting arbitrary JavaScript statements directly inside JSX expression positions.