Справочник

React: что это и как работает

19 сентября 2026 · 12 минут чтения

Проверка фактов

Юлия Найпак

Методист по автоматизации. Сверяет паспорт инструмента с документацией вендора.

Автор Р

Редакция

Коллектив авторов, редакторов и иллюстраторов статей на сайте блога онлайн-университета «Зерокодер». Пишем…

Черновик готовит редакция с помощью ИИ. За стандарт издания отвечает главный редактор — Валерий Курземнек.

Материал редакции Зерокодера. Счёт по выдаче снят собственным прогоном 19 сентября 2026 года; цитаты источников приведены дословно. Обновлено: сентябрь 2026.

React — это JavaScript-библиотека для создания пользовательских интерфейсов. Она позволяет описывать интерфейс как набор компонентов — независимых блоков, которые собираются в целое приложение. Библиотеку в 2013 году разработали в Facebook (по данным блога Яндекс Практикума). Ниже — что это простыми словами, как устроен React, чем он отличается от React JS и с чего начать изучение. Мы скачали топ-10 Яндекса по запросу «react что это»: текст отдали 8 из 10.

Что такое React простыми словами

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

Простыми словами: вы описываете, как интерфейс должен выглядеть при текущих данных, а React сам решает, что и когда перерисовать на странице. Такой подход в руководстве на GitHub называют декларативным — в противоположность императивному, где разработчик вручную даёт браузеру команды «найди элемент», «поменяй текст», «перекрась фон».

Пример из блога Яндекс Практикума показывает цену ручного подхода: без библиотеки при удалении пользователя из списка нужно отдельно указать, что убрать текст рядом с его именем, кнопку рядом с аватаркой, аватарку и данные ещё в 20 местах, где есть информация об удалённом пользователе. React убирает эту рутину: вы меняете данные, а интерфейс подстраивается сам.

React и React JS — это одно и то же

Да, это одно и то же. «React JS» — разговорное уточнение, которое подчёркивает, что речь о JavaScript-библиотеке. В официальной документации проект называется просто React.

Встречаются и другие написания: React.js, ReactJS, reactjs. Все они указывают на одну библиотеку. Отдельно стоит имя React Native — это технология для мобильных приложений на той же идее компонентов, но другой продукт.

В требованиях вакансий на одном из сайтов поиска работы в марте 2023 года, по данным Skillbox Media, React упоминался 3300 раз, Vue.js — 1782 раза, а Angular — 1282 раза. То есть в объявлениях пишут по-разному, но имеют в виду одну и ту же библиотеку.

Место React во фронтенд-разработке

Фронтенд — часть приложения, которая работает в браузере пользователя. React занимает в нём место инструмента для построения интерфейса. Рядом живут другие библиотеки и фреймворки: Angular, Vue, Svelte. Выбор между ними — вопрос вкуса команды и требований проекта.

По данным Skillbox Media, React.js был вторым по популярности веб-фреймворком в 2022 году, уступая лишь Node.js. Это не значит, что он подходит всем: у каждой технологии своя ниша.

React не заменяет HTML, CSS и JavaScript. Он надстраивается над ними. Разметку вы по-прежнему пишете, стили подключаете, логику описываете на JavaScript. Библиотека меняет способ сборки интерфейса, но не отменяет основ.

Компоненты — строительные блоки интерфейса

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

Отдельная глава руководства на GitHub так и называется — «Анатомия компонента» — и разбирает его устройство. Простой компонент выглядит как функция с возвратом разметки. Компонент с состоянием хранит данные внутри себя и перерисовывается при их изменении.

Ключевое свойство — переиспользование. В блоге Яндекс Образования приведён пример: достаточно написать ещё один тег <App />, и на странице появятся уже два независимых друг от друга счётчика. Один и тот же код работает в разных местах без копирования.

Виртуальный DOM: почему обновления быстрые

Браузер строит DOM — дерево элементов страницы. Прямые изменения в нём дороги: каждое обращение к реальному DOM требует пересчёта. React держит в памяти облегчённую копию дерева — виртуальный DOM.

Алгоритм работы такой:

1. При изменении данных React строит новое виртуальное дерево.
2. Сравнивает его с предыдущим.
3. Находит различия.
4. Применяет к реальному DOM только эти различия.

В руководстве на GitHub механизм виртуального DOM описан как то, что работает под капотом библиотеки. Выгода в том, что вместо перерисовки всей страницы обновляются только изменившиеся узлы. На больших интерфейсах это заметно экономит ресурсы браузера.

Односторонний поток данных и состояние

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

