React и Angular
в 2026 году

Категория

Основы

Уровень

Вводный

Связанные темы

Состояние и компоненты (глава 0.1)

Зачем это знать

Понимать, где и почему выбирают каждый фреймворк, и читать код обоих

§1Кто разрабатывает и как выходят версии

Фреймворк — программа, от которой зависит работа тысяч приложений, поэтому от ответа на вопрос «кто его поддерживает» зависит, можно ли строить на нём продукт на пять–десять лет. Компании нужно, чтобы фреймворк продолжали поддерживать, о несовместимых изменениях предупреждали заранее и исправления уязвимостей выходили вовремя.

React

React создан в Facebook и открыт в 2013 году. Тринадцать лет его разрабатывала компания Meta. 24 февраля 2026 года Linux Foundation объявила о создании React Foundation: Meta передала фонду React, React Native и связанные проекты. В числе первых участников фонда — Amazon, Meta, Microsoft, Vercel, Expo, Huawei, Callstack и Software Mansion. Фонд отвечает за инфраструктуру проекта и конференцию React Conf; техническое направление по-прежнему задают разработчики ядра.

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

Angular

Angular разрабатывает команда в Google. У фреймворка опубликован график выпусков: до версии 21 крупная версия выходила раз в полгода, с версии 22 — раз в год. Каждая крупная версия поддерживается 24 месяца: 12 месяцев активной разработки и 12 месяцев долгосрочной поддержки, когда выходят только исправления критических ошибок и уязвимостей. Angular 22 вышел 3 июня 2026 года, следующая версия ожидается в июне 2027 года.

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

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

§2Сколько разработчиков ими пользуется

Самый крупный открытый опрос разработчиков проводит Stack Overflow. В опросе 2025 года участники отмечали веб-фреймворки, с которыми много работали за последний год. React отметили 44,7% всех участников, Angular — 18,2%. Среди тех, кто программирует профессионально, доли чуть выше: 46,9% и 19,8%. Один участник мог отметить несколько фреймворков, поэтому доли не складываются в 100%.

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

Российский рынок

Отдельного открытого опроса по России такого масштаба нет, поэтому соотношение проверяют по сайтам вакансий в тот день, когда нужны цифры: доли меняются каждый месяц. Как это сделать, описано в задании главы 0.5. Пример российской компании, которая работает на Angular, — Т-Банк: он нанимает фронтенд-разработчиков на Angular и развивает в открытом доступе Taiga UI — библиотеку из более чем 130 компонентов для Angular, которую используют и за пределами банка (на 14 октября 2026 года у репозитория на GitHub около 4 тысяч звёзд).

Оба фреймворка востребованы. Чем они отличаются в работе, в следующем разделе показано на коде одной задачи.

§3Поиск по списку на React и Angular

Задача: поле поиска и список городов под ним. Пользователь вводит текст, и в списке остаются города, в названии которых этот текст встречается. Под списком — сколько городов найдено. В задаче есть всё, о чём говорилось в главе 0.1: состояние (текст в поле), значение, которое из него вычисляется (отфильтрованный список), и разметка, которая показывает и то, и другое.

import { useState } from 'react';

const CITIES = ['Москва', 'Казань',
  'Самара', 'Саратов'];

export function CitySearch() {
  const [query, setQuery] = useState('');
  const found = CITIES.filter(c =>
    c.toLowerCase().includes(query.toLowerCase()));

  return (
    <section>
      <input value={query}
        onChange={e => setQuery(e.target.value)} />
      <ul>
        {found.map(c => <li key={c}>{c}</li>)}
      </ul>
      <p>Найдено: {found.length}</p>
    </section>
  );
}

import { Component, signal, computed }
  from '@angular/core';

const CITIES = ['Москва', 'Казань',
  'Самара', 'Саратов'];

@Component({
  selector: 'app-city-search',
  template: `
    <section>
      <input [value]="query()"
        (input)="query.set(
          $any($event.target).value)" />
      <ul>
        @for (c of found(); track c) {
          <li>{{ c }}</li>
        }
      </ul>
      <p>Найдено: {{ found().length }}</p>
    </section>`,
})
export class CitySearch {
  query = signal('');
  found = computed(() => CITIES.filter(c =>
    c.toLowerCase()
      .includes(this.query().toLowerCase())));
}

Обе записи делают одно и то же, и части в них находятся одна напротив другой. Ниже они разобраны по порядку.

Состояние

В React состояние создаёт функция useState(''). Она возвращает пару: текущее значение query и функцию setQuery, которой значение меняют. Когда вызывается setQuery, React вызывает функцию компонента заново и получает новое описание разметки. Функции, имена которых начинаются с use, называются хуками; их вызывают только в начале функции компонента.

