Read

JSX is not a runtime feature — it is sugar the build tool transforms into nested function calls. Understanding this transformation demystifies how <div onClick={fn}>hi</div> becomes a vnode that the reconciler can compare.

A Babel/swc/esbuild JSX transform reads:

<div class="card">Hello</div>

And emits:

Where h is whatever pragma you configure (React.createElement, h, Preact.h, etc.). The transform is purely lexical — there is no runtime JSX parser.

In this exercise you implement a tiny JSX -> h transformer for a single-element subset (no nesting, no expressions). It is enough to feel how the pipeline works.