Зачем нужен React

Разбираемся, какую проблему решает React и почему «декларативность» — это не модное слово, а способ писать меньше багов.

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

Боль ручного DOM

Представьте счётчик: число на экране и кнопка «плюс». На чистом JavaScript вы пишете так:

let count = 0;
const valueEl = { textContent: "" };      // имитация <span>
function increment() {
  count = count + 1;
  valueEl.textContent = "Счёт: " + count; // вручную синхронизируем DOM
}
increment();
increment();
console.log(valueEl.textContent);

Вывод:

Счёт: 2

Проблема не в одной строке, а в том, что состояние (count) и отображение (textContent) живут отдельно, и связывать их приходится руками. Добавьте ещё пару полей — и таких ручных обновлений станут десятки. Где-то забыли обновить — на экране устаревшие данные. Это классический источник багов.

Декларативный подход

React переворачивает задачу. Вы не пишете «найди элемент и поменяй его текст». Вы описываете: «при таком состоянии экран выглядит вот так». А когда состояние меняется — React сам вычисляет, что именно поменялось в DOM, и обновляет только это.

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Счёт: {count}
    </button>
  );
}

Здесь нет ни querySelector, ни textContent. Есть только описание: «кнопка показывает count, по клику увеличивает его». React гарантирует, что число на экране всегда соответствует значению count. Это и есть декларативность: вы декларируете результат, а не пошаговый рецепт.

Три кита React

Идея	Что это даёт
Компоненты	UI собирается из независимых кирпичиков (кнопка, карточка, форма), которые можно переиспользовать и тестировать по отдельности
Декларативность	Вы описываете желаемый вид, синхронизацией с DOM занимается React
Реактивность	Меняется состояние — интерфейс перерисовывается автоматически

Императивно vs декларативно

Аналогия: императивный код — это маршрут «иди прямо, поверни налево, пройди 200 метров». Декларативный — адрес «улица Ленина, 5». В первом случае при любом изменении (перекрыли улицу) маршрут ломается, и его надо переписывать. Во втором — навигатор сам построит путь заново. React — это навигатор для вашего UI.

Что React не делает

React отвечает только за слой представления (View). Он не навязывает роутинг, работу с сервером или управление глобальным состоянием — для этого есть отдельные библиотеки. Это и плюс (гибкость), и минус (нужно собирать экосистему самому). В этом курсе мы разберём ядро, а в конце посмотрим, куда расти.

Итог

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