В Angular состояние хранится в сигнале: signal('') создаёт контейнер со значением. Значение читают вызовом query(), меняют методом query.set(...). Angular запоминает, какие места шаблона читали сигнал, и при изменении обновляет только их.

Вычисляемое значение

Список найденных городов не хранится отдельно: он вычисляется из текста поиска. В React это обычная переменная found, которая заново считается при каждом вызове функции компонента. В Angular для этого есть computed: значение пересчитывается только тогда, когда изменился сигнал, который в нём прочитан. Правило общее для обоих фреймворков: то, что можно вычислить из состояния, в состояние не записывают. Иначе появятся два источника одних и тех же данных, и они разойдутся, как витрина слева в главе 0.1.

Разметка

В React разметка записана прямо в коде на JavaScript (JSX). Список строится обычным методом массива map, а значение подставляется в фигурных скобках. В Angular разметка — отдельный шаблон со своими правилами: квадратные скобки [value] передают значение в свойство элемента, круглые (input) подписываются на событие, блок @for повторяет элемент для каждого города, двойные фигурные скобки выводят значение. Отсюда частая формулировка: в React «всё — JavaScript», в Angular у шаблона свой язык.

В обоих случаях у элемента списка есть ключ: key={c} в React и track c в Angular. По ключу фреймворк узнаёт, какой элемент списка какой, когда список меняется, и не пересоздаёт элементы, которые остались.

На небольшой задаче различия невелики. Как они проявляются на проекте из сотен компонентов, собрано в следующем разделе.

§4Различия в работе

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

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

С появлением инструментов ИИ, которые пишут код, при выборе фреймворка учитывают ещё и то, как эти инструменты с ним работают.

§5Фреймворки и инструменты ИИ

Модели, которые пишут код, обучены на открытом коде из интернета. Кода на React в открытом доступе больше, чем кода на Angular, поэтому модели чаще и увереннее предлагают React. Генераторы приложений, которые создают сайт по описанию, используют React по умолчанию: Lovable создаёт проекты на React, TypeScript, Vite и Tailwind, v0 от Vercel — на React и Next.js. Для начинающего разработчика из этого следует практический вывод: код на React, написанный ИИ, ему придётся читать и проверять чаще всего, даже если сам он работает на Angular.

У Angular с ИИ есть своя трудность. За 2023–2026 годы во фреймворке поменялось многое: появились сигналы, новый синтаксис шаблонов @if и @for, работа без библиотеки Zone.js, Signal Forms. В обучающих данных моделей старого кода на Angular больше, чем нового, и модели часто предлагают устаревшие приёмы: модули NgModule, директивы *ngFor, подписки RxJS там, где теперь пишут сигналы. Такой код работает, но в новом проекте его не пишут.

Для этой трудности команда Angular выпустила отдельные инструменты. На сайте angular.dev есть раздел для работы с ИИ: файлы с правилами для моделей, сервер MCP, через который ИИ-агент в редакторе получает актуальную документацию и примеры, и с версии 22 — стабильные инструменты, позволяющие агенту запустить сборку проекта и прочитать ошибки. В той же версии выпущены готовые наборы инструкций для агентов, которые описывают, как писать на современном Angular. В Google AI Studio можно создать приложение на Angular по описанию так же, как на React в других генераторах.

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

§6Проверьте себя

Итог главы

React с 2026 года развивается под управлением React Foundation, Angular — командой Google по годовому графику с поддержкой каждой версии 24 месяца. По опросу Stack Overflow 2025 React используют 44,7% разработчиков, Angular — 18,2%; Angular чаще встречается в банках и корпоративных системах. На одной задаче видно, что модели у фреймворков общие — состояние, вычисляемые значения, разметка, ключи списка, — а запись разная: хуки и JSX в React, сигналы и шаблоны в Angular. Инструменты ИИ по умолчанию пишут React, а для Angular часто предлагают устаревший код; команда Angular отвечает на это инструментами для агентов.

Источники

1. Stack Overflow Developer Survey 2025 — Technology
2. Linux Foundation — Announces the Formation of the React Foundation (24 февраля 2026)
3. react.dev — React Versions
4. angular.dev — Versioning and releases
5. InfoQ — Google Releases Angular v22 with Stable Signal Forms, OnPush by Default and Experimental WebMCP
6. heise — Angular 22 focuses on AI coding
7. angular.dev — Build with AI
8. Lovable — Tech Stack & Exports
9. Хабр Карьера — вакансия Т-Банка «Frontend-разработчик Angular»
10. GitHub — Taiga UI