Detailed explanation
JSX is a syntax extension for JavaScript that lets you describe user interfaces using HTML-like markup alongside JavaScript logic. In React, it provides a readable way to express elements, components, and their relationships. For example, const el = <h1 className="title">{2 + 3}</h1>; describes a heading whose content evaluates to 5. JSX is not HTML, a string template, or a requirement for using React; it is a convenient syntax for creating React elements. Its main benefit is keeping rendering logic close to the interface it describes.
Browsers do not normally understand JSX directly, so a compiler such as Babel or TypeScript transforms it into JavaScript before execution. With the classic JSX transform, the example becomes React.createElement('h1', { className: 'title' }, 2 + 3), with the expression evaluating to 5 at runtime. With the modern automatic transform, the compiler instead generates calls to helpers from React's JSX runtime, so importing React solely for JSX is usually unnecessary. These calls produce React element objects describing what should appear on screen; they do not immediately create DOM nodes. React uses these descriptions during rendering and reconciliation to determine the necessary updates.
Curly braces embed JavaScript expressions in JSX, such as variables, function calls, ternary expressions, and array.map() results. Statements such as if and for cannot appear directly inside braces; use them outside the JSX or choose an expression-based alternative. When returning adjacent elements as one JSX expression, wrap them in a parent element or a fragment, written as <>...</>. A fragment groups children without adding an extra DOM element. JSX tags must also be closed, including self-closing tags such as <img />.
JSX uses React's prop conventions rather than copying every HTML attribute spelling: use className instead of class and htmlFor instead of for. Many props use camelCase, such as onClick, while aria-* and data-* remain hyphenated. Lowercase tags identify built-in elements, whereas capitalised names identify components. Interviewers generally expect you to explain both the readable syntax and the transformation into element descriptions, rather than claiming that JSX directly becomes HTML.
Key points to remember
- JSX is an optional JavaScript syntax extension for describing React interfaces.
- Classic transforms use React.createElement; modern automatic transforms use JSX runtime helpers.
- Curly braces accept JavaScript expressions, not arbitrary statements.
- Adjacent JSX elements need a parent or fragment when combined into one expression.
- Use React prop names such as className and htmlFor, and close every JSX tag.
Common mistakes candidates make
- Calling JSX HTML or saying it directly creates DOM nodes.
- Putting if statements or for loops directly inside JSX braces.
- Assuming every JSX setup requires importing React and compiles to React.createElement.
Likely follow-up questions
Can React be used without JSX?
Yes, you can create elements directly with React.createElement. JSX is generally easier to read for nested interfaces, but React does not require it.
Why use a fragment instead of a div?
A fragment groups multiple children without introducing a DOM wrapper. This avoids unnecessary markup and wrappers that could affect layout or HTML structure.
Can you use if conditions inside JSX?
You cannot place an if statement directly inside JSX braces because braces expect an expression. Use a ternary expression or logical AND for conditional content, or use an if statement before returning JSX.
Interview tip: Define JSX, walk through the heading example, and briefly distinguish the classic transform from the modern automatic transform.