fundamentalsbeginner

JSX Compilation

JSX is a syntax extension for JavaScript that compiles into React.createElement or react/jsx-runtime function calls.

Mental Model

"The Translator: Writing JSX looks like HTML, but the compiler instantly translates it into standard JavaScript objects."

Interactive Engine Simulation

The Build Pipeline

Source JSX

<div>

Babel / SWC

JavaScript Output

_jsx("div", { className: "hero" })

Browsers can't read JSX natively.

JSX is just a concise way to write nested function calls. Every tag becomes an object-creating instruction for React's engine.

Executable Code Snippet

Component.jsx

JSX / React 19

1// This JSX:
2const element = <h1 className="title">Hello World</h1>;
3
4// Becomes this JS:
5const compiled = React.createElement(
6  'h1', 
7  { className: 'title' }, 
8  'Hello World'
9);
10

Technical Takeaways & Best Practices

01.Component re-renders are triggered by state or prop changes.
02.Reconciliation algorithm diffs the Virtual DOM to minimize actual DOM updates.
03.Automatic batching optimizes multiple state updates into a single render cycle.

01. Not HTML. Not String.

JSX looks like HTML, but it's a syntax extension for JavaScript. Browsers cannot read JSX. It must be compiled by a tool like **Babel** or **SWC**. Every tag you write becomes a function call that returns a "React Element" (a plain JavaScript object).

Transformation Flow

Source (.jsx)

→

Transpiler (SWC)

↓

Runtime (.js)

02. The Modern Transform

In older versions of React, you had to `import React` in every file because JSX compiled to `React.createElement`. In modern React (17+), the compiler automatically imports special functions like `_jsx` from the `react/jsx-runtime` package, making your code cleaner and bundles smaller.

Pro Tip

"Since JSX is just JavaScript, you can use any JS expression (math, functions, variables) inside curly braces . This is the ultimate power of React compared to template-based frameworks."