JSX Syntax and How It Compiles

JSX is a syntax extension to JavaScript, standardized by nobody and understood by no browser. A compiler — Babel 41,624 , SWC 553,439 or esbuild 126 , whichever your bundler uses — rewrites every JSX expression into a function call before the code ships. The shape is <Type attribute={value}>children</Type>, where Type is a lowercase built-in DOM tag or a capitalized identifier naming one of your components. That capitalization is not style: <price /> compiles to the string "price", <Price /> to a reference to the variable Price.

JSX source, before compilationJavaScript

const title = 'Catalog';
const el = (
  <section className="panel" data-id="1">
    <h1>{title}</h1>
    <Price value={19.5} />
  </section>
);

Output

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const title = 'Catalog';
const el = /*#__PURE__*/_jsxs("section", {
  className: "panel", "data-id": "1",
  children: [/*#__PURE__*/_jsx("h1", { children: title }),
             /*#__PURE__*/_jsx(Price, { value: 19.5 })]
});

That is Babel 8.0.5 with the automatic runtime, the default since React 17 7,897 : the compiler imports jsx and jsxs (the s variant takes a static children array) from react/jsx-runtime itself, which is why a modern file never needs import React from 'react'. The older classic runtime emitted React.createElement and did require that import; you still meet it in browser-only setups like the demos below.

From a JSX file to DOM nodes: the compiler runs at build time, React at run time

MENU

JSX Syntax and How It Compiles