Guided Notes

JSX Basics

Writing markup in JavaScript: expressions, attributes, fragments, and conditions.

What JSX is

Slide 1 / 5

JSX lets you write HTML-like markup inside JavaScript:

const heading = <h1 className="title">Hello</h1>;

Browsers can't run JSX directly. A compiler (Babel, or the one built into Vite) turns each tag into a function call:

React.createElement("h1", { className: "title" }, "Hello")

That call returns a plain object describing the element. JSX is optional, but almost every React project uses it because it's far easier to read.