phone_picture

Цель курса

Рассмотреть решение главных задач, возникающих при создании Single Page Application, таких как построение архитектуры приложения, удобная обработка ошибок, создание ключевых хуков, упрощённый server side rendrering, работа с авторизацией и т.п.

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

Программа курса

Урок 1

  • Анализ SPA после React Level 1
  • Идеи пререндеринга и SSR
  • Идеи тестирования SPA
  • Влияние SSR и тестов на архитектуру
  • Борьба с синглтонами на уровне ES-модулей

Урок 2

  • Построение архитектуры приложения
  • Выделение ключевых сущностей
  • Внедрение зависимостей
  • Работа с React Context
  • Взаимодействие частей системы

Урок 3

  • Тотальная типизация SPA
  • TypeScript: простые и жёсткие примеры
  • Типизация компонентов и хуков
  • Типизация хранилища mobx
  • Типизация при работе с контекстом

Урок 4

  • Борьба с повторяющимся кодом
  • Создание ключевых хуков
  • Сущность API и хук useApiRequest
  • Создание компонента AsyncHelper
  • Children vs RenderProps

Урок 5

  • Удобная работа с формами
  • Создание хука useForm
  • Обработка ошибок 400 / 422
  • Улучшения для React Router
  • Типизированный именованный роутинг

Урок 6

  • Улучшение тренировочного SPA
  • Изучение серверного API
  • Работа с авторизацией
  • Создание модуля store auth
  • Создание закрытых страниц

Урок 7

  • Доработка функционала SPA
  • Демонстрация простого SSR
  • Реальный SSR и ошибки гидратации
  • Обзор типичных проблемы SPA
  • Синхронизация данных

Урок 8

  • Основы работы с vitest
  • jsdom + @testing-library/react
  • Тестирование компонентов
  • Тестирование хранилища
  • End 2 end тесты

Преподаватель курса

Дмитрий Лаврик

Профессиональный веб-разработчик

Опыт работы в сфере разработки сайтов более 10 лет. Ориентируется во всех вопросах создания сайтов, от вёрстки до backend-а.

Опытный преподаватель

Начиная с 2011 года, под его руководством тысячи учеников прошли путь от новичков до успешных веб-программистов. Если вы ещё не знакомы с Дмитрием, рекомендуем заглянуть на его youtube-канал, где вы найдете много полезных видео и сможете узнать стиль преподавания Дмитрия.

Дмитрий Лаврик

Что вы получите

Видеозаписи всех уроков

В хорошем качестве с возможностью скачать видео. Продолжительность каждого занятия около двух часов. На уроках разбираются домашние работы учеников и новый материал.

Материалы и исходники

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

Доступ в закрытую группу

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

Обзор курса

Внимание! Для прохождения данного курса необходимо уметь создавать простые SPA на React + любой router + любое хранилище + axios || fetch.

Если вы хотите ознакомиться с мыслями автора о курсе,

посмотрите видео, расположенное рядом

В нём подробно рассматривается программа курса, и даются рекомендации по необходимым начальным знаниям.

Онлайн потоки временно не проводятся

Доступно в формате видеозаписей

свежий поток - октябрь 2025

18 000 руб. 9 000 руб.

 
Способы оплаты

Часто задаваемые вопросы

Какой начальный уровень знаний необходим

Уровень программы базового курса React - умение создавать простейшие SPA, взаимодействовать с серверным api ( axios | fetch ) + основы TypeScript.

А что, если я совсем не знаю TypeScript

Для тех, кто не знает TypeScript, есть бесплатный вводный курс, который охватывает необходимый минимум для понимания TS-кода на курсе.

Почему Mobx, а не Redux

Мы берём самый простой и приятный store. А в итоговом SPA заменить его на Redux или Recoil будет совсем несложно.

Будем ли использовать новшества React 19

Частично. Например, use() в будущем может сильно помочь с SSR, а вот остальные новшества очень ситуативны.

Насколько подробно рассматриваем SSR

Сделаем простую демонстрационную сборку с use. В целом, нас интересует лишь влияние SSR на архитектуру. Полноценная реализация SSR была убрана из данной программы.

А где тогда освоить Server Side Rendering

Подробная и полная реализация SSR будет в отдельном курсе. Планирую запустить его весной 2026. Кстати, чтобы полноценно изучать SSR, нужен хотя бы минимальный уровень в темах backend на node.