Stop 08 · ReactTopics · 1/20

JSX

In short

React components return JSX. It looks like HTML, so it feels easy, but it plays by JavaScript's rules. Learn those few rules and half your beginner bugs disappear.

A syntax extension that lets you write HTML-like markup directly inside JavaScript, which React compiles into `React.createElement` calls under the hood.

The jaadu mascot types on a phone while a scribbled speech bubble turns into neat building blocks.

Think of it like this

Like Hinglish on WhatsApp

You type 'kal milte hain' in English letters, but it's Hindi underneath. JSX pulls the same trick: it looks like HTML, but a compiler turns every tag into a plain JavaScript function call before the browser ever sees it.

Watch it happen

From JSX to the screen

You write

Compiler

jsx() calls

Elements

Screen

1/5You write <h3 className="title">{name}</h3>. It looks like HTML, but it sits inside a .tsx file.

The big ideas

What you need to know

Curly braces run JavaScript

Put any expression inside { }, like {user.name} or {price * 2}. Statements like if or for don't fit inside.

className, not class

JSX attributes use JavaScript names. class becomes className, for becomes htmlFor, and onclick becomes onClick.

One parent per return

A component returns one root element. Wrap siblings in a div or an empty fragment, <>...</>.

Lists use map with a key

Turn arrays into elements with .map(), and give each one a unique key so React can track it.

See it in code

Walk through the code

tsx

1function CourseCard({ name, seats }: { name: string; seats: number }) {2  const full = seats === 0;3 4  return (5    <>6      <h3 className="title">{name}</h3>7      {full ? <p>Seats full</p> : <p>{seats} seats left</p>}8      {seats < 5 && !full && <span>Hurry!</span>}9    </>10  );11}

1/4full is a normal JavaScript variable, worked out before any JSX.

A ternary picks between two things, and && shows something only when the condition is true. Both are expressions, so they work inside curly braces.

Save yourself the pain

Common mistakes

Oops

Writing {count && <Badge />} when count can be 0.

Do this instead

React prints the 0 on screen. Write {count > 0 && <Badge />} so the condition is a real true or false.

Oops

Using the array index as the key in a list that can be reordered or filtered.

Do this instead

Use a stable ID from your data, like item.id. Index keys can mix up input values when items move.

Your mission

Turn plain HTML into JSX

~15 min

Quick check

What appears on screen for {0 && <p>New</p>}?

Go deeper

1Write a few JSX expressions and inspect what they compile to (Babel REPL).
2Learn JSX's rules: one root element, `className` not `class`, `{}` for JS expressions.
3Practice conditional rendering with `&&` and ternaries inside JSX.