JSX

ELI5 — The Vibe Check

JSX is a JavaScript syntax extension that lets you write HTML-like code directly inside your JavaScript. React uses it to describe what the UI should look like. Your browser can't read it — a compiler (like Babel or esbuild) transforms it into plain function calls. It looks wild at first but you'll miss it when it's gone.

Real Talk

JSX (JavaScript XML) is a syntax extension for JavaScript, popularized by React, that allows writing HTML-like syntax in JS files. JSX transpiles to React.createElement() calls (or the newer JSX transform's _jsx). It requires a build step (Babel, esbuild, SWC). JSX is not HTML — notable differences include className instead of class, camelCase event handlers, and self-closing required tags.

Show Me The Code

// JSX
const Button = ({ label, onClick }) => (
  <button
    className="btn btn-primary"
    onClick={onClick}
  >
    {label}
  </button>
)

// What it compiles to (old transform)
const Button = ({ label, onClick }) =>
  React.createElement('button',
    { className: 'btn btn-primary', onClick },
    label
  )

When You'll Hear This

JSX uses className, not class — it's a JavaScript keyword.,Curly braces {} in JSX let you inject any JavaScript expression.,JSX must return a single root element (use fragments <> </> to avoid extra divs).