JSX

JSX (JavaScript XML) is a syntax extension that allows HTML-like tags to be written inside JavaScript. It is most associated with React but is not valid JavaScript on its own: a compiler such as Babel, TypeScript, SWC or esbuild transforms it into ordinary function calls that create elements.

Why it matters

JSX keeps a component's markup and logic together, so the structure is visible next to the code that drives it. It is not a template language: expressions in curly braces are real JavaScript, so loops and conditions use map() and ternaries rather than special directives. JSX output is escaped by default, which reduces cross-site scripting risk when rendering text.

Example

function Greeting({ name, items }) {
  return (
    <div className="box">
      <h2>Hello, {name}</h2>
      <ul>
        {items.map((i) => <li key={i.id}>{i.label}</li>)}
      </ul>
    </div>
  );
}

Behind the scenes the <div> becomes a call like jsx("div", { className: "box", children: ... }). Note className instead of class.

Common mistakes

• Returning sibling elements without a wrapper or fragment (<>...</>).
• Using class and for instead of className and htmlFor.
• Forgetting the key prop on list items.
• Injecting raw HTML with dangerouslySetInnerHTML from untrusted data.

Related

• React
• Component
• Transpiler
• XSS

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.