Состояние (state) — данные, которые компонент хранит и меняет сам. В функциональных компонентах для этого используют хук useState. В примере из Skillbox Media он выглядит так: const [squares, setSquares] = useState(Array(9).fill(null)) — массив из девяти клеток для игры в крестики-нолики.

Односторонний поток делает поведение предсказуемым: всегда понятно, откуда пришли данные и кто их меняет. Это одна из причин, по которой React выбирают для крупных приложений с множеством связанных элементов.

JSX: разметка внутри JavaScript

JSX — синтаксис, который позволяет писать разметку прямо в коде JavaScript. В документации React сказано: «This markup syntax is called JSX». Выглядит он как HTML, но им не является.

В Skillbox Media это описывают прямо: «Код JSX довольно наглядный, и, кстати, то, что похоже на HTML, — вовсе не HTML» — то, что выглядит HTML-тегом <h1>, на деле элемент JSX. Звучит непривычно, но это просто синтаксис.

Зачем он нужен: без JSX тот же результат пришлось бы описывать вызовами createElement("h1", null, "Здравствуй, ", formatName(user), "!") — так это выглядит в примере из Skillbox Media. С JSX то же самое пишется как <h1>Здравствуй, {formatName(user)}!</h1>. В фигурных скобках работает обычный JavaScript.

Примеры сайтов и приложений на React

React используют в проектах разного масштаба. В документации React указано: «Over 100,000 React components at Meta help validate every migration strategy» — более 100 000 компонентов React в Meta помогают проверять каждую стратегию миграции.

В блоге Яндекс Практикума библиотеку связывают с Facebook, где её и разработали в 2013 году. Среди примеров в обзорах на эту тему называют интерфейсы социальных сетей, панели администраторов, интернет-магазины, сервисы с лентой и поиском.

Отдельно стоит React Native — технология для мобильных приложений. В документации React ей посвящён раздел с заголовком «Go truly native»: люди ожидают, что нативные приложения выглядят и ощущаются как их платформа.

Плюсы React

Переиспользование — самый ощутимый плюс на практике. В блоге Яндекс Образования показано, как один компонент счётчика превращается в два независимых на странице одной строкой.

Экосистема закрывает почти любую задачу: маршрутизация, формы, работа с сервером, тестирование. В блоге Яндекс Практикума перечисляют, что в профессии React-разработчика изучают экосистему React, хуки, State Management, TypeScript, Jest и Cypress.

Минусы и ограничения React

Про размер прямо сказано в блоге Яндекс Образования: «React увеличивает размер приложения, которое нужно загрузить пользователям (~40 kB для пакетов React и React-dom)». Для лёгких страниц это заметная добавка.

Второе ограничение — база. В блоге Яндекс Практикума советуют сначала освоить основы JavaScript: переменные, функции, объекты, массивы, работу с событиями и современный синтаксис ES6+. Без этого React превращается в набор заученных приёмов.

Третье — React не диктует структуру проекта. Это одновременно свобода и нагрузка: команда сама решает, как организовать код, и ошибки в архитектуре ложатся на неё.

С чего начать изучение React

Порядок такой:

1. Освоить JavaScript: переменные, функции, массивы, объекты, события, синтаксис ES6+.
2. Разобраться с инструментами: Node.js и пакетными менеджерами.
3. Пройти вводный курс по React и собрать первое приложение.
4. Изучить хуки, состояние, маршрутизацию.
5. Добавить TypeScript и тестирование.

В руководстве на GitHub отдельная глава посвящена подготовке и Modern JavaScript, а также инструментарию: Node.js и пакетным менеджерам. Там же отмечено, что при создании проекта вас спросят про язык и стоит выбрать JavaScript — «пока без TypeScript, перейдем к нему в Главе 13, чтобы не усложнять старт».

Практика важнее теории. В Skillbox Media описан запуск проекта командами cd и npm start, после чего открывается локальный сервер разработки http://localhost:3000/. Первое приложение удобно собрать именно так — на своём компьютере, с живым результатом в браузере.

Инструменты вокруг React: сборщики и пакетные менеджеры

Отдельная тема, с которой сталкивается каждый, кто начинает работать с React, — инструментарий. В руководстве на GitHub этому посвящена глава о подготовке: Node.js и пакетные менеджеры, а также сборщики. Там же отмечено, что в качестве сборщика рассматривают Vite.

