React

React (также React.js или ReactJS) — это открытая JavaScript-библиотека для создания пользовательских интерфейсов, разрабатываемая компанией Meta (организация признана экстремистской и запрещена в РФ). React позволяет декларативно описывать состояния интерфейса на разных этапах работы приложения и эффективно обновлять отображение при изменении данных. Библиотека поддерживается сообществом разработчиков и используется для построения одностраничных приложений (SPA), мобильных приложений (React Native) и серверного рендеринга.

История

Создание и выход первой версии

React был создан инженером Facebook (организация признана экстремистской и запрещена в РФ) Джорданом Уоком (Jordan Walke) в 2011 году. Уок работал над улучшением новостной ленты социальной сети, где требовалось оперативно обновлять большое количество элементов интерфейса без полной перезагрузки страницы. Изначально фреймворк получил название FaxJS. В 2012 году инструмент был портирован на Instagram (организация признана экстремистской и запрещена в РФ), а в мае 2013 года состоялся публичный релиз React на конференции JSConf US.

Эволюция библиотеки

В 2015 году появилась версия React 0.14, в которой была анонсирована поддержка серверного рендеринга через ReactDOMServer. Релиз React 16 (2017 год) привнёс фундаментальное изменение архитектуры — Fiber, что позволило дробно обновлять интерфейс и поддерживать асинхронный рендеринг. Начиная с React 16.8 (2019 год) библиотека перешла на хуки (hooks) как основной способ работы с состоянием и побочными эффектами. В 2022 году вышла версия React 18 с автоматическим батчингом состояния, поддержкой Suspense для серверного рендеринга и новым API хуков.

В 2020 году компания Meta (признана экстремистской и запрещена в РФ) перевела разработку React под управление независимого фонда React Foundation, однако в 2022 году поддержка была возвращена обратно в Meta (организация признана экстремистской, деятельность запрещена в РФ).

Ключевые концепции

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

React использует декларативный синтаксис: разработчик описывает, как интерфейс должен выглядеть при данном состоянии данных, а библиотека самостоятельно вычисляет и применяет необходимые изменения DOM. Это достигается с помощью виртуального DOM (Virtual DOM) — легковесной объектной модели, с которой React сравнивает текущее состояние и последующее обновление.

Компонентная архитектура

Интерфейс в React строится из компонентов — изолированных переиспользуемых блоков (классов или функций). Компонент может иметь собственное состояние (state) и получать данные через свойства (props). Каждый компонент должен возвращать один корневой элемент (или фрагмент). Такая архитектура упрощает разработку крупных приложений за счёт инкапсуляции и композиции.

JSX

Для описания интерфейса используется JSX — расширение JavaScript, позволяющее писать разметку, похожую на HTML, внутри JavaScript-кода. JSX обрабатывается компилятором (например, Babel) и преобразуется в вызовы React.createElement(). Пример:

``jsx const element = <h1>Привет, мир!</h1>; ReactDOM.render(element, document.getElementById('root')); ``

Состояние и пропсы

Props — атрибуты, передаваемые в компонент извне; доступны только для чтения.
State — локальные данные компонента, которые при изменении вызывают повторный рендер.

Работа с состоянием до 2019 года велась через классовые компоненты с методами setState. Современный React использует хуки useState и useReducer.

Хуки (Hooks)

Хуки позволяют использовать state и другие возможности React без написания классов. Основные встроенные хуки:

useState — управление локальным состоянием.
useEffect — выполнение побочных эффектов (запросы к API, подписки, таймеры).
useContext — доступ к контексту приложения.
useRef — создание изменяемой ссылки на DOM-элемент.

С появлением хуков классовые компоненты стали считаться устаревшими, хотя официально продолжают поддерживаться.

Экосистема

Управление состоянием

Для крупных приложений требуются стейт-менеджеры, которые выходят за рамки возможностей встроенного useState. К популярным библиотекам относятся:

Redux — контейнер предсказуемого состояния, основанный на чистой функции редьюсера.
MobX — библиотека реактивного программирования с использованием наблюдаемых объектов.
Zustand — лёгкий глобальный стейт-менеджер с минимальным API.
Recoil — экспериментальный менеджер состояний от Meta (признана экстремистской и запрещена в РФ) с деривацией данных.

Маршрутизация

Встроенная маршрутизация в React отсутствует, что привело к созданию таких библиотек, как React Router (наиболее популярная), Reach Router и TanStack Router. React Router позволяет определять клиентские маршруты с динамическим рендерингом компонентов.

Серверный рендеринг

