What is JSX and how does it work?

Question

Accepted Answer

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like markup directly inside JavaScript. The browser doesn't understand JSX — a compiler ( Babel or SWC ) transforms it into React.createElement() calls before runtime. Compiles to function calls —

hi

becomes React.createElement("div", { className: "x" }, "hi") . Expressions in braces — {value} evaluates any JavaScript expression inline. className, htmlFor — HTML attributes renamed to avoid clashing with JS reserved words. One root element — each return must be a single node; use Fragments ( <> ... ) when you don't want an extra wrapper. Optional but ubiquitous — you can write React without JSX (raw createElement ) but nearly all real code uses it. New JSX transform (17+) — you no longer need import React in every file; the compiler injects what it needs. Type-checked — with TypeScript, JSX gets full prop type checking via .tsx files. Know that JSX compiles to React.createElement calls. Mention the XSS protection (auto-escaping) as a security benefit. Understanding what JSX produces under the hood separates strong candidates.