JSX Explained

Written by Swapnil RajaPublished 29 Aug 2026

JSX is syntax sugar for one function call. Once you have seen what it compiles to, most of its rules stop being arbitrary.

What it becomes

A JSX tag compiles to React.createElement(type, props, ...children). That is all. Your browser never sees JSX - a compiler rewrites it first, and on this site that happens as you press Run.

The same element, written twice

jsx

// JSX
const fromJsx = <h3 className="title">Hello</h3>

// Exactly what the compiler produces
const fromCall = React.createElement("h3", { className: "title" }, "Hello")

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <div>
    {fromJsx}
    {fromCall}
    <p>Both lines above produced identical output.</p>
  </div>
)

PreviousYour First Component NextExpressions in JSX

The differences, side by side

jsx

function Styled() {
  return (
    <div>
      <p className="note" style={{ color: "#cc4600", fontWeight: 700 }}>
        className and a style object
      </p>
      <label htmlFor="email">htmlFor, not for</label>{" "}
      <input id="email" placeholder="you@example.com" />
      <br />
      <small>Self-closing tags are required.</small>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Styled />)

JSX Explained

What it becomes

It is not HTML

Why the double braces

Why JSX is optional but universal