What is JSX and how does it work?

Browsers do not understand JSX. A compiler such as Babel or the TypeScript JSX transform converts it into JavaScript before the browser runs it. Modern React uses the automatic JSX runtime, so you do not need to import React just to use JSX.

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

// Compiles to something like:
const element = jsx("h1", {
  className: "title",
  children: "Hello",
});

What you can embed

• JavaScript expressions inside curly braces, such as {user.name}
• Conditional expressions and array mappings
• Components as capitalized tags, such as <UserCard />
• Fragments to return multiple elements without an extra DOM node

function UserList({ users }) {
  return (
    <>
      {users.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}
    </>
  );
}

JSX is not HTML. Attributes use camelCase, class becomes className, and event handlers receive functions rather than strings. JSX also escapes interpolated text by default, which helps prevent injection.