React JSX

What is JSX? #

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that lets you write HTML-like markup directly inside a JavaScript file. JSX is not valid JavaScript — it is transformed into React.createElement() calls by your build tool (Vite / Babel) at compile time.

// What you write
const element = <h1 className="title">Hello, {name}!</h1>;

// What it compiles to (you never write this)
const element = React.createElement(
  "h1",
  { className: "title" },
  "Hello, ", name, "!"
);

JSX Rules #

1. Return a single root element #

// ❌ Two siblings at root — error!
return (
  <h1>Title</h1>
  <p>Paragraph</p>
);

// ✅ Wrap in a fragment
return (
  <>
    <h1>Title</h1>
    <p>Paragraph</p>
  </>
);

2. Close all tags #

// ❌ HTML allows <br> — JSX does not
<br>

// ✅ JSX requires self-closing
<br />
<img src="logo.png" alt="Logo" />
<input type="text" />

3. Use camelCase attributes #

// HTML          →  JSX
// class         →  className
// for           →  htmlFor
// tabindex      →  tabIndex
// onclick       →  onClick
// stroke-width  →  strokeWidth

<label htmlFor="email" className="label">Email</label>
<input id="email" className="input" tabIndex={0} />

4. Expressions go inside { } #

const name    = "Alice";
const isAdmin = true;
const items   = ["Apple", "Banana", "Cherry"];

return (
  <div>
    <p>{name.toUpperCase()}</p>           {/* string expression */}
    <p>{2 + 2}</p>                         {/* number expression */}
    <p>{isAdmin ? "Admin" : "User"}</p>   {/* ternary */}
    <p>{isAdmin && <span>⭐</span>}</p>  {/* short-circuit */}
    <ul>{items.map(i => <li key={i}>{i}</li>)}</ul>
  </div>
);