Что такое React: декларативный UI и компоненты

React — библиотека для построения интерфейсов из компонентов. Вы описываете, как должен выглядеть UI при текущих данных, а React обновляет DOM эффективно. Это другой стиль мышления, чем «нашёл элемент и поменял textContent».

Декларативность

Вместо цепочки императивных шагов вы возвращаете разметку из функции компонента. При смене state React пересчитывает дерево и применяет минимальные правки.

Что нужно до старта

Уверенный JavaScript: функции, массивы, промисы, модули. Без этого хуки и JSX будут казаться магией.

Дальше

Разбираем синтаксис: JSX и компоненты.

JavaScript

function Hello({ name }) {
  return <h1>Привет, {name}</h1>;
}

// В учебных примерах ниже считаем, что JSX транспилируется (Vite/Babel).

Практическое задание

Задание: своими словами опишите разницу.

  • Чем декларативный UI отличается от ручных правок DOM
  • Почему React обновляет экран после смены данных
  • Какие темы JS вы освежите перед следующим уроком