React поддерживает рендеринг на стороне сервера (SSR) с помощью ReactDOMServer.renderToString() или через интеграцию с фреймворками. Современным стандартом SSR для React является Next.js — полноценный фреймворк, который добавляет генерацию статического контента (SSG), API-маршруты и файловую систему маршрутов.

React Native

React Native — это фреймворк, позволяющий создавать мобильные приложения для iOS и Android на основе React. Вместо компонентов HTML используются нативные компоненты (View, Text, ScrollView). Состояние и логика пишутся на JavaScript (или TypeScript), что снижает порог входа для веб-разработчиков.

Тестирование

Для тестирования React-компонентов применяются библиотеки Jest (модульное тестирование), React Testing Library (интеграционные тесты) и Cypress (сквозные тесты). React Testing Library продвигает тестирование с точки зрения пользователя, избегая проверок внутреннего состояния.

Версии и поддержка

График выхода

React придерживается семантического версионирования. Начиная с 2020 года, актуальная мажорная версия — 18. Обновления выходят по мере разработки, официальные патчи выпускаются каждые несколько месяцев для актуальной стабильной версии.

Cтатус LTS и устаревшие версии

На 2025 год версия 17 считается устаревшей и не получает обновлений (последний патч — 17.0.2, вышедший в 2021 году). Версия 18 является единственной стабильной версией React. Пользователей версии 16 призывают к миграции, так как поддержка этой версии была прекращена.

Преимущества и недостатки

Преимущества

Высокая производительность за счёт виртуального DOM.
Огромное сообщество и экосистема, тысячи библиотек и готовых решений.
Поддержка TypeScript (с версии 16.8 официальные типы).
Переиспользование компонентов, что сокращает время разработки.
Возможность интеграции с любым стеком — от Django до Go.

Недостатки

Быстрое появление новых версий и патчей, что создаёт риск устаревания знаний.
Отсутствие единого мнения о лучших практиках управления состоянием на проектах среднего размера.
Не относится к фреймворкам — для маршрутизации, HTTP-запросов, валидации форм и других типовых задач требуются сторонние библиотеки.
Кривая обучения: понимание хуков, контекста и жизненного цикла компонента требует времени у новичков.

Применение

React используется в веб-приложениях крупнейших IT-компаний. Среди известных проектов на React:

Одностраничные приложения социальных сетей (Facebook, Instagram — обе организации признаны экстремистскими и запрещены в РФ).
Платформа для обмена сообщениями Discord.
Система управления контентом (например, интерфейс авторизации и закладок в Khan Academy).
Корпоративные дашборды и панели администрирования от Netflix, Airbnb, Uber.
Фронтенд приложения WhatsApp в версии Web (также Meta — признана экстремистской и запрещена в РФ).

Кроме того, React широко используется в образовательных проектах и стартапах как начальный стек для интерфейсов.

Лицензирование

React распространяется под лицензией MIT (с 2017 года). Ранее, с выхода версии 0.3.0 и до обновления лицензии в 2017 году, библиотека использовала лицензию BSD с дополнительным патентом (Facebook Patent Addendum). После критики со стороны сообщества компания Meta (признана экстремистской и запрещена в РФ) перевела React на MIT-лицензию, сняв патентные ограничения.

Критика и обсуждение

Основные объекты критики React:

Сложность экосистемы — выбор стека требует понимания множества инструментов (Webpack, Babel, ESLint, TypeScript, Jest, Storybook, и др.).
Документация — хотя документация React считается одной из лучших среди веб-фреймворков, она не всегда поспевает за изменениями (например, документация по хукам долго оставалась неполной в части серверного рендеринга).
Разделение логики и разметки — JSX смешивает HTML и JavaScript, что некоторым разработчикам кажется нарушением принципа разделения ответственности (Separation of Concerns). Сторонники React утверждают, что это повышает связность компонента.
Отсутствие стандартизации стейт-менеджмента — отсутствие «официального» решения для сложного глобального состояния приводит к фрагментации и несовместимости проектов.

Источники

React Documentation (react.dev/hooks, react.dev/versions).
«React: Up & Running, 2nd Edition» — Stoyan Stefanov (O’Reilly Media, 2021).
Статья «React: A JavaScript library for building user interfaces» — Meta Open Source (2023).
«Fiber Architecture» — React Official Blog (2017).
«The History of React.js on a Timeline» — RisingStack blog (2020).
Документация по React Native (reactnative.dev).
«Next.js vs React: The Ultimate Comparison» — Smashing Magazine (2024).
Лицензия React (react.dev/license).

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →