Chapter 1 of 4

What JSX Is

The syntax extension that lets you write markup inside JavaScript, and what it compiles to.

JSX is a syntax extension for JavaScript. It lets you write something that looks like HTML directly inside your JavaScript files, and your build tool compiles it into ordinary function calls.

JSX is sugar over createElement calls.

// What you write
const element = <h1 className="title">Hello</h1>;

// What the compiler produces
const element = React.createElement("h1", { className: "title" }, "Hello");

Because it compiles to a function call, JSX is an expression. You can store it in a variable, return it from a function, pass it as an argument, or put it in an array.

JSX goes anywhere a value goes.

const heading = <h1>Dashboard</h1>;

function getGreeting(isLoggedIn) {
  return isLoggedIn ? <p>Welcome back</p> : <p>Please sign in</p>;
}

const items = [<li key="a">A</li>, <li key="b">B</li>];

JSX is optional but universal

You can write React without JSX by calling createElement yourself. Almost nobody does, because nested calls become unreadable quickly.

// Without JSX
React.createElement(
  "ul",
  null,
  React.createElement("li", null, "One"),
  React.createElement("li", null, "Two")
);

// With JSX
<ul>
  <li>One</li>
  <li>Two</li>
</ul>