What is JSX? | Interview Question

Q: What is JSX?

**Target Audience:** Anyone preparing for a React interview — assumes JavaScript basics, no React required. **Difficulty:** Easy > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The compiled output in section 3 was produced by actually running a JSX source file through this project bundler toolchain, and the escaping behaviour in section 5 by rendering it in React 19.2.8. ## 1. Why This Even Matters — A Story First Musical notation is not music. It is a written shorthand that a performer converts into sound. Nobody claims the page *is* the symphony — but writing the symphony directly as air-pressure waveforms would be unbearable, so we use the notation. JSX is notation. It looks like HTML because UI trees are shaped like HTML, and reading nested function calls is unbearable. A compiler converts it to those function calls before the browser ever sees it. ## 2. The Core Idea 📌 **Interview term: JSX** — a

The problem

Question presented to candidate: "What is JSX, and what actually happens to it before the browser runs your code?"

What a strong answer should cover:

JSX is an XML-like syntax extension to JavaScript, not HTML and not a template language.
Browsers cannot run it — a compiler (Babel, SWC, oxc, TypeScript) turns it into plain function calls at build time.
Under the modern automatic runtime it compiles to jsx() / jsxs() auto-imported from react/jsx-runtime; the older classic runtime compiled to React.createElement and required React to be in scope.
The calls return elements — plain objects — so JSX produces data, it does not render anything.
Capitalisation matters: lowercase names compile to strings (host elements), capitalised ones to the identifier itself.
It is an expression, so it can be assigned to variables, returned, and put in arrays.
Attribute differences: className, htmlFor, camelCased event handlers, style as an object.
Security: interpolated values are escaped, which is why dangerouslySetInnerHTML has to exist and is named that way.
Depth signal: key is compiled to a separate argument, not into props — which is why props.key does not exist.

Clarifying questions expected:

"Do you want the syntax rules, or what it compiles to?"

Code / implementation expected: Optional, but showing the compiled output next to the source is the strongest version of this answer.

jsx
syntax
transpilation
react basics

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Anyone preparing for a React interview — assumes JavaScript basics, no React required. Difficulty: Easy

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The compiled output in section 3 was produced by actually running a JSX source file through this project bundler toolchain, and the escaping behaviour in section 5 by rendering it in React 19.2.8.

1. Why This Even Matters — A Story First

Musical notation is not music. It is a written shorthand that a performer converts into sound. Nobody claims the page is the symphony — but writing the symphony directly as air-pressure waveforms would be unbearable, so we use the notation.

JSX is notation. It looks like HTML because UI trees are shaped like HTML, and reading nested function calls is unbearable. A compiler converts it to those function calls

The solution is hidden so you can try first

6 min read · 9 sections

Try it in the playground

Open any example in the playground to run and change it.

ReactJSX is an expression, values are escaped, and 0 is not falsy enough

Open in playground

import { useState } from "react";

export default function App() {
  const [items, setItems] = useState([]);
  const evil = '<img src=x onerror="alert(1)">';

  // JSX is an EXPRESSION: assign it, store it in an array, return it early.
  const badge = <span style={{ background: "#eee", padding: "2px 6px", borderRadius: 4 }}>badge</span>;
  const rows = ["alpha", "beta"].map((t) => <li key={t}>{t}</li>);

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6 }}>
      <h3>Interpolated values are escaped</h3>
      {/* Renders as literal text — no <img> element is created, so the
          onerror handler can never fire. */}
      <p style={{ fontFamily: "ui-monospace, monospace", fontSize: 13 }}>{evil}</p>

      <h3>JSX is just a value</h3>
      <p>Here is a {badge} stored in a variable.</p>
      <ul>{rows}</ul>

      <h3>The classic 0 bug</h3>
      <p>
        {/* ❌ On an empty array this renders a stray "0" */}
        Wrong: [{items.length && <strong>has items</strong>}]
      </p>
      <p>
        {/* ✅ Force a real boolean */}
        Right: [{items.length > 0 && <strong>has items</strong>}]
      </p>
      <button onClick={() => setItems(items.length ? [] : ["one"])}>
        Toggle items (currently {items.length})
      </button>

      <p style={{ color: "#666", fontSize: 13 }}>
        With the list empty, the first line shows a 0 and the second shows
        nothing. React renders 0 as text; false, null and undefined render nothing.
      </p>
    </div>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.