JSX

JSX is a syntax used to describe React element trees inside JavaScript. It lets you write markup-like expressions that are transformed into JavaScript representing React elements.

JSX looks similar to HTML, but it is part of JavaScript syntax rather than HTML itself. A JSX expression such as `<h1>Hello</h1>` describes an element that React can use when building the UI.

JSX supports JavaScript expressions inside curly braces, such as `{name}`, `{count + 1}`, or `{items.map(...)}`. Statements such as `if` cannot be placed directly inside JSX, so conditional rendering is commonly expressed with JavaScript operators such as `&&` or the ternary operator.

JSX attributes generally use JavaScript-oriented naming and values. For example, `className` is used instead of HTML's `class`, and JavaScript expressions can be supplied with braces: `<button disabled={isDisabled}>Save</button>`.

A JSX element must follow JSX syntax rules, including having a single enclosing parent when multiple sibling elements are returned. Fragments, written as `<>...</>`, can group elements without adding an extra DOM element.

JSX is transformed by a build tool or compiler into JavaScript. The exact generated form depends on the configured JSX transform, so developers should think of JSX as source syntax rather than assuming one fixed runtime implementation.

Key points

• JSX describes React element trees using JavaScript-compatible syntax.
• Use `{...}` to embed JavaScript expressions in JSX.
• Use `className` and other JSX property conventions rather than assuming HTML attribute names.
• Multiple sibling JSX elements need a common parent or a Fragment.
• JSX is transformed into JavaScript before or during application execution.

Interview questions

What is JSX, and why is it used in React?

JSX is a syntax extension that lets developers describe React elements with markup-like syntax inside JavaScript. It makes component structure easier to read because the UI hierarchy is visible directly in the source. JSX can also embed JavaScript expressions, which makes dynamic rendering convenient. It is transformed into JavaScript before React uses the resulting element descriptions.

How do you put JavaScript inside JSX?

JavaScript expressions are placed inside curly braces in JSX. For example, `{name}` inserts a variable's value and `{count + 1}` evaluates an expression. JSX does not accept arbitrary JavaScript statements directly inside those braces. For conditional logic, developers commonly use expressions such as a ternary operator or `&&`.

Why do JSX attributes sometimes differ from HTML attributes?

JSX attributes are represented as JavaScript properties, so their names and values follow JavaScript and React conventions. For example, CSS classes are specified with `className` rather than `class`. Values can also be JavaScript expressions when wrapped in braces, such as `disabled={isDisabled}`. This distinction matters because JSX is not raw HTML even though its syntax resembles HTML.

Why can't you return multiple sibling JSX elements without wrapping them?

A JSX expression needs to represent one enclosing element tree at the return point. Multiple sibling elements can therefore be grouped with a parent element or a Fragment. A Fragment is useful when adding an extra DOM node would be unnecessary. The short syntax `<>...</>` is commonly used for this purpose.

What happens to JSX before React uses it?

JSX is transformed from its source syntax into JavaScript. The transformation produces calls or equivalent structures that describe React elements, depending on the configured JSX runtime and toolchain. Developers normally do not write that generated form manually because JSX is more readable. The exact generated code can vary with the build configuration and React setup.