Lesson 01 · 10 min

Component and JSX

UI is a function that returns markup. Not an HTML string, but a tree of elements.

10 minLesson 1 of 8Practice includedAsk AI on any point

In React a piece of the screen is a function. It receives data and returns JSX: it looks like HTML, but it's JavaScript. The compiler (usually via Vite) turns <h1>Hello</h1> into a React.createElement call. At runtime these are objects, not a template file like in old PHP.

A minimal component

You can ask about this rule«One root per return»

A component name starts with a capital letter: Hello, not hello. Otherwise React decides it's an HTML tag.
The class attribute in JSX is className. for on a label is htmlFor.
A handler is a function: onClick={() => save()}, not the string onclick="save()".

You can ask about this point«Lesson summary»

Check

Lock it in before you move on

1. Why can't you return <h1 /><p /> without a wrapper?
2. Why is a component called Card and not card?
3. How do you insert the variable title into the markup?

PracticeSolve the lesson tasksA few short tasks in the editor. Check your code right away and see where it goes wrong.Start practice