Урок 1. Веб-архитектура: браузер, URL/DNS, HTTP, REST API, JSON, HTML, CSS, JS+DOM, декларативный UI, TS-основы, Promise/async/await, mock API, frontend/backend, routing, CSR/SSR/SSG, первый взгляд на компоненты Angular и React, Node/npm, Git, DevTools, a11y, state, loading/empty/error, проектирование TaskFlow, практика (ng new, первый список, React-компонент, сравнение, состояние).
Урок 2. JavaScript и TypeScript (53 раздела): переменные и область видимости, примитивы, сравнения, условия/guard clauses, циклы, массивы, map/filter/find/reduce, объекты, деструктуризация, spread/rest, функции, arrow functions, callbacks, замыкания, this, ES-модули, import, Promise, async/await, обработка ошибок, fetch, TS: статический анализ, основные типы, annotations/inference, arrays/objects/readonly, type aliases, interfaces, union types, literal types, optional/properties, function types, generics, any/unknown, assertions, JSON из API, модель Task, практики и самостоятельная работа.
Языковые конструкции и типы из урока 2 не изучаются «отдельно ещё раз». Они превращаются в задачи TaskFlow и повторяются по мере усложнения. Ниже — карта распределения.
| Тема (база урока 2) | Выполняется в Angular | Выполняется в React |
|---|---|---|
| Массивы + map/filter/find/reduce | Урок 5 (computed) · Урок 11 (состояние) | Урок 16 (map/filter) · Урок 21 |
| Объекты, spread, модели Task/TaskForm | Урок 6 (сервисы и модель) | Урок 15 (useState, объекты) |
| Промисы, async/await, fetch | Урок 7 (HttpClient + mock API) | Урок 18 (fetch + useEffect) |
| Обработка ошибок, HTTP-статусы | Урок 7 · Урок 10 (loading/empty/error) | Урок 18 · Урок 20 |
| Функции, callbacks, guards, условия | Урок 3–4 (обработчики, input/output) | Урок 14–15 (обработчики, props) |
| Деструктуризация, rest, типы union/literal | Урок 5–6 (сигналы, статусы) | Урок 16–17 (деструктуризация props) |
| Generics, unknown, JSON из API | Урок 6–7 (типизированный HttpClient) | Урок 18 (типизированный ответ) |
| Модули ES, import/export | Всем Angular-урокам (файлы компонентов) | Всем React-урокам (файлы компонентов) |
| Компоненты, template, state (первый взгляд) | Уроки 3–5 (углубление) | Уроки 14–16 (углубление) |
Углубляем первый взгляд на Angular-компоненты из урока 1. Разбираем standalone-компонент как основную единицу приложения и современный control flow.
@Component, selector, template, styles, imports.{{ }}, property binding [ ], event binding ( ).@if, @for, @switch, @empty, track.@for по массиву tasks.Перенести статический список Задач из урока 1 на @for + интерполяцию, добавить @if для пустого списка и @switch для статусов.
Строим компонентное дерево TaskFlow: AppShell → TaskPage → TaskList → TaskItem / TaskForm / FilterBar. Осваиваем связь родитель–ребёнок.
@Input() и @Output(), деструктуризация внутри методов.track.Разбить экран на компоненты, связать TaskList и TaskItem через Input/Output с использованием модели Task.
Урок 1 показал signal(). Теперь доводим реактивное состояние TaskFlow до полной модели и разбираем производные значения.
signal(), computed(), effect(), обновление update()/set().computed: фильтры (все/активные/выполненные), счётчики, поиск через find.Завести список задач в сигнале, реализовать toggle и фильтрацию через computed на основе map/filter/find.
Выносим работу с данными из компонентов в сервисы. TypeScript-модель Task и TaskForm (разделы 40–42 урока 2) становятся официальным контрактом.
@Injectable и dependency injection provideIn/inject().readonly для id.Создать сервис TaskService с сигналом списка и методами add/toggle/remove; подключить через DI.
Соединяем Angular с mock API на порту 3000 (из урока 1). Промисы и async/await из урока 2 переходят в Observable/HttpClient.
provideHttpClient; CRUD-методы (GET/POST/PATCH/DELETE).catchError, проверка ok, статусы 4xx/5xx.Подключить TaskService к json-server: загрузка списка, создание, toggle, удаление; обработать ошибки и состояние загрузки.
Создаём и редактируем задачи через формы. Объекты и spread из урока 2 применяются к данным формы.
patchValue, submit.Форма «Добавить задачу» с валидацией; отправка POST в TaskService, очистка формы, добавление в список.
Превращаем одностраничный TaskFlow в приложение с несколькими экранами (список, задача, настройки).
provideRouter, RouterOutlet, RouterLink.:id; lazy-loading.Создать маршруты: /tasks, /tasks/:id, /new; переходы через RouterLink; защита маршрута редактирования.
Систематизируем четыре состояния UI (урок 1/практика 2) в Angular и добавляем производные данные.
DatePipe, AsyncPipe, кастомный pipe.@defer и отложенная загрузка тяжёлых частей.Перевести TaskList на явную машину состояний; добавить pipe для даты и подсчёты через computed.
Собираем весь первый Angular-прототип в единую архитектуру по сценариям из урока 1 (раздел 34).
Провести рефакторинг TaskFlow: разделить файлы, вынести логику, убедиться, что все сценарии работают.
Заканчиваем функциональность и покрываем её тестами (Vitest из scaffold).
Работающий TaskFlow на Angular с тестами. Контрольная точка для перехода к React.
Крайний Angular-урок: разбираем продвинутые механизмы, на которые опирается профессиональный код.
ng-content), view/container references.@defer, track, onPush, standalone.Оптимизировать TaskFlow: content projection для обёртки, onPush, сотрудник refactor для больших списков.
Начинаем React-блок. Первый взгляд был в уроке 1; теперь строим полное компонентное дерево по аналогии с Angular-блоком.
map и key.Расклад TaskFlow на React-компоненты: App, TaskList, TaskItem; данные в props как объекты Task.
Переводим состояние TaskFlow на React. Обычные функции и объекты урока 2 применяются к событиям.
useState для списка и отдельных значений; замыкания (раздел 16).onClick/onChange, event как callback (раздел 15).Добавить toggle и удаление задач через useState и колбэки, применяя guard clauses и arrow functions.
Методы массивов из урока 2 становятся основой React-рендера списков.
map() для списков, filter() для фильтров, стабильные key.find()/reduce() для поиска и счётчиков.Реализовать фильтрацию и счётчики задач через filter/map/reduce; переиспользовать в TaskList.
Формы в React: controlled inputs и валидация. Объекты TaskForm из урока 2 применяются к состоянию формы.
value + onChange + useState.Форма «Добавить задачу» в React: controlled input, валидация, добавление объекта в список.
Соединяем React с mock API. Промисы и async/await из урока 2 реализуются через useEffect и fetch.
useEffect для загрузки данных, зависимости, cleanup.fetch + async/await, типизированный ответ (разделы 39, 44).try/catch, проверка ok, статусы (разделы 22–23).Подключить TaskFlow к mock API: загрузка, создание, toggle, удаление; обработать ошибки и загрузку.
Добавляем несколько экранов TaskFlow. Первый взгляд был в уроке 1 (раздел 16); теперь настраиваем реальный роутер.
Настроить React Router для TaskFlow и реализовать переходы со страницей одной задачи.
Систематизируем четыре состояния UI (урок 1/практика 2) в React, как это было для Angular в уроке 10.
Перевести React-TaskFlow на явную машину состояний и вынести фильтры в общее состояние родителя.
Крупные приложения требуют структурированного state. Разбираем паттерны React поверх useState.
useContext для избегания «пропсодриллинга».useReducer для предсказуемых переходов состояния.Перевести управление задачами React на context/reducer, сохранив работу с API.
Заканчиваем функциональность React-версии и покрываем её тестами.
Работающий TaskFlow на React с тестами. Контрольная точка для финала.
Профессиональные паттерны: кастомные hooks, производительность и переиспользование.
useTasks, useLocalStorage.useMemo/useCallback, useRef, обработка асинхронности.Вынести логику задач в кастомные hooks, добавить сохранение в localStorage и оптимизировать перерисовку.
Синтез всего курса. Сравнение Angular и React на реальном TaskFlow и защита решений.