Пакетные менеджеры решают задачу хранения зависимостей. В руководстве на GitHub разбирают разницу между npm и pnpm. У npm зависимости скачиваются в каждую папку проекта. У pnpm другой подход: если у вас 10 проектов на React, pnpm сохранит React на диске один раз, а в проекты положит ссылки. Это экономит гигабайты места — в отличие от npm, который скачает React 10 раз. В том же руководстве pnpm назван рекомендуемым выбором в 2025 году.

Система модулей ES6 позволяет связывать части приложения между собой — об этом сказано в руководстве на GitHub. Практический вывод для новичка: не нужно разбираться во всех инструментах сразу. Достаточно поставить Node.js, выбрать пакетный менеджер и запустить первое приложение. Остальное подтянется по мере усложнения проектов.

Производительность и типичные ошибки новичка

React берёт на себя обновление интерфейса, но не отменяет ответственности за код. В руководстве на GitHub есть прямое предупреждение: никогда не выполняйте тяжёлые синхронные операции (например, сложные математические циклы на 10^9 итераций) прямо в теле компонента или useEffect. Такие операции блокируют отрисовку и делают интерфейс неотзывчивым.

Второй момент — работа с данными. В руководстве на GitHub разбирают концепцию неизменяемости и ссылочные типы данных: при обновлении состояния важно создавать новые объекты и массивы. Пример из того же руководства: если нужно изменить имя пользователя с id: 2, это делается через создание обновлённой копии.

Третий момент — размер бандла. В блоге Яндекс Образования указано, что React увеличивает размер приложения, которое нужно загрузить пользователям (~40 kB для пакетов React и React-dom). Для тяжёлых интерфейсов это оправданная плата, для лёгких страниц — повод подумать, нужна ли библиотека вообще.

React и JavaScript: чем отличаются

JavaScript — язык программирования, на котором работает React. Библиотека не заменяет язык и не расширяет его синтаксис: она использует обычные функции, объекты, массивы и события. В блоге Яндекс Практикума прямо сказано, что перед изучением React стоит освоить основы JavaScript: переменные, функции, объекты, массивы, работу с событиями и современный синтаксис ES6+.

Разница в уровне. JavaScript отвечает за логику и поведение страницы в целом. React отвечает за один слой — построение интерфейса из компонентов. Всё, что делает React, можно написать на чистом JavaScript: в блоге Яндекс Образования приведён пример приложения-счётчика, где логика умещается в несколько строк с прямым обращением к элементам страницы через document. React предлагает другой способ: описать компонент один раз и переиспользовать его.

Отсюда практический вывод. Учить React в отрыве от JavaScript бессмысленно: без понимания языка останутся только заученные шаблоны. В руководстве на GitHub первая глава посвящена именно подготовке и Modern JavaScript — синтаксису, асинхронности, неизменяемости и ссылочным типам данных. Только после этого начинается введение в React.

Частые вопросы

React что это простыми словами?

React — библиотека на JavaScript, которая собирает интерфейс из отдельных блоков-компонентов. Вы описываете, как должен выглядеть экран при текущих данных, а библиотека сама обновляет страницу при их изменении. Рутину с ручным поиском элементов в браузере она берёт на себя.

React frontend что это?

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

React JS что это — то же самое, что React?

Да, это одна и та же библиотека. «React JS» — уточнение, подчёркивающее, что речь о JavaScript-инструменте. В официальной документации проект называется просто React, а в вакансиях встречаются написания React.js, ReactJS и reactjs.

React что это в программировании?

Это библиотека для описания пользовательского интерфейса через компоненты. В программировании она относится к фронтенд-инструментам: работает в браузере, надстраивается над JavaScript, HTML и CSS. По данным Skillbox Media, React.js был вторым по популярности веб-фреймворком в 2022 году, уступая лишь Node.js.

React что это такое и с чего начать?

Начать стоит с JavaScript: переменные, функции, массивы, объекты, события, синтаксис ES6+. Затем разобраться с Node.js и пакетными менеджерами, пройти вводный курс и собрать первое приложение. В блоге Яндекс Практикума этот порядок называют обязательным перед изучением самой библиотеки.

Что в итоге

React — JavaScript-библиотека для создания пользовательских интерфейсов. Она строится на компонентах, использует виртуальный DOM для быстрых обновлений и односторонний поток данных для предсказуемости. Синтаксис JSX позволяет писать разметку внутри JavaScript.

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

Для старта достаточно JavaScript, Node.js и первого собранного приложения. Дальше — хуки, состояние, маршрутизация, TypeScript и тестирование. Если разбираетесь с инструментами вокруг разработки, посмотрите материал про ИИ-агентов и интеграцию Claude Code в Figma.