What is JSX and how does it become JavaScript?

Question

IT Interview Practice · Accepted Answer

**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. ## What it compiles to ```jsx const el =

Hi {name}

; // the compiler turns it into (classic runtime): const el = React.createElement( "h1", // tag / component { className: "title" }, // props "Hi ", name // children ); ``` 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. ## Key rules (and why) ```jsx function Card({ user }) { return ( <> {/* Fragment: one root without an extra

*/}

{user.name}

{/* camelCase: className, not class */} {user.isAdmin && } {/* {} embeds any JS expression */} ); } ``` - Must return a **single root** (wrap siblings in a Fragment). - Attributes use **camelCase** (`className`, `onClick`) because they map to JS, not HTML. - `{ }` embeds expressions (values, ternaries, `.map()`), but **not** statements like `if`. ## Why it matters 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.