React — 2learn

Что это такое

React — это библиотека JavaScript для построения пользовательских интерфейсов из небольших переиспользуемых компонентов. Вы описываете, как должен выглядеть экран при заданном состоянии, а React сам вычисляет минимальный набор изменений, чтобы браузер этому описанию соответствовал. Библиотека, а не фреймворк: маршрутизация, загрузка данных и стили остаются отдельными решениями, которые вы принимаете сами.

Почему это важно

Обновление DOM вручную — источник большинства ранних ошибок фронтенда: забудете снять обработчик или обновите лишь одно из трёх мест, где живёт одно и то же значение, — и экран постепенно перестанет соответствовать данным. React убирает этот класс ошибок, потому что отрисованный результат становится чистой функцией состояния: измените состояние, и интерфейс перестроится сам. Именно поэтому он доминирует на рынке труда — ментальная модель достаточно мала, чтобы выучить её за день, и достаточно сильна, чтобы выдержать большое приложение. Вдобавок это экосистема, под которую написано всё остальное — от библиотек компонентов до инструментов тестирования.

Что в этом треке

Рендеринг и JSX (02-frontend/29-react/01-rendering-and-jsx) — как компонент превращается в DOM и каким синтаксисом вы его описываете.
Компоненты и свойства (02-frontend/29-react/02-components-and-props) — как разделить экран на компоненты и передать данные вниз, не изменяя их.
Состояние и хуки (02-frontend/29-react/03-state-and-hooks) — как заставить компонент помнить значения между рендерами: здесь и помогает useState.
Эффекты и загрузка данных (02-frontend/29-react/04-effects-and-data-fetching) — как выполнять побочные эффекты после рендера и загружать данные без гонок.

Предварительные требования

JavaScript (02-frontend/06-javascript)
TypeScript (02-frontend/19-typescript)

Что читать дальше

Управление состоянием (02-frontend/23-state-management) — что выбрать, когда состояние приходится делить между экранами.
UI-компоненты (02-frontend/12-ui-components) — проектирование строительных блоков, из которых вы теперь будете собирать интерфейс.
Инструменты разработчика в браузере (02-frontend/27-browser-devtools) — как инспектировать живое дерево компонентов, пока оно меняется.