Справочник по Angular и React · Макаров М. Н.

Издание для старших курсов

Макаров Максим Николаевич

Справочник
по Angular
и React

Фронтенд в 2026 году:
React, автоматизации и работа с ИИ

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

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

React 19n8n · PocketBaseTelegram-ботыGitHub ActionsИИ-агенты
Отдельный разбор к модулю 0 Заменил ли ИИ фронтенд-разработчика Ответ по данным 2025–2026 годов: что происходит с вакансиями в США и России, какие задачи ИИ уже выполняет вместо людей (Airbnb, Google, Shopify), чем закончились продукты без разработчика (Replit, Lovable) и какая широко пересказанная история не подтвердилась. У каждого утверждения указан источник. Открыть →

ПланМодули и главы

Дисциплина рассчитана на 4–6 недель по пять пар. В каждом модуле — теория, проект и автоматизация; распределение пар и правила работы с ИИ — в главе 0.5.

МОДУЛЬ 0

Фронтенд в эпоху ИИ

2 пары

Что делает фронтенд, чем различаются React и Angular, какие инструменты ИИ используются во фронтенде и как с ними работать в дисциплине.

МОДУЛЬ 1

React: первый проект и первый бот

6 пар

Установка и запуск React, компоненты, состояние, списки и формы — темы, нужные для первого проекта.

  • ПРОЕКТДоска заявок
  • АВТОМАТИЗАЦИЯЗаявка → n8n → сообщение в Telegram
МОДУЛЬ 2

Данные с сервера и ИИ-диспетчер

6 пар

Эффекты, загрузка данных, база PocketBase. Языковая модель внутри продукта сортирует заявки.

  • 2.1Эффекты и когда они не нужныготовится
  • 2.2Загрузка данных: загрузка и ошибкаготовится
  • 2.3Собственный хукготовится
  • 2.4PocketBase: коллекции и правила доступаготовится
  • 2.5Обновление по событиям из базыготовится
  • ПРОЕКТДоска заявок с базой
  • АВТОМАТИЗАЦИЯИИ-диспетчер и кнопки «Взять» в Telegram
МОДУЛЬ 3

Несколько экранов, публикация, расписание

5 пар

Маршрутизация, общие данные, публикация на GitHub Pages и автоматизация без своего сервера.

  • 3.1Маршрутизацияготовится
  • 3.2Контекст: общие данныеготовится
  • 3.3Сборка и публикация на GitHub Pagesготовится
  • 3.4GitHub Actions: конвейер и расписаниеготовится
  • ПРОЕКТМониторинг сайтов группы
  • АВТОМАТИЗАЦИЯНочная проверка сайтов и оповещение
МОДУЛЬ 4

Работа с ИИ-агентом и обзор Angular

6 пар

Тесты и доступность, постановка задачи агенту и проверка его кода. Одна обзорная пара по Angular.

  • 4.1Тесты компонентовготовится
  • 4.2Доступность интерфейсаготовится
  • 4.3Задача для ИИ-агента и проверка результатаготовится
  • 4.4Angular: тот же компонентготовится
  • ПРОЕКТДайджест новостей, код пишет агент
  • АВТОМАТИЗАЦИЯRSS → модель → дайджест в Telegram
МОДУЛЬ 5

Свой проект и защита

5 пар

Проект из каталога или своя задача по шаблону технического задания, защита с работающей автоматизацией.

  • КАТАЛОГСторож страницы, чек → бюджет, голос → задачи, ассистент по конспектам, карта заявок
  • ЗАЩИТААвтоматизация в работе, код, журнал работы с ИИ
Справочник по Angular и React © Макаров Максим Николаевич