Состав курса, уровни, практика и способы проверки знаний.
Курс включает 22 темы и 352 вопроса с разбором ответа, а также 22 тематические лабораторные работы. Начать можно с первой темы курса.
Маршрут охватывает уровни Junior, Middle, Senior. Темы расположены от основы к более сложным инженерным задачам, поэтому можно начать с подходящего места и не пропускать важные зависимости.
Практический инженерный маршрут по React 19.2 и строгому TypeScript: от короткого повторения современного JavaScript до проектирования компонентов, асинхронных интерфейсов, тестирования, доступности, безопасности, производительности, серверного рендеринга и React Server Components. Каждый модуль заканчивается работающим артефактом и разбором эксплуатационных компромиссов.
Боевой маршрут по современному React: каждый механизм изучается через рабочую задачу, проверяемый контракт и разбор поведения в эксплуатации.
Курс начинается не с длинного повторения языка, а с короткого моста по тем
возможностям JavaScript и TypeScript, без которых нельзя надёжно писать React-код.
Первый же проект собирается со строгой проверкой типов, а все последующие примеры
написаны на TypeScript. any, подавление ошибок компилятора и утверждения типов
без проверки границы рассматриваются как долг, а не как нормальный путь.
Исполняемая основа курса — React 19.2, TypeScript 5.9 в режиме strict, Vite 8.1
и React Compiler 1.0. React Router 7.18 используется для маршрутизации и загрузки
данных. Серверная модель разбирается на Next.js 16.2 App Router, потому что там
можно увидеть Server Components, Server Functions, streaming и hydration в одном
production-контуре. Знания о React при этом не подменяются особенностями Next.js.
В каждой теме есть четыре слоя:
Урок завершается лабораторией. Зачёт с вариантами ответа проверяет понимание, но не заменяет код: уровень считается закрытым только после работающего артефакта и объяснения решений.
J1–J7| Код | Проверяемое умение |
|---|---|
J1 | Воспроизводимо запустить React-проект, проверки типов, lint, тесты и сборку |
J2 | Описать данные, props и события строгими TypeScript-контрактами |
J3 | Собрать семантический компонент и композицию без скрытого общего состояния |
J4 | Смоделировать локальное состояние, форму и все видимые состояния интерфейса |
J5 | Получить данные с обработкой ожидания, ошибки, пустого результата и отмены |
J6 | Проверить поведение компонента тестом с пользовательским взаимодействием |
J7 | Соблюсти базовые требования доступности, безопасности и качества сборки |
Итоговая работа: типизированная панель обработки заявок с фильтрами в URL, формой, асинхронными состояниями, тестами и доступной клавиатурной навигацией.
M1–M8| Код | Проверяемое умение |
|---|---|
M1 | Провести границы модулей и спроектировать устойчивый публичный API компонентов |
M2 | Выбрать владельца состояния и разделить URL, server, form и client state |
M3 | Реализовать reducer, Context или внешний store без лишних подписок |
M4 | Спроектировать асинхронный интерфейс с Suspense, transitions и race policy |
M5 | Построить пирамиду component/integration/E2E-тестов с сетевой границей |
M6 | Найти проблему производительности измерением и доказать эффект изменения |
M7 | Закрыть доступность и клиентскую границу безопасности регрессионными тестами |
M8 | Реализовать маршрутизацию, сборку и поставку приложения с наблюдаемостью |
Итоговая работа: рабочее место оператора с data router, кэшированием, оптимистичными действиями, устойчивостью к сбоям и измеряемой производительностью.
S1–S9| Код | Проверяемое умение |
|---|---|
S1 | Объяснить render/commit, identity, batching и конкурентный рендеринг по трассировке |
S2 | Внедрить React Compiler и инструментарий без изменения продуктовой семантики |
S3 | Провести server/client-границу и выбрать CSR, SSR, SSG или RSC по ограничениям |
S4 | Защитить решение по производительности данными Profiler и Web Vitals |
S5 | Спроектировать согласованность кэша, optimistic concurrency и восстановление после сбоя |
S6 | Создать расширяемый и доступный API дизайн-системы с типовыми гарантиями |
S7 | Спроектировать error policy, telemetry, rollout и диагностику production-сбоя |
S8 | Провести threat modeling для браузера, BFF и Server Functions |
S9 | Защитить архитектурное решение, альтернативы, стоимость миграции и остаточные риски |
Итоговая работа: аудит и эволюция изоморфного приложения: server/client границы, streaming, Compiler, безопасность действий, телеметрия и план миграции.
Результат модуля — небольшой, но полностью проверяемый интерфейс без any,
дублированного состояния и тестов по внутренней реализации.
Результат модуля — приложение со строгими границами данных, предсказуемой конкурентностью и тестами, которые переживают внутренний рефакторинг.
Результат модуля — интерфейс, который можно безопасно поставлять реальным пользователям и поддерживать по измеримым сигналам.
Результат модуля — способность выбирать архитектуру рендеринга и защищать её не модой или привычкой, а требованиями к данным, задержке, безопасности и стоимости эксплуатации.
Курс не учит копировать один «идеальный» стек. Redux, TanStack Query, CSS-in-JS и конкретные UI-библиотеки рассматриваются как варианты реализации после выбора владельца данных и контракта, а не как обязательные слои. Ручная мемоизация не подаётся как ритуал: сначала измерение и корректность, затем Compiler или точечный escape hatch. Effects не используются для вычисления данных, которые можно получить во время рендера или загрузить на уровне маршрута.
Быстро войти в работу означает рано получить обратную связь от типов, браузера, тестов и пользователя. Это не означает пропустить модель выполнения: именно она сокращает время диагностики, когда учебный пример превращается в production-код.
Доступен после всех тем (0 из 22)
Доступен после зачёта
Тип TypeScript для значения неизвестной формы. В отличие от any, запрещает использовать свойства и операции до runtime-проверки и narrowing.
Пример
Ответ `response.json()` принимается как `unknown`, затем проверяется схемой до преобразования в Product.Связанные термины
Сужение union-типа TypeScript по условиям control flow: typeof, equality, in, discriminant или пользовательскому type guard.
Пример
После `state.status === 'success'` доступно обязательное поле `state.data`.Связанные термины
Runtime-проверка с type predicate, сообщающая TypeScript, какой более узкий тип доказан в соответствующей ветви.
Пример
`isProduct(value): value is Product` проверяет id и price неизвестного JSON.Связанные термины
Union объектов с общим литеральным полем-дискриминантом и разными обязательными полями каждого варианта.
Пример
`idle | loading | success(data) | failure(error)` исключает противоречивые async-состояния.Связанные термины
Оператор TypeScript, проверяющий совместимость выражения с типом без потери более точного вывода типа самого выражения.
Пример
Реестр маршрутов проверяется через `satisfies Record<string, Route>`, сохраняя union конкретных ключей.Связанные термины
Тип невозможного значения. Используется для исчерпывающей проверки switch после обработки всех членов union.
Пример
`assertNever(action)` превращает добавление необработанного reducer action в ошибку компиляции.Связанные термины
Неизменяемый объект-описание того, что React должен отобразить. JSX создаёт elements, а не DOM-узлы напрямую.
Пример
`<ProductCard product={item} />` создаёт описание component element.Связанные термины
Фаза чистого вычисления следующего React-дерева. Работа может повторяться, прерываться или быть отброшена до commit.
Пример
Function component вызывается и возвращает JSX, но DOM ещё не обязан измениться.Связанные термины
Фаза применения согласованных изменений к host-среде, установки refs и запуска соответствующих lifecycle/effect шагов.
Пример
После commit layout Effect может измерить уже обновлённый DOM.Связанные термины
Фиксированное значение state и props, принадлежащее одному вызову компонента и замкнутым в нём обработчикам.
Пример
Лог после setter видит прежний count, потому что handler относится к старому snapshot.Связанные термины
Группировка нескольких queued state updates до вычисления и commit согласованного следующего интерфейса.
Пример
Несколько functional updaters одного click применяются последовательно и дают один согласованный результат.Связанные термины
Сопоставление предыдущего и следующего дерева по type, position и key для сохранения identity и минимального host update.
Пример
Стабильный product.id сохраняет state строки при сортировке списка.Связанные термины
Стабильная identity sibling-элемента, происходящая из данных и используемая React при сопоставлении списков.
Пример
`<Row key={ticket.id}>` сохраняет state у правильной заявки после reorder.Связанные термины
Чистая функция перехода `(state, action) -> nextState`, централизующая связанную модель изменений.
Пример
Checkout reducer обрабатывает itemAdded, couponApplied и submitFailed без сетевых эффектов.Связанные термины
Типизированное событие или команда перехода состояния. В reducer-контексте содержит discriminant и минимальный payload.
Пример
`{ type: 'itemRemoved', id }` описывает доменный факт без DOM Event.Связанные термины
Чистая функция, вычисляющая производное значение из state и скрывающая его внутреннюю структуру от потребителя.
Пример
`selectTotal(checkout)` вычисляет сумму из items и coupon без отдельного state.Связанные термины
Механизм синхронизации committed React-состояния с внешней системой: subscription, browser API или imperative widget.
Пример
Effect подключает chat room по roomId и возвращает cleanup закрытия соединения.Связанные термины
Функция, отменяющая setup конкретного Effect перед новым setup или unmount и обеспечивающая симметрию lifecycle.
Пример
Cleanup удаляет тот же listener и abort-ит устаревший fetch.Связанные термины
Callback, вызываемый из Effect и читающий latest props/state без превращения этих чтений в причины пересоздания внешнего ресурса.
Пример
Уведомление использует текущую theme, а chat connection зависит только от roomId.Связанные термины
Несрочное React-обновление, render которого может уступать срочному вводу и быть заменён более новым результатом.
Пример
Поле query обновляется срочно, а тяжёлый список результатов — внутри startTransition.Связанные термины
Декларативная граница ожидания, показывающая fallback, пока descendant resource не готов во время render.
Пример
Рекомендации загружаются под локальным skeleton, не скрывая основной документ.Связанные термины
Маршрутизатор, координирующий route loaders, actions, pending states, errors и revalidation вместе с URL-навигацией.
Пример
React Router 7 запускает loader detail до render страницы и abort-ит его при новой навигации.Связанные термины
Функция route data boundary, получающая request/params и возвращающая данные или response до отображения зависимого route.
Пример
Loader проверяет ticketId, передаёт request.signal fetch и возвращает 404 для отсутствующей записи.Связанные термины
Повторное чтение route/server cache данных после mutation или по freshness policy для возврата к authoritative state.
Пример
После action изменения статуса router заново вызывает связанный loader списка.Связанные термины
Данные, authoritative owner которых находится удалённо и которые требуют cache key, freshness, error и invalidation policy.
Пример
Список товаров читается из query cache, а не копируется Effect в global client store.Связанные термины
Детерминированная identity кэшируемого запроса, включающая все входы и trust scope, влияющие на результат.
Пример
`['products', tenantId, canonicalFilters]` не смешивает tenants и варианты фильтра.Связанные термины
Временное отображение предполагаемого результата mutation до server confirmation с последующим подтверждением, merge или rollback.
Пример
Количество меняется сразу, но mutation id/version защищает от старого rollback.Связанные термины
Контроль lost updates через expected version или ETag: сервер применяет изменение только к ожидаемой версии либо сообщает конфликт.
Пример
Ответ 409 сохраняет локальный draft и предлагает сравнить его с новой server version.Связанные термины
Имя элемента в accessibility tree, вычисляемое из label, текста или ARIA-связей и используемое assistive technology.
Пример
Icon button получает `aria-label="Открыть корзину"` и находится тестом по role/name.Связанные термины
Явная политика перемещения, ограничения и восстановления keyboard focus при динамических изменениях интерфейса.
Пример
Modal Dialog переносит focus внутрь и возвращает его trigger после закрытия.Связанные термины
Область accessibility tree, изменения которой объявляются screen reader без перемещения focus с выбранной срочностью.
Пример
`role="status"` один раз сообщает об успешном фоновом сохранении.Связанные термины
Именованное значение визуальной системы. Семантический token описывает роль и позволяет теме менять конкретное значение.
Пример
`--color-danger-surface` используется destructive variants в light и dark themes.Связанные термины
Конечный типизированный режим внешнего вида или поведения компонента, поддерживаемый как часть публичного контракта.
Пример
Button size ограничен union `sm | md | lg`, а не произвольной строкой class name.Связанные термины
Набор пользовательских метрик загрузки, отзывчивости и визуальной стабильности, включая LCP, INP и CLS.
Пример
INP сегментируется по route template и release, а не по URL с персональными параметрами.Связанные термины
Преобразование React-дерева в HTML на сервере для конкретного запроса с последующей возможной hydration клиентского кода.
Пример
Публичная персонализированная страница получает первый HTML до загрузки JavaScript.Связанные термины
Связывание client React tree с существующим server HTML, установка interactivity и продолжение состояния при требовании совпадающего первого дерева.
Пример
hydrateRoot подключает handlers к server markup без обязательной полной замены DOM.Связанные термины
Расхождение фактического server DOM и результата первого client render из-за недетерминизма, invalid HTML или внешней мутации.
Пример
Разные `Date.now()` на server/client создают несовпадающий текст.Связанные термины
Постепенная отправка HTML shell и частей Suspense boundaries по мере готовности вместо ожидания всего дерева.
Пример
Основной документ приходит первым, рекомендации раскрываются позднее.Связанные термины
Компонент, выполняемый до client bundle в server/build environment и способный использовать server resources без отправки implementation браузеру.
Пример
Async DocumentPage читает repository и передаёт DTO маленькому Client Editor.Связанные термины
Компонент client module graph, способный использовать state, Effects и browser APIs и гидрируемый/исполняемый в браузере.
Пример
EditorControls помечен `use client`, а статическая страница остаётся Server Component.Связанные термины
Async функция, отмеченная `use server` и вызываемая клиентом через framework reference как удалённая доверенная граница.
Пример
saveDocument повторно проверяет session, permission, schema и expected version.Связанные термины
React-граница, локализующая ошибки render/lifecycle/resource subtree и показывающая fallback без уничтожения всего интерфейса.
Пример
Route detail имеет boundary для 404/503, сохраняя общий layout и навигацию.Связанные термины
Безопасный идентификатор операции/запроса, связывающий пользовательскую ошибку, frontend telemetry и server trace.
Пример
UI показывает код обращения, по которому support находит failed save в traces.Связанные термины
Стандарт передачи trace identifiers между сервисами и клиентом для построения распределённой трассы операции.
Пример
BFF продолжает traceparent запроса сохранения в downstream service.Связанные термины
Управляемое условие активации уже поставленной возможности для cohort/rollout/kill switch, не являющееся авторизацией.
Пример
Проблемный новый редактор отключается без deploy, а сервер всё равно проверяет права.Связанные термины
Единожды собранный и проверенный build, который продвигается между окружениями без повторной компиляции кода.
Пример
Один frontend artifact проходит test, staging и production с безопасной runtime-конфигурацией.Связанные термины
Явное описание активов, доверенных границ, атакующих возможностей, abuse cases, controls и остаточных рисков.
Пример
Для Server Function рассматриваются поддельный documentId, CSRF, XSS, replay и cross-tenant access.Связанные термины
Build tool и dev server для ESM-проектов. В курсе используется как прозрачная клиентская основа React с TypeScript.
Пример
Шаблон `react-ts` создаёт минимальный стенд, а `tsc --noEmit` остаётся отдельной проверкой типов.Связанные термины
Обязательная отдельная проверка TypeScript без генерации файлов, блокирующая сборку при нарушении статических контрактов.
Пример
CI запускает `tsc --noEmit` до тестов и production build.Связанные термины
Стабильный build-time оптимизирующий compiler React 1.0, автоматически добавляющий memoization на основе анализа data flow и правил React.
Пример
Новый код остаётся декларативным, а manual memo используется как измеренный escape hatch.Связанные термины
Инструмент измерения commits, стоимости render и причин обновлений React-дерева.
Пример
Profiler находит Provider value, обновляющий command-only consumers на каждый ввод.Связанные термины
Разделение JavaScript на асинхронно загружаемые chunks по маршрутам или редким возможностям для уменьшения initial path.
Пример
Тяжёлый редактор отчётов загружается через lazy только после открытия.Связанные термины
Автоматически проверяемый предел размера, задержки или Web Vitals, предотвращающий незаметный возврат регрессии.
Пример
CI отклоняет рост critical chunk, а field dashboard следит за p75 INP.Связанные термины
Короткий рабочий мост: модули, замыкания, неизменяемые преобразования, Promise, strict TypeScript, unknown, narrowing и discriminated unions.
Vite, структура проекта, строгий tsconfig, ESLint, React Compiler, зависимости, окружение и воспроизводимая сборка.
JSX как выражение, чистые функции-компоненты, props, children, списки, ключи и безопасная композиция.
Render и commit, снимки состояния, batching, идентичность дерева, StrictMode, reconciliation и конкурентный рендеринг.
Обработчики, useState, функциональные обновления, моделирование минимального состояния и устранение рассинхронизации.
Управляемые поля, FormData, валидация границ, action, useActionState, useFormStatus и оптимистичные изменения.
Композиция, slots, controlled/uncontrolled API, discriminated unions, polymorphism и устойчивые публичные контракты.
useReducer, разделение состояния и команд, Context, useSyncExternalStore и границы глобального состояния.
useEffect как синхронизация, зависимости, cleanup, refs, useEffectEvent, race conditions и отмена работы.
Контракты хуков, Rules of Hooks, инкапсуляция жизненного цикла, стабильность API и проверяемые адаптеры.
Загрузка данных вне Effects, Suspense, use, transitions, useDeferredValue, streaming и проектирование состояний ожидания.
React Router 7, вложенные маршруты, loaders, actions, pending UI, error boundaries и типизированные URL-контракты.
Server state и client state, cache ownership, optimistic concurrency, URL state, нормализация и выбор хранилища.
Vitest, Testing Library, user-event, MSW, Playwright, тестовые границы и устойчивые проверки поведения.
Семантический HTML, клавиатура, focus management, ARIA, сообщения об ошибках и автоматизированный аудит.
Каскад, CSS Modules, design tokens, варианты, headless-компоненты, темы, адаптивность и визуальные контракты.
Profiler, React Compiler 1.0, memoization, virtualization, code splitting, Web Vitals и доказуемая оптимизация.
XSS, опасный HTML, URL и DOM sinks, CSRF, токены, supply chain, CSP и недоверенные server actions.
CSR/SSR/SSG, детерминированный HTML, hydrateRoot, useId, streaming, selective hydration и диагностика расхождений.
Граница server/client, use client, use server, сериализация, Actions и практическая модель Next.js App Router.
Модульные границы, error boundaries, журналирование, telemetry, feature flags, i18n, CI/CD и эксплуатация фронтенда.
Fiber-модель без зависимости от деталей реализации, scheduler, классовые компоненты, миграция React 18→19 и senior code review.
На вкладке «Практика» доступно 22 задания и 3 итоговые работы для подтверждения уровня. Решение выполняется в своём Git-репозитории и отправляется ссылкой на конкретный коммит. Открыть практику курса.
После прохождения тем доступен зачёт по курсу «React с TypeScript: от интерфейса до production» — 20 случайных вопросов с порогом 80%. После зачёта открывается экзамен с развёрнутыми ответами и автоматической оценкой, приближённый к техническому собеседованию.
Да, курс полностью бесплатный: все 22 темы доступны без оплаты.