JSX

The HTML-like syntax extension that lets you write UI markup directly inside JavaScript - what it compiles to, and its rules.

What it is, in plain English: JSX (JavaScript XML) is a syntax extension that lets you write HTML-like markup directly inside JavaScript code. It is not valid JavaScript on its own — a build tool (Babel, or Vite's built-in transform) compiles JSX into regular React.createElement() function calls before the browser ever sees it. JSX is optional (you can call React.createElement directly) but is the standard way to write React because it reads naturally and closely resembles the resulting UI.

Writing UI markup inside JavaScript

What JSX looks like

function Greeting() {
  return <h1>Hello, World!</h1>;
}

// It LOOKS like HTML, but it's not. It's JavaScript.
// A build tool converts <h1>Hello</h1> into:
// React.createElement("h1", null, "Hello")
// before your browser ever runs the code.

Embedding JavaScript values with curly braces

function Greeting({ name }) {
  const hour = new Date().getHours();
  const greeting = hour < 12 ? "Good morning" : "Good evening";

  return (
    <div>
      <h1>{greeting}, {name}!</h1>
      <p>The time is {hour}:00</p>
      <p>2 + 2 = {2 + 2}</p>
    </div>
  );
}
// Anything inside { } is evaluated as a JavaScript expression.

JSX's key rules (different from HTML)

// 1. className instead of class (class is a reserved JS word):
<div className="card">...</div>

// 2. Self-closing tags REQUIRE the slash:
<img src="photo.jpg" />     {/* ✓ correct */}
{/* <img src="photo.jpg">  ✗ error in JSX */}
<br />
<input type="text" />

// 3. Must return exactly ONE root element:
// ✗ This is invalid:
// return (<h1>Title</h1><p>Text</p>);

// ✓ Wrap in a single parent:
return (
  <div>
    <h1>Title</h1>
    <p>Text</p>
  </div>
);

// 4. camelCase for attributes (onclick → onClick, tabindex → tabIndex):
<button onClick={handleClick}>Click</button>

Fragments — a root wrapper without adding a DOM element

// Sometimes you don't want an extra <div> wrapping your content:
function Pair() {
  return (
    <>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </>
  );
}
// <>...</> is shorthand for <React.Fragment>...</React.Fragment>
// Renders the children with NO extra wrapping element in the DOM

Try It Yourself (JSX)

// JSX -- HTML-like syntax that compiles to JavaScript function calls

// This JSX:
function Greeting() {
  return <h1 className="title">Hello, World!</h1>;
}

// ...compiles to this (what Babel actually generates):
// function Greeting() {
//   return React.createElement("h1", { className: "title" }, "Hello, World!");
// }

// Embedding JavaScript expressions with { }
function UserCard({ name, age }) {
  const isAdult = age >= 18;
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Status: {isAdult ? "Adult" : "Minor"}</p>
      <p>Doubled age: {age * 2}</p>
    </div>
  );
}

// JSX rules demonstrated:
function RulesDemo() {
  const items = ["Apple", "Banana", "Cherry"];

return (
    <div className="container">
      <h3>Fruits</h3>
      <ul>
        {items.map((item, i) => (
          <li key={i}>{item}</li>
        ))}
      </ul>
      <input type="text" />
      <br />
      {items.length > 0 && <p>{items.length} fruits total</p>}
    </div>
  );
}

console.log("JSX = HTML-like syntax that compiles to React.createElement() calls");

function App() {
  return (
    <div>
      <Greeting />
      <UserCard name="Alice" age={30} />
      <RulesDemo />
    </div>
  );
}

Conditional rendering, lists, and JSX gotchas

Conditional rendering patterns

function StatusBadge({ isOnline }) {
  // Ternary — for either/or:
  return <span>{isOnline ? "🟢 Online" : "⚫ Offline"}</span>;
}

function Notifications({ count }) {
  // && — for show-or-nothing (careful with the 0 trap below):
  return (
    <div>
      {count > 0 && <span className="badge">{count} new</span>}
    </div>
  );
}

// THE 0 TRAP — a classic JSX bug:
function BadExample({ items }) {
  return <div>{items.length && <List items={items} />}</div>;
  // If items.length is 0, JSX renders the literal "0" on screen!
  // (0 is falsy, but React still renders falsy NUMBERS, just not false/null/undefined)
}
function GoodExample({ items }) {
  return <div>{items.length > 0 && <List items={items} />}</div>;
  // Comparison produces a boolean, not a number — safe

Rendering lists correctly

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>          {/* key MUST be unique and stable */}
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

// Why key matters: React uses it to track which item is which across re-renders.
// Without a stable key (e.g. using array index when the list can reorder),
// React can mix up component state between items, causing subtle bugs.

JSX values that render nothing

// These all render as NOTHING (invisible) in JSX:
{null}
{undefined}
{false}
{true}
{""}      // empty string also renders nothing visible

// But these DO render visibly:
{0}       // renders "0" ← the classic gotcha
{NaN}     // renders "NaN"
{" "}     // renders a space

JSX compilation and the new JSX transform

// Classic transform (React <17) — required `import React` in every file:
import React from "react";
function App() { return <h1>Hi</h1>; }
// Compiles to:
// React.createElement("h1", null, "Hi")

// New JSX transform (React 17+, default in Vite/Next.js) — no import needed:
function App() { return <h1>Hi</h1>; }
// Compiles to:
// import { jsx as _jsx } from "react/jsx-runtime";
// _jsx("h1", { children: "Hi" })
// Slightly different internal call, but functionally equivalent — and you
// no longer need `import React from "react"` just to use JSX.

What React.createElement actually returns

// JSX produces plain JavaScript objects (React elements) — not real DOM nodes:
const element = <h1 className="title">Hello</h1>;
console.log(element);
// {
//   type: "h1",
//   key: null,
//   props: { className: "title", children: "Hello" },
//   $$typeof: Symbol(react.element)
// }

// This is why JSX is "just JavaScript" — <Component prop={value} /> is literally
// a function call producing a plain object describing what should be rendered.
// React reads this object tree and decides what to do with the real DOM.

Official Sources

The Codex links only to official documentation. No third-party tutorials.