Что такое React
React — библиотека JavaScript для построения интерфейсов. Страница собирается из компонентов — небольших независимых частей: кнопка, карточка, форма. Вы описываете, как интерфейс должен выглядеть при текущих данных, а React сам обновляет страницу, когда данные меняются. Курс написан для React 19.
Зачем он нужен
В уроках про DOM вы меняли страницу вручную: находили элемент через document.querySelector, меняли текст, добавляли и удаляли узлы. Пока на странице одна кнопка, это удобно. Когда элементов сотни и они зависят друг от друга, легко забыть обновить какой-то из них.
React меняет подход:
| Работа с DOM вручную | React |
|---|---|
| Вы говорите, что изменить на странице | Вы описываете, как страница должна выглядеть |
| Код разметки и код обновления разделены | Разметка и логика лежат в одном компоненте |
| Каждое изменение данных — свой код обновления | Изменили данные — React перерисовал нужное сам |
Как выглядит компонент
Компонент — обычная функция JavaScript, которая возвращает разметку:
// src/App.jsx
export default function App() {
return <h1>Мои задачи</h1>;
}Разметка внутри JavaScript называется JSX. React вызовет функцию App и покажет на странице заголовок «Мои задачи».
Декларативный подход
Главная идея: интерфейс — это функция от данных. Ниже компонент получает число задач и показывает подходящий текст:
// src/components/TodoCounter.jsx
export default function TodoCounter({ count }) {
return <p>Задач в списке: {count}</p>;
}Вы не пишете «найди абзац и замени в нём цифру». Когда count станет другим, React сам вызовет функцию снова и обновит только изменившийся текст.
Что понадобится
- Знание JavaScript: функции, стрелочные функции, деструктуризация, методы массивов
mapиfilter, модулиimportиexport,fetch. Всё это было в учебнике. - Node.js версии 20 или новее — он нужен для инструментов сборки.
- Редактор кода, например VS Code.
Что будет в курсе
Сначала вы соберёте список задач: компоненты, пропсы, состояние, формы. Затем — небольшой блог, который читает статьи из API, с несколькими страницами, загрузкой данных и обработкой ошибок. В конце — стили, тесты и публикация на хостинге.
Частая ошибка
React — библиотека для интерфейса, а не полноценный фреймворк. В нём нет встроенной маршрутизации, работы с базой данных или сервера. Для страниц используют React Router, для данных — обычный fetch или специальные библиотеки. Не ищите в самом React того, чего в нём нет: в курсе для каждой такой задачи будет отдельный урок.