Обсудить задачу
Термин · R

React

JavaScript-библиотека для создания интерфейсов из компонентов: страница собирается из независимых блоков, которые сами обновляются при изменении данных.

React — библиотека для создания пользовательских интерфейсов, которую в 2013 году открыла компания Facebook (сейчас Meta). Интерфейс в React собирается из компонентов — независимых блоков вроде кнопки, карточки товара или формы заказа. Компонент сам описывает, как он выглядит при текущих данных, а когда данные меняются, React обновляет на странице только то, что действительно изменилось.

Пример компонента

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Нажато: {count}
    </button>
  );
}

Разметка внутри JavaScript — это JSX, синтаксис React. Компонент хранит число нажатий в состоянии (useState); при нажатии состояние меняется, и React сам перерисовывает кнопку. Разработчик не пишет код «найти кнопку и поменять текст» — он описывает результат.

Основные идеи

  • Компоненты. Интерфейс — дерево компонентов, и каждый можно переиспользовать и тестировать отдельно.
  • Декларативность. Описывается, каким должен быть интерфейс при данных, а не последовательность изменений. Это идея из функционального программирования: интерфейс как функция от состояния.
  • Однонаправленный поток данных. Данные передаются от родительских компонентов к дочерним, поэтому проще понять, откуда что взялось.
  • Сравнение изменений. React вычисляет разницу между старым и новым видом и вносит в DOM только необходимые правки — это быстрее, чем перерисовывать страницу целиком.
  • Хуки. Функции вроде useState и useEffect дают компонентам состояние и связь с внешним миром.

Где применяется

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

Что важно учитывать

React — библиотека, а не готовый фреймворк: маршрутизацию, работу с данными и сборку выбирают отдельно, и это решения, которые стоит принять в начале проекта. Если всю страницу отрисовывать в браузере, поисковики и пользователи на слабых телефонах увидят ее позже — для публичных сайтов поэтому используют серверную отрисовку. Для личных кабинетов и внутренних систем, где важны сложные формы и быстрая реакция, React подходит особенно хорошо — такие интерфейсы входят в разработку личных кабинетов и цифровых услуг.