3
приложения в портфолио
YouTube SPA, COINCAP и HACKER NEWS. Нужная практика собрана в реальных проектах.
45+
заданий по React/RTK
Практика на каждую тему прежде чем переходить к следующей.
16
тем в программе
React, Redux, RTK, TanStack Query, TypeScript, роутинг, формы, оптимизация.
2
подхода к серверному стейту
Учишь RTK Thunk и TanStack Query. Оба подхода встретятся в реальных проектах.
FSD vs Modules
архитектура с первого проекта
Разбираем модульную структуру и Feature Sliced Design. Понимаешь, когда применять каждый подход.
~5 мес
при 3-5 ч в день
Двигаешься в своём темпе без жёсткого расписания.
Для кого этот модуль
Одно решение для трёх ситуаций
⚛
Знаю JS. Хочу работу
Прошёл JavaScript или знаешь основы. Пора строить настоящие SPA и наполнять портфолио реальными проектами.
📺
Завис на туториалах
Смотрел React на YouTube, что-то собирал – но не с кем обговорить, не с кем полайвкодить, нет ревью и понимания.
🎯
Нужен React для работы
Готовишься к первому офферу во Front-end. React и TypeScript входят в базу большинства собеседований.
Программа модуля
Нажми и посмотри, что внутри каждой темы
▶Start
React / Redux / RTK + TypeScript
↑#1 React – Основы
React: что этоС чего начатьWebpack VS ViteСтруктура проекта. Modules VS FSDVirtualDOM. Reconciliation. FiberComponentsPropsStateLifeCycle
#2 React – Углублённо
Events и их методыkey, Fragment, refs, StrictModeОптимизация: memo, lazy, useCallback, SuspenseContext (useContext)HOCРоутинг в Reactreact-hook-form VS formikStorage: Local, Session, LocalForageХуки: useId, useReducer, useTransition, useOptimistic⚡ Live coding
#3 Redux
FluxReact-Redux: actions, reducers, storeMiddleware (Redux Thunk)
#4 RTK
Redux ToolkitcreateAsyncThunkQuery & Mutation
#5 TanStack Query
Что такое TanStack Query и зачемuseQuery: загрузка данныхuseMutation: изменение данныхКэширование и инвалидацияPagination и Infinite ScrollRTK Query vs TanStack Query
#6 TypeScript – Основы
TypeScript: что этоНастройка окруженияТипы данныхПримитивыОбъектыМассивыФункции
#7 TypeScript – Продвинутый
any, unknown, never, voidОбъединение (|) и пересечение (&) типовПеречисления (enum)Tuple (кортеж)Динамические свойстваУтилитные типы: Partial, Required, Omit...Дженерики в функциях
#8 React + TypeScript
FC and PropsStateEventsuseRef
#9 Redux + TypeScript
Store: типизированный хук useAppSelectorТипизация ReducersТипизация ActionsТипизация Thunk
#10 RTK + TypeScript
Типизация createAsyncThunkТипизация store, slice, reducersТипизация API, response, request, axios
#11 Приложения
YouTube SPA (созвон)COINCAPHACKER NEWS
⚡ Live coding
Пишешь реальный функционал приложения вживуюРазбор ошибок и паттернов
🏁 Финал
Тех. собес по React / RTK / TypeScript
✓Front-end Developer
Что сможешь после
Конкретные навыки, а не абстрактное "понимание React"
✓Строить SPA с нуля на React + TypeScript
✓Управлять состоянием через Redux Toolkit
✓Делать запросы к API через RTK Query
✓Типизировать компоненты, props и store
✓Написать 6 приложений (4 идут в резюме)
✓Работать с роутингом, формами, Context
✓Пройти технический собес по React/RTK
✓Читать и понимать чужой React-код
Куда дальше после модуля
После React открываются два пути