React: зачем он появился и почему всё ещё стандарт в 2026

Май 2013, JSConf US. Инженер Facebook Джордан Уолк выходит на сцену и показывает библиотеку, которая смешивает разметку прямо с JavaScript. Зал реагирует холодно: 'разделение разметки и логики - это святое, а ломают его прямо со сцены'. Кто-то уходит. Через три года на этой библиотеке будут написаны интерфейсы Netflix, Airbnb и WhatsApp Web. К 2026 году у неё появится собственный фонд под крылом Linux Foundation, а компилятор будет сам расставлять оптимизации, которые раньше писали руками.

• Facebook и Instagram: News Feed и веб-Instagram - первые продакшен-площадки React ещё до открытия исходников
• Netflix (2015): переписал UI на React ради скорости загрузки и единой кодовой базы для TV, web и мобильных
• WhatsApp Web, Discord, Figma, Notion: сложные интерактивные интерфейсы, где ручная работа с DOM давно бы стала адом
• Shopify Hydrogen, Vercel: целые коммерческие платформы построены вокруг React и Server Components
• Vacancy-рынок: React годами держит первое место по спросу среди фронтенд-библиотек в отчётах Stack Overflow и State of JS

Предварительные знания

• JavaScript на уровне функций, массивов, объектов и стрелочных функций
• Базовое понимание DOM: что браузер строит дерево элементов из HTML
• Идея о том, что такое состояние приложения (данные, которые меняются во времени)

Как один инженер Facebook поменял фронтенд

Джордан Уолк создаёт прототип под именем FaxJS, вдохновляясь XHP - внутренним PHP-расширением Facebook, которое позволяло писать HTML-компоненты прямо в коде. Идея переносится в браузер: пусть компонент будет функцией, а не шаблоном. React обкатывают на ленте новостей Facebook (2011) и на вебе Instagram (2012), и только в мае 2013 открывают исходники на JSConf US. Реакция сообщества враждебная: JSX выглядит как ересь. Перелом наступает, когда разработчики понимают, что React убирает целый класс багов - рассинхрон интерфейса и данных. Дальше Instagram, Netflix, Airbnb, и за несколько лет React становится отраслевым стандартом.

Какую боль React убрал

К началу 2010-х веб-приложения перестали быть страницами с парой форм. Лента Facebook, веб-Instagram, почтовые клиенты - это сотни элементов, которые меняются от каждого клика, нового сообщения и ответа сервера. Доминирующим инструментом был jQuery: найти элемент в DOM и вручную обновить его. Пока элементов мало, это работает. Когда состояние сложное, код превращается в паутину ручных обновлений, и появляется главный баг эпохи - интерфейс показывает одно, а данные в памяти уже другие.

React сделал другую ставку. Разработчик описывает, как интерфейс должен выглядеть при текущем состоянии, и не трогает DOM руками вообще. Меняется состояние - React сам пересчитывает, что должно отобразиться, и вносит минимальные правки в реальный DOM. Один источник правды вместо десятков ручных обновлений.

Враждебность к JSX в 2013 году была не капризом. Индустрия десять лет училась разделять HTML, CSS и JS по разным файлам. React предложил группировать код не по технологии, а по компоненту - вся логика и разметка одной кнопки лежат вместе. Сегодня это считается само собой разумеющимся.

Ментальная модель: UI = f(state)

Компонент в React - это функция, которая принимает входные данные (props) и возвращает описание интерфейса. Не сам DOM, а его описание: лёгкие объекты, которые говорят 'тут заголовок, тут кнопка'. React сравнивает новое описание со старым и применяет к реальному DOM только разницу. Этот процесс называется reconciliation, а промежуточное дерево описаний исторически зовут Virtual DOM.

Состояние добавляет интерактивность. Хук useState хранит значение между перерисовками. При вызове функции-сеттера React заново вызывает компонент, получает новое описание UI и обновляет только то, что реально изменилось. Разработчик не пишет ни одной команды вида 'найди элемент и поменяй текст'.

Данные текут в одну сторону: сверху вниз, от родителя к детям через props. Если ребёнку надо что-то изменить наверху, он вызывает переданную функцию. Этот односторонний поток делает поведение предсказуемым: чтобы понять, почему компонент так выглядит, достаточно посмотреть на его состояние и props.

Где React в 2026 году

За десять лет React прошёл путь от спорной библиотеки до инфраструктуры индустрии. React 19 (декабрь 2024) и 19.2 (октябрь 2025) принесли Server Components, Actions и хук use(). React Compiler v1.0 (октябрь 2025) сам мемоизирует компоненты, снимая с разработчика ручные useMemo и useCallback. В феврале 2026 появился React Foundation под Linux Foundation - управление проектом стало нейтральным, а не привязанным к одной компании.

Где React не лучший выбор: для статического блога или лендинга он часто избыточен - там хватит обычного HTML или генератора вроде Astro. Если критичен минимальный объём JS, Svelte или Solid дадут меньший бандл. React силён, когда интерфейс крупный, интерактивный и живёт годами, а команде важны экосистема и найм.

Связь с другими темами

Этот урок про мотивацию и модель. Дальше курс раскрывает её по слоям:

• JSX — Синтаксис, которым описывается дерево UI. Первый практический шаг после понимания идеи
• Server Components — Эволюция модели: часть дерева рендерится на сервере с нулевым JS на клиенте
• React Compiler — Компилятор берёт на себя оптимизацию ре-рендеров, о которой раньше думал каждый разработчик

Итог

• React создан Джорданом Уолком в Facebook, обкатан на News Feed и Instagram и открыт в мае 2013 года на JSConf US
• Главная идея: UI = f(state). Интерфейс описывается как функция от состояния, а библиотека сама вычисляет изменения DOM через reconciliation
• Это декларативный подход вместо императивного: вместо пошаговых команд браузеру описывается желаемый результат
• К 2026 году React дошёл до версии 19.2, получил стабильный React Compiler v1.0 и собственный React Foundation под Linux Foundation
• React выигрывает на крупных интерактивных интерфейсах и data-heavy приложениях, но для крошечных статических сайтов часто избыточен

Связанные уроки

• rc-02-jsx — Поняв зачем React, разбираем JSX - синтаксис, которым описывается этот самый UI = f(state)
• rc-30-rsc-intro — Server Components - главный сдвиг модели React после 2023 года, прямое продолжение идеи 'описываем, а не дёргаем DOM'
• rc-35-nextjs-app-router — В 2026 React почти всегда живёт внутри фреймворка, и Next.js App Router - дефолтный способ его готовить