**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

What is JSX? | Interview Question

01

Understand 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.

jsxsyntaxtranspilationreact basics

02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the 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 runnin

Solution ready — 2 min read

Classified // press E to declassify

04

Explore the playground snippets

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

Run 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>
  );
}

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.