Урок 01 · 10 хв

Компонент і JSX

UI — функція, яка повертає розмітку. Не рядок HTML, а дерево елементів.

У React шматок екрана — це функція. Вона отримує дані й повертає JSX: схоже на HTML, але це JavaScript. Компілятор (зазвичай через Vite) перетворює <h1>Привіт</h1> на виклик React.createElement. У рантаймі це об'єкти, а не файл-шаблон, як у старому PHP.

Мінімальний компонент

Можна спитати про це правило«Один корінь на return»

Ім'я компонента з великої літери: Hello, а не hello. Інакше React вирішить, що це HTML-тег.
Атрибут class у JSX — className. for у label — htmlFor.
Обробник — функція: onClick={() => save()}, а не рядок onclick="save()".

Можна спитати про цей пункт«Суть уроку»

Перевірка

Закріпи, поки не пішов далі

1. Чому не можна return <h1 /><p /> без обгортки?
2. Чому компонент називають Card, а не card?
3. Як вставити змінну title у розмітку?