react · source-driven

Writing markup with JSX

JSX lets you write markup inside JavaScript. It looks like HTML, but it is not HTML — and it is stricter.

Official docs: react.dev/learn — Writing markup with JSX

You will learn

That JSX is markup-in-JS, compiled for React
That you must return a single parent (or a fragment)
That className replaces class

JSX is stricter than HTML

Per the React docs: JSX is optional but nearly universal. Tags must be closed. A component cannot return two adjacent roots — wrap them in a parent or <>...</>.

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

className, not class

In JSX, class is className because components are JavaScript, and class is a reserved word.

<img className="avatar" />

What JSX compiles to (intuition)

Your build turns JSX into function calls that create React elements. You almost never call createElement by hand — but knowing it is sugar stops the “this is HTML” misconception.

Try it

Name

Hello, Nest engineer

Recap

JSX embeds markup in JavaScript
Return one root (element or fragment)
Use className instead of class
Self-close tags that have no children

Challenge

Try this

Rewrite a tiny About block that returns an h1 and a p using a fragment. Confirm TypeScript errors if you remove the fragment.