Что такое React и почему он так популярен

Коротко о React

React — это JavaScript-библиотека для построения пользовательских интерфейсов. Её создали в Meta (Facebook) и открыли в 2013 году. React отвечает только за слой отображения: как данные превращаются в то, что пользователь видит на экране.

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

Пять базовых понятий

Компоненты. Интерфейс собирается из независимых блоков: кнопка, карточка товара, форма. Компонент — обычная функция, которая возвращает разметку. Один раз написали — используете везде.

JSX. Синтаксис, похожий на HTML, внутри JavaScript. Он компилируется в вызовы функций, поэтому в фигурных скобках можно писать любые выражения: {user.name}, {items.length > 0 && <List />}.

Props. Входные параметры компонента, которые передаёт родитель. Компонент их не меняет — только читает. Так данные текут сверху вниз.

State. Внутреннее состояние компонента: значение поля, открыт ли список, счётчик. Когда state меняется, React заново вызывает компонент и обновляет экран.

Virtual DOM. Работа с реальным DOM относительно дорогая. React строит лёгкое описание интерфейса в памяти, сравнивает новую версию со старой (этот процесс называется reconciliation) и применяет к странице только реальные отличия.

Маленькое приложение

Список задач в одном компоненте:

import { useState } from "react";

function TodoApp() {
  const [items, setItems] = useState([]);
  const [text, setText] = useState("");

  function add() {
    if (!text.trim()) return;
    setItems([...items, text]);
    setText("");
  }

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={add}>Добавить</button>
      <ul>
        {items.map((item, i) => (
          <li key={i}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Что здесь происходит:

• useState — хук, который хранит состояние между отрисовками.
• Поле ввода контролируемое: его значение всегда берётся из state.
• setItems создаёт новый массив, а не мутирует старый — так React замечает изменение.
• key помогает React понять, какой элемент списка изменился. В реальных проектах лучше использовать стабильный id, а не индекс.

Почему React так популярен

• Компонентный подход хорошо масштабируется: большой интерфейс делится на понятные части.
• Огромная экосистема: роутинг, формы, управление состоянием, UI-библиотеки — почти для любой задачи есть готовое решение.
• Фреймворки поверх React, например Next.js, добавляют серверный рендеринг, маршрутизацию и оптимизации из коробки.
• React Native позволяет переиспользовать знания для мобильных приложений.
• Большое сообщество: много документации, ответов на вопросы и разработчиков на рынке.

Когда React подходит, а когда нет

Важно: «чистый» React без фреймворка рендерит контент в браузере. Для страниц, которым важно SEO, обычно используют фреймворк с серверным рендерингом.

Частые ошибки новичков

• Мутировать state напрямую (items.push(...)) вместо создания нового значения.
• Хранить в state то, что можно вычислить из других данных.
• Складывать весь интерфейс в один огромный компонент.
• Использовать индекс массива как key в списках, которые сортируются или фильтруются.
• Тянуть библиотеку управления состоянием в проект, где хватает встроенного useState и useContext.

Начать изучение удобнее всего с официальной документации.