JSX Basics

JSX looks like HTML inside JavaScript. The build step (Vite, Babel) turns it into plain function calls before the browser ever sees it.

What JSX Looks Like

const heading = <h1>Hello, React</h1>;

That’s a real JavaScript value — you can assign it, return it, pass it to functions.

function App() {
  return <h1>Hello, React</h1>;
}

It’s Just React.createElement Under the Hood

JSX is sugar. The build step rewrites it:

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

// What runs in the browser (roughly)
React.createElement("h1", { className: "title" }, "Hello")

You’ll almost never call createElement yourself, but knowing JSX compiles to a function call explains the other rules — like why you have to wrap conditionals in {} and why JSX returns a value.

Embedding JavaScript With { }

Use curly braces anywhere you’d want a JavaScript value:

const name = "Ada";

function Hi() {
  return <h1>Hello, {name}</h1>;
}

What goes inside { ... } can be any expression — variables, function calls, math, ternaries:

const x = 7;

function Stats() {
  return (
    <p>
      Doubled: {x * 2}, parity: {x % 2 === 0 ? "even" : "odd"}
    </p>
  );
}

What goes inside { ... } cannot be a statement — no if, no for. (You’ll learn the patterns for conditionals and lists soon.)

Attributes Take Expressions Too

const url = "/about";
const big = true;

<a href={url} className={big ? "big" : "small"}>About</a>

When the value is a string, you can use quotes. When it’s any other expression, use { ... }.

Returning a Single Element

A JSX expression is one element. To return multiple top-level elements, wrap them in a Fragment (you’ll see this soon) or a parent tag.

// ✓ One root
function Ok() {
  return (
    <div>
      <h1>Title</h1>
      <p>Body</p>
    </div>
  );
}

Up Next

A handful of JSX rules trip everyone up the first time — closing tags, className vs class, and so on.