Что такое React?

Добро пожаловать в React! React — это библиотека JavaScript для создания веб-приложений: страниц, которые реагируют на ваши действия. (Библиотека — это готовый код, который вы используете в своих программах.) На React сделаны Facebook и Instagram, а также многие другие знакомые вам приложения. В этом курсе вы шаг за шагом создадите приложение для музыкального фестиваля «Летние звуки».

В редакторе уже есть небольшое приложение на React. Нажмите «Запустить»: в предпросмотре появится программа фестиваля и кнопка ♥. Нажмите на кнопку несколько раз.

Вспомните, как вы меняли страницу на уроках JavaScript: находили элемент через querySelector(), меняли его textContent и создавали новые элементы через createElement(). Вы шаг за шагом говорили странице, что именно менять.

React работает наоборот. Вы описываете, что страница должна показывать для ваших данных, а страницу создаёт React. Когда данные меняются, React обновляет страницу сам. Посмотрите на App.jsx: группы лежат в массиве bands, и список на странице строится из него. Здесь нет ни querySelector(), ни textContent. Кнопка ♥ только увеличивает число likes, а новое число показывает React.

Страница состоит из компонентов — частей со своими именами, которые вы пишете сами: например, карточка группы, программа или форма покупки билета. Первый компонент вы напишете уже в этом уроке.

Не переживайте, если не каждая строка App.jsx пока понятна: map() с key, onClick и useState мы разберём в следующих уроках. К концу курса вы сами будете писать всё это и многое другое.