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

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

Ознакомьтесь с программой курса «Основы React, React Router и Redux Toolkit» от PurpleSchool - purpleschool.ru

1. Введение. React и Redux, Как устроен курс, Обзор проектов, Проект домашних заданий, Обзор курсов, Работа на платформе, AI и тренажёры, Практика на проекте, Рекомендуемый курс.
2. Настройка окружения. Настройка окружения, Настройки VSCode, Установка Node.js, О работе NVM, Создание проекта.
3. Компоненты. Обзор проекта, Настройка eslint, Что такое компоненты, JSX, React Fragment, Декларативное описание, Создание первого компонента, Стилизация, Динамические данные, Props, Упражнение - Вывод даты, Композиция, Тест - Компоненты, Тренажёр - Компоненты,…
4. События и состояние. Обработка событий, Отрисовка компонент, useState, Декомпозиция на компоненты, Упражнение - Вёрстка layout, Работа с SVG, Работа с input, Управляемые контролы, Отправка формы, Stateful и Stateless, Особенности useState, Тест - События и со…
5. Отображение данных. Работа со списком данных, Упражнение - Добавление элементов, Key в списках, Отображение по условию, React Dev Tools, Отладка приложения, Тест - Отображение данных, Занятие - Отображение данных, Домашнее задание - Отображение данных.
6. Стилизация. Изменение стилей, Динамические классы, CSS модули, Библиотека classnames, Упражнение - стилизация формы, Тест - Стилизация, Занятие - Стилизация, Домашнее задание - Стилизация.
7. Другие hooks. Side Effects, useEffect, Зависимости эффекта, Очистка эффекта, useReducer, Использование useReducer, Упражнение - Очистка формы, Exhaustive-deps, useRef, forwardRef, Создание своего hook, Правила hooks, Тест - Другие hooks, Тренажёр - Другие hoo…
8. Контекст. Зачем нужен Context API, Создание контекста, useContext, Методы в контексте, Custom context, Упражнение - работа контекста, Ограничения контекста, Тест - Контекст, Тренажёр - Контекст, Занятие - Контекст, Домашнее задание - Контекст.
9. Работа React. Как работает React, Пример работы, Ререндер дочерних компонент, Memo, useCallback, Планировщик state, Batching, useMemo, Упражнение - Просмотр записи, Упражнение - Удаление записи, Тест - Работа React, Занятие - Работа React.
10. Переход на TypeScript. Вводное видео, Рекомендуемый курс, Обзор проекта, Создание проекта, Типизация компонент, Типизация hooks и событий, Подготовка стилей проекта, Упражнение - Создание кнопки и input, Тест - Переход на TypeScript, Тренажёр - Переход на Typ…
11. React Router. О роутинге, Создание роутов, createBrowserRouter, Link, Outlet, Упражнение - Создание Layout, useLocation, NavLink, Упражнение - Заголовок и поиск, Упражнение - Карточка товара, Роуты с параметрами, Тест - React Router, Занятие - React Router, Д…
12. Взаимодействие с сервером. Работа с Insomnia, Создание запросов, Подключение axios, Обработка загрузки, Обработка ошибок, loader, errorElement, lazy, Suspense, defer и Await, Тест - Взаимодействие с сервером, Занятие - Взаимодействие с сервером, Домашнее зада…
13. Авторизация. Создание layout входа, Упражнение - Форма логина, Получение токена, Работа JWT, Приватные Routes, Хранение в localstorage, Тест - Авторизация, Занятие - Авторизация, Домашнее задание - Авторизация.
14. Redux toolkit. Что такое Redux, Создание хранилища, Slice пользователя, Первый action, Хранение данных, Запросы в actions, Обработка ошибок, Упражнение - Профиль пользователя, Упражнение - Регистрация, Корзина товаров, Тест - Redux Toolkit, Занятие - Redux to…
15. Завершение проекта. Упражнение - Поиск товаров, Компонент корзины, Редактирование корзины, Упражнение - Хранение корзины, Расчёт суммы, Покупка товаров, Домашнее задание - Завершение проекта.

Чему вы научитесь

• Научитесь настраивать и организовывать: настройка окружения. настройка окружения, настройки vscode, установка node.js, о работе nvm, создание проекта.
• Научитесь создавать и применять: очистка формы, exhaustive deps, useref, forwardref, создание своего hook, правила hooks,…
• Освоите и сможете применять: добавление элементов, key в списках, отображение по условию, react dev tools, отладка приложения, тест.
• Освоите основы: введение. react и redux, как устроен курс, обзор проектов, проект домашних заданий, обзор курсов, работа на платформе, ai и тренажёры, практика на проекте, рекомендуемый курс.
• Научитесь создавать и применять: создание layout, uselocation, navlink, упражнение.