React via CDN — frontend bundle

One HTML file, zero build — React 19 + Babel

A browser understands JavaScript + the DOM, never JSX. To try React with no bundler you pull three scripts from a CDN: the React runtime, the DOM renderer, and Babel to turn <JSX> into React.createElement(...). Below, edit the JSX in the box, hit compile & render, and watch it flow: JSX → Babel → element tree → live DOM.

CDN script	role	what it gives you
`react@19.2.7` esm.sh `?dev`	the runtime	`React.createElement`, hooks (`useState`), `React.version`
`react-dom@19.2.7/client` esm.sh `?dev`	the DOM renderer	`createRoot` — the React 19 mount API (no more `ReactDOM.render`)
`@babel/standalone@8.0.3` jsDelivr	the compiler	`Babel.transform(src,{presets:[['react',{runtime:'classic'}]]})` → `React.createElement` Babel 8 defaults to `automatic` (jsx-runtime imports) — force `classic` here

React 19 dropped UMD. The old unpkg.com/react@19/umd/react.development.js no longer exists — React ships only ESM now, so we import() it from esm.sh and assign it to window ourselves. (Full story + sources in the guide.)

1 · the JSX you write (edit me)

function App() {
  const [n, setN] = React.useState(0);
  return (
    <div className="card">
      <h1>Hello, React</h1>
      <p>Babel compiled this JSX; React {React.version} rendered it.</p>
      <button onClick={() => setN(n + 1)}>clicked {n} times</button>
    </div>
  );
}

createRoot(document.getElementById('root')).render(<App/>);

2 · Babel compiles JSX into an element tree

Babel transforms <App/> into React.createElement(App). This plain-JS call returns a plain object — a React element, the description of a node. That object tree is what React actually works with.

// (hit “compile & render” to see Babel’s output here)

3 · createRoot renders the tree into the DOM

createRoot(document.getElementById('root')).render(<App/>) is the React 19 mount call. React walks the element tree and produces real DOM nodes inside #root. Click the button in the card — that is live React state (the n re-render proves it).

mount node #root children: 0 · rendered text: —