React
React (или React.js) — это популярная JavaScript-библиотека с открытым исходным кодом, предназначенная для создания пользовательских интерфейсов. Её разработал Meta (Facebook) в 2013 году для создания динамичных и быстрых веб-сайтов.
Главные особенности:
- Компонентный подход. Весь интерфейс делится на независимые кусочки (компоненты): кнопки, формы, списки. Их можно использовать повторно на разных страницах.
- Декларативность. Разработчик просто описывает, как интерфейс должен выглядеть в разных состояниях. React сам обновляет нужные элементы при изменении данных.
- Virtual DOM. React создает виртуальную копию веб-страницы в памяти. При изменениях он сравнивает её с реальной страницей и обновляет только те кусочки, которые изменились. Это ускоряет работу сайта.
- JSX-синтаксис. Расширение языка JavaScript, которое позволяет писать HTML-код прямо внутри скриптов.
Обычный JavaScript требует вручную искать элементы на странице и менять их при каждом действии пользователя. На React создавать интерактивные приложения (например, социальные сети, чаты, личные кабинеты) получается в разы быстрее и проще. На базе React также создана технология React Native, которая позволяет писать мобильные приложения для iOS и Android.
React отвечает за экран в браузере: вы собираете UI из компонентов и описываете, как он меняется при обновлении данных. API, маршруты и SSR подключаются отдельно — Express, React Router или Next.js.
Материалы
| Шаг | Статья |
|---|---|
| 1 | Первая программа — Vite, useState, fetch |
| 2 | Обзор React — идея, Virtual DOM, маршрут |
| 3 | Компоненты и JSX |
| 4 | Хуки и формы |
| 5 | Router, данные, оптимизация |
| — | Кнопка с загрузкой — Promise и isLoading |
| — | Справочник |
| — | Галерея компонентов (Lab) |
Порядок
- Первая программа на React → React — компоненты, JSX и поток данных → React — хуки, состояние и формы → React — Router, данные с API и оптимизация
- API с Node — Fullstack
- SSR — Next.js
Сравнение фреймворков — SPA и выбор frontend-фреймворка.