Чему вы научитесь
- Строить SPA на React с маршрутизацией, layout-структурой и защитой приватных страниц
- Работать с серверным API через axios и TanStack Query
- Реализовывать регистрацию, вход, выход и хранение сессии пользователя.
- Создавать каталог товаров с пагинацией, карточками, страницей товара и загрузкой изображений
- Делать поиск и фильтрацию товаров по тексту, категории и цене
- Собрать личный кабинет пользователя со сменой пароля и историей действий
- Проектировать интерфейс для поддержки: список обращений, переписку, создание новых тикетов, отметку прочитанного и закрытие диалогов
- Реализовывать админские сценарии: управление пользователями, товарами и обращениями
- Использовать формы, валидацию и модальные окна для удобных пользовательских сценариев
- Организовывать код по сущностям, фичам, виджетам и страницам, чтобы проект было проще масштабировать
О курсе
Этот курс помогает пошагово собрать полноценный клиент для сервиса с товарами и поддержкой пользователей. В проекте есть публичная часть с каталогом и страницей товара, авторизация и регистрация, личный кабинет, раздел «Мои товары», поиск и фильтры, а также отдельная административная зона.
Курс полезен тем, что показывает не только отдельные приёмы React, но и логику настоящего продукта: роли пользователей, работу с REST API, состояние загрузки и ошибок, управление формами, модальные сценарии, список-деталь, фильтрацию, пагинацию и обновление данных после действий пользователя.
После прохождения курса у учащегося остаётся законченный проект, который можно использовать как основу для портфолио и как шаблон для дальнейшей разработки похожих клиентских приложений.
Формат обучения сочетает:
- скринкасты с пошаговой разработкой проекта;
- текстовые лекции после каждого урока;
- проверочные тесты;
- отдельное техническое задание для самостоятельной работы;
- персональную проверку в формате код-ревью
Для кого этот курс
Начальные требования
- Базовое понимание JavaScript/TypeScript или основ программирования на любом ЯП
- Знакомство с HTML и CSS
- Желательно уметь читать TypeScript-код, но глубокая экспертиза не требуется
- Полезно знать основы React: компоненты, props, state, hooks
- Желательно понимать, что такое REST API и запросы
Наши преподаватели
Как проходит обучение
Курс построен по практическому принципу: сначала вы смотрите скринкаст с пошаговой реализацией, затем читает текстовую лекцию по этому же блоку, после чего закрепляет материал тестом и пишете код
Внутри курса:
- поэтапная сборка проекта;
- реализация экранов и компонентов;
- работа с формами, запросами и состоянием;
- настройка роутинга и защиты маршрутов;
- обработка загрузки, ошибок и пустых состояний;
- самостоятельные задания с отдельным техническим заданием;
- сдача задания на персональную проверку через code review.
Программа курса
Что вы получаете
- Практический опыт разработки современного frontend-приложения.
- Навык работы с реальными пользовательскими сценариями: каталог, профиль, поддержка, админ-панель.
- Понимание, как связывать React-приложение с API и организовывать клиентскую архитектуру.
- Опыт разработки форм, фильтров, модальных окон, списков, деталей и CRUD-сценариев.
- Проект, который можно доработать и добавить в портфолио.
- Проверку самостоятельной работы и обратную связь в формате код-ревью.
- Материал, который закрепляет теорию практикой и помогает перейти от отдельных компонентов к цельному продукту.
- В курсе вы поработаете с React, TypeScript и Vite, научитесь использовать React Router для маршрутизации, TanStack Query для работы с серверным состоянием, Axios для HTTP-запросов, React Hook Form и Zod для форм и валидации, а также Bootstrap и React-Bootstrap для интерфейса. Дополнительно в проекте используется react-hot-toast для уведомлений, поэтому курс охватывает и прикладную работу с пользовательским UX на уровне готового продукта.