What is JSX and how does the browser run it?

WHAT THIS TESTS Your understanding that JSX is a compile-time convenience, not something the browser or React itself executes. Interviewers want to hear the pipeline from authoring syntax to runtime JavaScript.

A GOOD ANSWER COVERS JSX is an XML-like syntax extension to JavaScript that lets you write markup-shaped code inside JS. It is not HTML and the browser cannot run it. A build step, typically Babel or SWC, transpiles each JSX element into a function call. With the classic runtime that call is React.createElement(type, props, children); with the modern automatic runtime it becomes a jsx() call imported from react/jsx-runtime. Either way the output is plain JavaScript that returns lightweight objects describing the desired UI, which React then reconciles into actual DOM nodes. Differences from HTML include using className instead of class, htmlFor instead of for, camelCased attributes like onClick and tabIndex, self-closing tags being mandatory, style taking an object, and the ability to embed any JavaScript expression inside curly braces.

COMMON WRONG ANSWERS Saying the browser understands JSX. Claiming JSX is just HTML written in JS files. Confusing JSX with template strings. Forgetting that a transpiler is required and that the result is React.createElement or jsx calls.

LIKELY FOLLOW-UPS What does React.createElement return? Why must components start with a capital letter? How does the automatic JSX runtime differ from the classic one? Can you use JSX without React?

ONE CONCRETE EXAMPLE The expression const el = <h1 className="title">Hi {name}</h1> compiles under the classic runtime to React.createElement("h1", { className: "title" }, "Hi ", name). That call yields a plain object like { type: "h1", props: { className: "title", children: [...] } }. The bundler ships only that JavaScript; the browser executes the function call, React builds the virtual node, reconciles it, and finally creates a real h1 DOM element with the class title.