JSX syntax

JSX lets you write what the UI should look like as HTML-like markup inside JavaScript. Braces drop back into JavaScript for values, and each element compiles to a function call.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain what JSX compiles to and why it is JavaScript, not HTML
Write JSX that uses braces for values and attributes
Spot the class and sibling-element mistakes and fix them

In practice

A few lines that show JSX syntax doing its job.

TSX

const user = { name: "Ada", unread: 3 };

const banner = (
  <section className="banner">
    <h2>Hello, {user.name}</h2>
    <p>{user.unread > 0 ? user.unread + " unread" : "All caught up"}</p>
  </section>
);

The common mistake

Watch for

Writing class instead of className, or returning two sibling elements without wrapping them. JSX is JavaScript, so reserved words and single-expression rules apply; wrap siblings in a fragment <>...</>.

How it stays learned

Once a session shows you understand JSX syntax, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Where it leads

Topics that build on JSX syntax.

Function components

Next in the moduleFunction components →