Command Palette

Search for a command to run...

Hectal
Phase 1Beginner2 of 28 in React

JSX: Writing UI in JavaScript

JSX from the ground up: its rules, curly braces, what it can render, styles and classes, converting HTML, and the plain objects it turns into.

Every React component you will ever write returns JSX: the HTML-like code inside your JavaScript. This phase teaches it properly, so it never surprises you. You'll learn what JSX really is, the handful of rules that make it different from HTML, how to put any JavaScript value inside it with curly braces, and exactly what React does with strings, numbers, arrays, null, true and 0.

Then you'll style elements with style objects and class names, convert real HTML (forms, entities, comments, SVG icons) into JSX, and finally open the box: you'll see the jsx() calls the compiler writes, the plain objects they return, and why React marks those objects with a secret Symbol that JSON can't fake.

Every example runs real React 19 in your browser. Most of them print to the console, so you can check your predictions line by line.

0/7 · 0%
7 topics ~2 h 20 code blocks & diagrams
Start with the first topic
1
1.1

What JSX Is

JSX is a syntax extension for JavaScript that lets you write HTML-like tags inside your code; a compiler turns every tag into an ordinary function call that returns a plain object describing the UI.

20 min 1 diagram 3 code practice

2
1.2

The Rules of JSX

JSX looks like HTML but is stricter: a component returns one root element (or a Fragment), every tag must be closed, and attributes use JavaScript names such as className, htmlFor and camelCase like onClick and tabIndex.

20 min 2 code practice

3
1.3

JavaScript in JSX with Curly Braces

Curly braces { } open a window from JSX back into JavaScript: inside them you can put any expression (a variable, a calculation, a function call, a ternary, a template literal), as text or as an attribute value, but not a statement such as if or for.

21 min 3 code practice

4
1.4

What JSX Can Render

Inside JSX, strings and numbers become text, elements become DOM, arrays render each item, and null, undefined, true and false render nothing; but 0 renders as "0", and plain objects crash with "Objects are not valid as a React child".

20 min 3 code practice

5
1.5

Inline Styles and Class Names in JSX

In JSX the style attribute takes a JavaScript object with camelCase property names (numbers become pixels for most properties), and className takes a string you can build from conditions to switch CSS classes on and off.

19 min 2 code practice

6
1.6

Converting HTML to JSX

To turn HTML into JSX you rename attributes (class, for, camelCase, SVG names like stroke-width), close every tag, swap <!-- --> comments for {/* */}, and know how JSX treats entities, Unicode and whitespace; data-* and aria-* attributes stay as they are.

20 min 3 code practice

7
1.7

JSX Under the Hood

The compiler turns each JSX tag into a jsx() call (or createElement in the classic runtime) that returns a frozen plain object, a React element with type, props and key, marked with a $$typeof Symbol so that JSON data can never pass itself off as an element.

23 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Clean up pasted HTML

This contact form was pasted straight from an HTML page. It shows up, but React prints six warnings in the console.

Beginner
2

A profile card from data

The user object holds the data. Fill the card with curly braces so it shows the data, not fixed text:

Beginner
3

Fix the stray zero

This mail sidebar shows a red badge with the number of unread messages in each folder. But the Spam folder, which has 0 unread, shows a stray 0.

Beginner
4

Task pills with classes and a progress bar

Render each task in tasks as an <li> with the classes pill and the task's status (done, late or todo), for example class="pill late". Add the class starred too when starred is true.

Beginner
5

Build a menu without JSX

Prove you know what JSX compiles to: build this menu without writing a single tag, using createElement from react (or jsx/jsxs from react/jsx-runtime):

Intermediate
6

Mini build: a weekly forecast

Build the forecast from the week array. Use week.map(...) to create the rows (you'll study lists properly in Phase 3; here, each item needs a key).

Intermediate