Interview · Fundamentals
JSX
What is JSX and what does it compile to?
JSX is syntactic sugar over React.createElement. The browser doesn't understand it — a compiler (Babel/SWC) transforms it into JS function calls before it runs.
What the compiler does
<Button color="red">Click</Button> becomes React.createElement(Button, { color: "red" }, "Click"). JSX isn't magic — it's a more readable way to create objects that describe nodes in the UI tree.
JSX is not HTML
Key differences: className instead of class, htmlFor instead of for, events in camelCase (onClick), and style takes a JS object instead of a string. Also, all elements must be closed — including <br /> and <img />.
Common pitfalls
- 01Since React 17 you no longer need to import React to use JSX — the new transform injects it automatically.
- 02Expressions inside {} must be valid JS expressions, not statements. You can't use if directly — use a ternary or &&.
- 03A component must return a single root element. Use <></> (Fragment) to wrap multiple elements without adding extra DOM nodes.
Was this helpful?
Sign in to give feedback