Итоги

В этом уроке вы узнали, что:

• React создаёт страницу из ваших данных. Вы описываете, что страница должна показывать, а когда данные меняются, React обновляет страницу сам — без querySelector() и textContent.
• В React-приложении есть index.html с пустым <div id="root">, main.jsx, который показывает в нём <App /> и одинаков во всех упражнениях, и App.jsx, где вы работаете.
• Компонент — это функция, имя которой начинается с заглавной буквы и которая возвращает JSX — теги, записанные прямо в коде. export default function App() позволяет main.jsx импортировать App.
• JSX из нескольких строк помещают в круглые скобки после return и оборачивают в один элемент, например main.
• Компонент используют как тег, <Welcome />, столько раз, сколько нужно. Имя со строчной буквы, например <welcome />, — это HTML-тег, а не ваш компонент.
• Ошибка в записи кода показывается красным под предпросмотром с файлом, строкой и столбцом, и приложение не запускается. Ошибки во время работы приложения и предупреждения React видны в консоли.

В следующем уроке, «JSX», вы подробнее познакомитесь с тегами в своих компонентах: чем они отличаются от HTML и как подставлять в них значения из кода.

Но сначала небольшая практика: страница для билетов фестиваля. В App.jsx пока только заголовок, а два компонента для неё вы напишете сами.