React - библиотека для пользовательских интерфейсов

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

---

React

React — библиотека для UI в браузере: вы описываете экран компонентами, при смене состояния интерфейс пересчитывается без полной перезагрузки страницы.

См. также: Первая программа · Lab — компоненты · Next.js

function Button() {
  const [like, setLike] = useState(0);
  return (
    <button onClick={() => setLike(like + 1)}>
      👍 {like}
    </button>
  );
}

Порядок обучения: компоненты → useState → useEffect + fetch → Router.

---

Маршрут по разделу React

№	Тема	Статья
1	Практика Vite, API	Первая программа на React
2	Обзор (вы здесь)	React - библиотека для пользовательских интерфейсов
3	Компоненты, JSX, props	React — компоненты, JSX и поток данных
4	Хуки, формы	React — хуки, состояние и формы
5	Router, fetch, оптимизация	React — Router, данные с API и оптимизация
—	Справочник API	Справочник по React

Сравнение с Vue/Angular — SPA и выбор frontend-фреймворка.

---

Что даёт React

Задача	Подход
Сложные формы	state + контролируемые поля
Списки и таблицы	рендер по данным + key
API	useEffect + fetch / React Query
Масштаб команды	компоненты и единый поток данных

React — view-библиотека, не полный фреймворк — маршруты (React Router), глобальный state (Zustand/Redux), SSR (Next.js) подключаются отдельно.

---

Virtual DOM и декларативность

Вы задаёте UI = f(state). React строит описание дерева, сравнивает с предыдущим (reconciliation) и обновляет DOM минимально.

Node.js нужен для сборки (Vite, Babel), не для работы UI в браузере.

---

Композиция страницы

Play ITЗагрузка интерактивного демо…

Пример сборки лендинга из секций — каждый блок в отдельном файле, App только компонует порядок (см. React — компоненты, JSX и поток данных).

---

История

Публичный релиз — 2013 год (Meta). За десятилетие прошли путь от JSX и классовых компонентов к Hooks (16.8), Concurrent Features и Server Components. Хронология и детали API — в справочнике.

---

Сравнение с Vue и Angular

	React	Vue	Angular
Тип	библиотека UI	фреймворк	платформа
Шаблон	JSX	SFC + template	TypeScript + template
Вход	средний	мягче	выше

Vue · Angular

---

Связка по энциклопедии

Шаг	Материал
Первое приложение	Первая программа на React
Node API	Первая программа на Node.js
Fullstack	Fullstack на JavaScript — API и фронтенд
TypeScript	TypeScript
Тесты	Тестирование JavaScript — Vitest и Testing Library
Галерея UI	React — компоненты-рецепты

---

Рекомендуемый порядок изучения

1. Первая программа на React — счётчик и заметки с API
2. React — компоненты, JSX и поток данных — JSX и props
3. React — хуки, состояние и формы — хуки и формы
4. React — Router, данные с API и оптимизация — Router и production-темы
5. Справочник по React — шпаргалка по мере необходимости