What is JSX and how does the browser run it?
Quick answer
JSX is syntax sugar for React.createElement calls. A compiler (Babel/SWC) transpiles it to plain JavaScript the browser can run.
In detail
JSX looks like HTML but it is JavaScript. It is not understood by browsers directly — a build step compiles each tag into a React.createElement(type, props, ...children) call, which returns a plain object (a React element) describing the UI. Because JSX is an expression, you can store it in variables, return it, and embed JavaScript with curly braces.
const el = <h1 className="title">Hi {name}</h1>;
// compiles to:
const el = React.createElement("h1", { className: "title" }, "Hi ", name);
// which is just an object: { type: "h1", props: {...} }Why interviewers ask this: Confirms you know JSX is JavaScript, not a templating language.
Common follow-up questions
- →Why className instead of class?
- →Can you use if/for directly inside JSX?
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399