In a React project, what JavaScript does the JSX expression `<Button color="blue">Save</Button>` compile to, and what does that compiled call return at runtime?

## JSX is a syntax, not a runtime feature No JavaScript engine understands JSX. It is a syntax extension that a build step — Babel's `@babel/plugin-transform-react-jsx` (usually via `@babel/preset-react`), or SWC in Next.js, or esbuild/SWC behind Vite's React plugin — rewrites into ordinary function calls before the code ever reaches the browser. Being able to write out that rewritten code is the single fastest way to show you understand React instead of having memorized a template language. ## The two transforms There are two compilation modes, and both are still in use. The **classic** runtime, which is what React used for years: ```js // source <Button color="blue">Save</Button> // output React.createElement(Button, { color: "blue" }, "Save"); ``` Attributes become a props object; children become trailing arguments. Because the emitted code names `React`, every file containing JSX had to have `React` imported and in scope. The **automatic** runtime, introduced in React 17 and what current toolchains emit: ```js // output import { jsx as _jsx } from "react/jsx-runtime"; _jsx(Button, { color: "blue", children: "Save" }); ``` Here the compiler injects the import itself, and children are folded into the props object under the `children` key. That is not a cosmetic difference: `props.children` is exactly where children live at runtime in both modes, so the automatic output simply makes the data shape visible. ## What the call returns Both `jsx(...)` and `React.createElement(...)` return a **React element**: a frozen plain object, roughly ```js { $$typeof: Symbol.for("react.element"), // internal brand type: Button, // function/class, or "div" for a host tag key: null, props: { color: "blue", children: "Save" } } ``` Three things follow from that shape. First, `type` is the *value* the tag resolved to — a function reference for a component, a plain string for a DOM tag. Second, `key` is lifted out of the attributes into its own field, so a component cannot read it from `props`. Third, calling `jsx` does not call `Button`; it only records that `Button` should be called with those props. React invokes `type` itself while rendering, which is why an element can be created, stored in a variable, passed around, and never rendered at all. ## jsx, jsxs, and jsxDEV `react/jsx-runtime` exports `jsx`, `jsxs`, and `Fragment`. The compiler emits `jsxs` when a tag has a statically known list of children: ```js _jsxs("ul", { children: [_jsx("li", {}, "a"), _jsx("li", {}, "b")] }); ``` The distinction exists so React can tell a compiler-generated static children array from an array a developer passed in, which needs key validation. The third argument of `jsx`/`jsxs` is the `key`, not a child. Development builds instead import `jsxDEV` from `react/jsx-dev-runtime`; it takes extra arguments carrying the source file name and line number, which is how React attaches useful locations to its warnings. ## Why interviewers ask this The desugaring explains a cluster of behaviours that otherwise look arbitrary: why component tags must be capitalized (a lowercase tag compiles to a string), why JSX attributes follow JavaScript identifier rules (`className`, `htmlFor`), why a tag must have exactly one root value per expression (a function call returns one value), why props spread merges left to right (it becomes an object literal with a spread), and why `{}` inside JSX takes any expression but not a statement (it becomes an argument position). It also grounds the mental model React itself relies on: producing elements is producing data. The render pass turns that data into work; nothing in the JSX expression itself touches the DOM. ## The one-sentence version "JSX compiles to `jsx(type, props, key)` calls that return plain objects describing the UI; React reads those objects and decides what to do with them." If you can then write out both the classic and automatic output on a whiteboard, you have answered the question completely.