JSX & Compilation

Browsers don't understand JSX. See how it compiles down to plain JavaScript.

React3 min readConcept 2 of 46

What it is

JSX is a syntax extension for JavaScript. It allows you to write HTML-like markup directly inside your JavaScript files.

However, browsers have no idea how to read JSX. Before your code can run in the browser, a compiler (like Babel, SWC, or Turbopack) transforms every JSX tag into a plain JavaScript function call—specifically, React.createElement() or the modern _jsx() transform.

Why it matters

Instead of artificially separating logic and markup into separate .js and .html files, React puts them together in components. This keeps the rendering logic (events, state changes) tightly coupled with the UI it controls.

Because JSX ultimately compiles into JavaScript expressions, you can harness the full power of JavaScript inside your UI. You can assign JSX to variables, pass it as arguments, or return it from functions.

How it works

Whenever you write <h1 className="title">Hello</h1>, the compiler rewrites it into a JavaScript object definition.

Because it becomes a JavaScript object, HTML attributes must follow JavaScript naming conventions. This is why you must use className instead of class (which is a reserved keyword in JavaScript), and onClick instead of onclick.

The Compiler's View

What you write is on the left. What the browser actually receives is on the right. Notice how the JSX compiles down into a plain JavaScript object.

// 1. You write this JSX:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);

Compiled JavaScript Output

const element = _jsx("h1", {
className: "greeting",
children: "Hello, world!"
});

JSX is just syntactic sugar. A compiler strips it away before it reaches the browser.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What happens to JSX before it runs in the browser?
  2. 2Why must adjacent JSX elements be wrapped in a single parent tag or Fragment?
  3. 3Why does JSX use `className` instead of the standard HTML `class` attribute?

Remember this

  • JSX is not HTML; it is a syntax extension for JavaScript.
  • Compilers transform JSX into plain JavaScript objects (React.createElement).
  • You must wrap adjacent elements in a parent tag or <> Fragment.
  • Use camelCase for all attributes (e.g., className, onClick).

Done with this concept?

Mark it complete to track your progress. No login needed.