JavaScript-фреймворк React.js
Освойте с нуля востребованную ИТ-профессию!
Курсы профессиональной переподготовки для специалистов, уже имеющих высшее образование.
Курсы повышения квалификации для специалистов, уже имеющих высшее образование по направлению IT.
Содержание курса
Введение в 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
-
Делаем загрузку ленты постов
-
Виды бесконечных скроллов и пагинаций
-
Делаем подгрузку ленты постов
-
Эффективный рендеринг больших списков
Сайдбар + роутинг
-
Создаем сайдбар, используя более продвинутые практики
-
Роутинг в SPA и в React
-
Подключаем React Router
-
Подключаем новостную ленту к роутеру
-
Дополнительный функционал роутинга
SSR + NextJS
-
Серверный и статический рендеринг. Изоморфные приложения
-
Делаем серверный рендеринг, используя express
-
NextJS
-
Переносим приложение на Next
-
Деплой приложения в Zeit
Бонусный модуль: Mobx
Рейтинги и отзывы студента
Отзывов пока нет
