JavaScript-фреймворк React.js - дистанционный курс профессиональной переподготовки

Содержимое курса

Введение в React

Что такое React. Основные преимущества

00:00
Основы декларативного подхода

00:00
Возможности React, компоненты, состояние, применения

00:00
Экосистема React, основные библиотеки, из чего обычно состоит React-стек

00:00

Создание проекта

Typescript

Компоненты на примере новостной карточки Reddit

Hooks и функциональное программирование

Компоненты — продвинутые темы. Введение в тестирование компонентов

Работа с публичным API на примере Reddit

React Context

Портал и форма

Введение в Redux на примере поля для ввода комментария

Использование Redux-Thunk на примере загрузки профиля пользователя

Формы на примере комментариев и карточки поста

«Бесконечные» списки на примере ленты постов

Сайдбар + роутинг

SSR + NextJS

Бонусный модуль: Mobx

Оценки и отзывы студентов

Пока нет отзыва

Содержимое курса

Введение в React

Что такое React. Основные преимущества

Основы декларативного подхода

Возможности React, компоненты, состояние, применения

Экосистема React, основные библиотеки, из чего обычно состоит React-стек

Создание проекта

Конфигурация webpack на клиенте

Конфигурация webpack на сервере

Подключение к проекту HMR и SSR

Подключение Typescript

Подключение CSS modules, Jest, Enzyme

Typescript

Основы TypeScript. Типы

Работа с массивами

Работа с объектами и интерфейсами

Типизация функций и типы TS

Generics

Классы

Infer, typeof, keyof, Mapped Types

Компоненты на примере новостной карточки Reddit

Компоненты в React

Состояния в Class Components

Состояния в Functional Components

Создание Layout приложения. Часть 1

Создание Layout приложения. Часть 2

Создание компонента новостной карточки

Жизненный цикл компонента

Hooks и функциональное программирование

Каррирование и функции высшего порядка

Hooks в React

Map и Reduce в React

Создание компонента dropdown c использованием hooks

Compose, Pipe и их применение в React

Компоненты — продвинутые темы. Введение в тестирование компонентов

Адаптивные и неадаптивные компоненты. Mobile first и desktop first подходы

Создание Dropdown-меню с использованием state

Введение в unit-тесты и Jest

Написание тестов для React компонента. Enzyme vs Snapshots

Вспомогательные компоненты

Работа с публичным API на примере Reddit

Как работать с API

Регистрируем аккаунт разработчика на Reddit

OAuth2

Страница авторизации пользователя

Как структурировать API-запросы в приложении

React Context

Забираем из API данные пользователя

Отображаем данные пользователя в компоненте через prop

Используем React Context для работы с данными

Обновляем данные через контекст

Портал и форма

Верстаем карточку поста, используя ReactPortal

Ref и useRef React hook. Реализуем механизм click outside для скрытия модального окна

Controlled и uncontrolled компоненты на примере поля комментария

Сохраняем состояние формы, используя контекст

Введение в Redux на примере поля для ввода комментария

Введение в Redux

Устанавливаем Redux, подключаем его к приложению

Action + reducer

Presentation Components/Container Components

Использование Redux-Thunk на примере загрузки профиля пользователя

Работа с асинхронными запросами в Redux

Пишем простой logger middleware

Подключаем thunk к приложению. Пишем свой первый асинхронный action

Работа с асинхронным состоянием

Пишем простой loader

Формы на примере комментариев и карточки поста

Экскурс в формы. Проблематика форм React

Состояние полей. Различные подходы

Какие можно использовать библиотеки и почему они могут мешать

Сохраняем состояние формы, валидируем поля и выводим ошибки

Доступности, нативные элементов и возможности работать с формой через табуляцию

«Бесконечные» списки на примере ленты постов

Работа с запросами к API

Делаем загрузку ленты постов

Виды бесконечных скроллов и пагинаций

Делаем подгрузку ленты постов

Эффективный рендеринг больших списков

Сайдбар + роутинг