JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. The browser does not understand JSX — a compiler (Babel, SWC, esbuild) transforms it into regular function calls before the code runs.
el = ;
el = .(
,
{ : },
, name
);
The result is a plain JavaScript object (a "React element") that describes the UI — it isn't a real DOM node yet. React reads that object to build the Virtual DOM.
function Card({ user }) {
return (
<> {/* Fragment: one root without an extra <div> */}
<h2 className="name">{user.name}</h2> {/* camelCase: className, not class */}
{user.isAdmin && <Badge />} {/* {} embeds any JS expression */}
</>
);
}
className, onClick) because they map to JS, not HTML.{ } embeds expressions (values, ternaries, .map()), but not statements like if.JSX is just sugar for createElement, so anything you can do in JSX you can do in plain JS — it simply makes UI code read like the markup it produces, which is far more readable than nested function calls.