Основы React, React Router и Redux Toolkit

• React и Redux
• Как устроен курс
• Обзор проектов
• Проект домашних заданий
• Обзор курсов
• Работа на платформе
• AI и тренажёры
• Практика на проекте
• Рекомендуемый курс

• Настройка окружения
• Настройки VSCode
• Рекомендуемый курс
• Установка Node.js
• О работе NVM
• Создание проекта

• Обзор проекта
• Настройка eslint
• Что такое компоненты
• JSX
• React Fragment
• Декларативное описание
• Создание первого компонента
• Стилизация
• Динамические данные
• Props
• Упражнение — Вывод даты
• Композиция
• Тест — Компоненты
• Тренажёр — Компоненты
• Занятие — Компоненты
• Домашнее задание AI
• Работа с gitflow
• Домашнее задание — Компоненты

• Обработка событий
• Отрисовка компонент
• useState
• Декомпозиция на компоненты
• Упражнение — Вёрстка layout
• Работа с SVG
• Работа с input
• Управляемые контролы
• Отправка формы
• Stateful и Stateless
• Особенности useState
• Тест — События и состояние
• Тренажёр — События и состояние
• Занятие — События и состояние
• Домашнее задание — События и состояние

• Работа со списком данных
• Упражнение — Добавление элементов
• Key в списках
• Отображение по условию
• React Dev Tools
• Отладка приложения
• Тест — Отображение данных
• Занятие — Отображение данных
• Домашнее задание — Отображение данных

• Изменение стилей
• Динамические классы
• CSS модули
• Библиотека classnames
• Упражнение — стилизация формы
• Тест — Стилизация
• Занятие — Стилизация
• Домашнее задание — Стилизация

• Side Effects
• useEffect
• Зависимости эффекта
• Очистка эффекта
• useReducer
• Использование useReducer
• Упражнение — Очистка формы
• Exhaustive-deps
• useRef
• forwardRef
• Создание своего hook
• Правила hooks
• Тест — Другие hooks
• Тренажёр — Другие hooks
• Занятие — Другие hooks
• Домашнее задание — Другие hooks

• Зачем нужен Context API
• Создание контекста
• useContext
• Методы в контексте
• Custom context
• Упражнение — работа контекста
• Ограничения контекста
• Тест — Контекст
• Тренажёр — Контекст
• Занятие — Контекст
• Домашнее задание — Контекст

• Как работает React
• Пример работы
• Ререндер дочерних компонент
• Memo
• useCallback
• Планировщик state
• Batching
• useMemo
• Упражнение — Просмотр записи
• Упражнение — Удаление записи
• Тест — Работа React
• Занятие — Работа React

• Вводное видео
• Рекомендуемый курс
• Обзор проекта
• Создание проекта
• Типизация компонент
• Типизация hooks и событий
• Подготовка стилей проекта
• Упражнение — Создание кнопки и input
• Тест — Переход на TypeScript
• Тренажёр — Переход на TypeScript
• Занятие — Переход на TypeScript
• Домашнее задание — Переход на TypeScript

• О роутинге
• Создание роутов
• createBrowserRouter
• Link
• Outlet
• Упражнение — Создание Layout
• useLocation
• NavLink
• Упражнение — Заголовок и поиск
• Упражнение — Карточка товара
• Роуты с параметрами
• Тест — React Router
• Занятие — React Router
• Домашнее задание — React Router

• Работа с Insomnia
• Создание запросов
• Подключение axios
• Обработка загрузки
• Обработка ошибок
• loader
• errorElement
• lazy
• Suspense
• defer и Await
• Тест — Взаимодействие с сервером
• Занятие — Взаимодействие с сервером
• Домашнее задание — Взаимодействие с сервером

• Создание layout входа
• Упражнение — Форма логина
• Получение токена
• Работа JWT
• Приватные Routes
• Хранение в localstorage
• Тест — Авторизация
• Занятие — Авторизация
• Домашнее задание — Авторизация

• Что такое Redux
• Создание хранилища
• Slice пользователя
• Первый action
• Хранение данных
• Запросы в actions
• Обработка ошибок
• Упражнение — Профиль пользователя
• Упражнение — Регистрация
• Корзина товаров
• Тест — Redux Toolkit
• Занятие — Redux toolkit
• Домашнее задание — Redux Toolkit

• Упражнение — Поиск товаров
• Компонент корзины
• Редактирование корзины
• Упражнение — Хранение корзины
• Расчёт суммы
• Покупка товаров
• Домашнее задание — Завершение проекта

• Куда дальше?
• Собеседование с AI наставником
• Финальное тестирование
• Рекомендуемый курс
• Практика собеседования с AI

• Основы Scrum
• Старт задачи
• Выполнение задачи
• Код ревью
• Обзор проекта
• Старт командного проекта

Сертификат