What is JSX, and how does the browser run it?
JSX is a syntax that lets you write markup inside JavaScript. A build tool such as Babel, SWC or esbuild compiles each tag into a plain function call that returns a description of the UI. Browsers never see JSX.
Explain it simply
JSX is like writing a train ticket in a printed form instead of describing every field aloud. It looks like HTML, but it is really JavaScript in disguise. The browser cannot read it, so a build tool translates it before the page ships.
Each tag becomes a call that creates a plain object (an element) describing what you want on screen. React reads those objects and updates the real DOM.
This is also why a JSX file needs a build step: tools like Vite or Next.js run the compiler for you. Since React 17 the compiler no longer needs import React in every file, because it imports the jsx helper automatically.
Example
// What you write
const el = <h1 className="title">Hello, Asha</h1>;
// What the compiler produces (modern runtime)
const el2 = jsx("h1", { className: "title", children: "Hello, Asha" });
// el2 is just an object: { type: "h1", props: { ... } }What to say in the interview
"JSX is syntax sugar over function calls that create React elements. Tools like Babel or SWC compile it at build time, so the browser only receives plain JavaScript. Elements are lightweight objects; React uses them to decide what to change in the DOM. JSX is optional, but it is the standard way to write components."
Common mistakes
- Saying the browser understands JSX directly.
- Thinking JSX is a template language with its own runtime.