What JSX is, and fragments

Model answer. JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. Browsers cannot run it directly; a compiler (Babel, SWC, esbuild, TypeScript) transpiles it into plain function calls:

const el = <h1 className="title">Hello, {name}</h1>;
// compiles (with the modern JSX transform) to roughly:
const el2 = jsx('h1', { className: 'title', children: ['Hello, ', name] });

Each JSX tag becomes one expression (an object describing an element). A function can only return one value, so a component must return one root. To group siblings without adding an extra <div> to the DOM, use a fragment:

return (
  <>
    <dt>{term}</dt>
    <dd>{meaning}</dd>
  </>
);
// use <Fragment key={id}> when the fragment is inside a list and needs a key

JSX differences from HTML: className instead of class, htmlFor instead of for, camelCase attributes (onClick, tabIndex), style takes an object, every tag must be closed (<img />), and { } embeds any JavaScript expression. Values in { } are escaped automatically, which protects against XSS.