Курс React и Redux

Мова викладання в курсі — російська. Незабаром буде доступна українська версія цього курсу.

Видеозаписи лекций без обратной связи и участия преподавателя. Вы получите доступ к материалам сразу после оплаты.

Практическая разработка коммерческих React приложений

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

— Использовать React для создания современных front-end приложений
— Использовать Redux для управления состоянием приложения
— Использовать REST API для доступа к данным на сервере
— Использовать Jest для юнит-тестирования и WebPack для упаковки приложения

Требования

Необходимо понимание основ JavaScript, CSS и HTML

Описание

Курс создан на основе React 16.4 и затрагивает последние нововведения в экосистеме React.

Курс содержит подробное руководство по новому синтаксису JavaScript вплоть до ECMAScript 2019.

React — самая популярная библиотека для разработки веб-приложений и один из самых востребованных навыков для JavaScript разработчика в 2018 году.

Фокус этого курса — практическая разработка приложений на React. Это означает, что мы рассмотрим не только эффективное использование самого React, но и целую экосистему инструментов и библиотек, которые необходимы для создания полноценного UI приложения.

Разрабатывая реальные приложения мы изучим самые важные инструменты в экосистеме React:

— React
— Redux
— React Router
— Jest
— Webpack и Babel

Поскольку ни одно UI приложение не может работать без сервера примеры из этого курса работают с реальными REST API и могут использоваться, как основа для вашего собственного проекта! А чтобы еще больше приблизить наши примеры к коммерческим продуктам, мы детально рассмотрим юнит тестирование, и эффективную упаковку при помощи WebPack.

Этот видео-курс построен на основании оффлайн курсов, проводимых автором для подготовки профессиональных JavaScript разработчиков. Его задача — дать все необходимые практические навыки для работы в команде или для самостоятельной разработки React приложений коммерческого уровня.

Для кого этот курс:

Разработчики, которые хотят освоить React на профессиональном уровне

Материалы курса

Все 157 лекций 19:26:34
–
Введение — 38:02
Об этом курсе — 04:19
Что такое React — 05:21
Первое React приложение — 10:20
Настройка среды разработки — 06:17
Как скачать код примеров — 05:41
Современный JavaScript и его версии — 06:04
–
ECMAScript 2019 — 01:55:32
Введение — как использовать этот раздел — 02:49
Ключевые слова let и const — 06:10
Arrow-функции — 11:44
Параметры по-умолчанию — 05:39
Rest параметр — 04:14
Spread оператор для массивов — 04:17
Деструктуризация объектов — 12:54
Деструктуризация массивов — 09:26
Шаблонные строки (template strings) — 04:32
Объекты — 07:36
Оператор Object Spread — 03:48
Прототипы — 14:19
Классы — 09:17
Свойства классов (class properties) — 07:19
Модули в JavaScript — 11:28
–
Основы React — 01:49:39
Каким будет наш первый проект — 05:00
Создаём пустой React проект — 08:08
React элементы — 11:05
React компоненты — 06:31
JSX — 14:19
Упражнение — Code Review 1 — 04:19
Структура React проекта (часть 1) — 08:51
Props — свойства компонентов — 07:21
Массивы, как свойства компонентов — 10:31
Коллекции и ключи — 10:49
Как импортировать css — 14:36
Структура React проекта — часть 2 — 08:09
–
Состояние компонентов и обработка событий — 01:46:28
Компоненты-классы — 07:59
Обработка событий — 11:36
State — состояние React компонента — 05:35
Как работает setState() — 04:31
Обновление состояние, зависящее от предыдущего состояния — 05:25
Собственные события — 07:42
setState() — удаление элемента — 11:37
setState() — добавление элемента — 14:41
Данные в React приложении — 07:56
setState() — редактирование элементов — 15:45
Работа с формами — 09:30
Контролируемые компоненты — 04:11
–
Заканчиваем Todo App — 4:08
Как использовать этот раздел — 01:53
Реализуем поиск — 09:08
Реализуем фильтры — 13:07
–
Работа с сервером — 01:24:33
Каким будет наш следующий проект — 03:02
Создаём пустой проект — 05:15
Выбор HTTP API для браузера — 03:27
Как работает Fetch API — 05:50
Обработка ошибок в Fetch API — 04:15
Создаём клиент для API — 07:20
Создаём компоненты StarDB — 06:50
Компонент, который получает данные из API — 09:47
Трансформация данных API — 11:27
Создаём индикатор загрузки — 04:20
Логика индикатора загрузки — 08:38
Обработка ошибок сети в компоненте — 08:58
Работа с API — выводы — 05:24
–
Жизненный цикл компонентов — 55:51
Зачем компонентам «жизненный цикл»? — 07:06
Методы жизненного цикла — 05:59
componentDidMount() — 02:38
Используем на практике componentDidMount() — 08:02
componentDidUpdate() — 02:07
Используем на практике componentDidUpdate() — 07:50
componentWillUnmount() — 02:19
componentDidCatch() — 10:40
Используем componentDidCatch() на практике — 09:10
–
Паттерны React — 03:14:36
Паттерны React — введение — 04:06
Использование функций — 09:21
Render-функции — 07:14
Свойства-элементы — 06:55
Children — 08:44
Практика — рефакторинг компонента — 09:15
Работа с props.children — 09:42
Клонирование элементов — 05:16
Компоненты высшего порядка (HOC) — 12:50
Рефакторинг компонентов — 12:10
Композиция компонентов высшего порядка — 08:31
Контекст — 06:33
Использование Context API — 09:46
Использование HOC для работы с контекстом — 07:03
Трансформация props в компонентах высшего порядка — 12:25
Обновление контекста — 12:52
Рефакторинг: делаем код чище — 10:19
Рефакторинг компонентов высшего порядка (опциональный урок) — 07:35
Функция compose() (опциональный урок)) — 11:23
Свойство defaultProps — 06:13
Свойство propTypes — 04:59
NPM — установка дополнительных пакетов — 03:57
Библиотеки prop-types — 07:27
–
React Router — 01:03:22
Что такое роутинг04:54
Основы react-router04:53
Link — 03:00
Как работает Route — 05:29
Динамические пути — 07:05
withRouter — 06:34
Относительные пути — 04:58
Опциональные параметры — 08:02
Авторизация и «закрытые» страницы — 11:12
Switch (обработка несуществующих адресов) — 07:15
–
Redux — 01:27:11
Введение в Redux — 10:14
Установка библиотек — 03:32
Reducer — 07:03
Redux Store — 04:27
Чистые функции — 06:03
UI для Redux — 05:21
Действия с параметрами — 03:42
Action Creator — 03:42
Структура проекта — 01:58
bindActionCreators() — 08:49
Использование React и Redux — 08:47
react-redux и функция connect() — 11:02
Функция mapDispatchToProps() — 08:04
mapDispatchToProps в виде объекта — 04:27

Разработка Redux приложения 25 лекций — 03:26:20
Наш следующий проект — 02:29
Инициализация проекта — 03:33
Структура react redux проекта — 05:28
Вспомогательные компоненты — 09:33
Redux компоненты — 06:43
Каркасc React-Redux приложения — 08:00
Роутинг — 10:57
Чтение данных из Redux Store04:37
Отправка действий в Redux Store (action dispatch) — 12:03
Стили (опциональное видео) — 09:37
Работа с асинхронными данными — 07:48
Отличия setState() и reducer — 07:01
Обработка ошибок — 07:44
mapDispatchToProps: аргумент ownProps — 07:06
Naming Convention для действий — 04:20
Компоненты-контейнеры — 03:39
Подключение нового компонента к Redux — 10:32
Redux: добавление элементов в массив — 10:06
Redux: обновление элементов в массиве — 13:42
Redux: удаление элементов из массива — 12:16
Организация кода reducer’а — 12:53
Store Enhancers — 11:45
Middleware — 09:50
Thunk — 11:40
Следующие шаги — 02:58

Сборка React приложений — Babel 12 лекций — 01:04:09

Сборка React приложения — 03:08
Создаём новый проект — 06:03
Установка Babel — 04:35
Плагины Babel — 06:08
Конфигурация Babel (.babelrc) — 04:19
Babel Presets — 06:54
Оптимизация сборки для конкретных браузеров — 09:09
Динамический выбор браузеров (browserslist) — 05:54
Файлы конфигурации browserslis — 04:30
Polyfills — 07:32
Работа с JSX — 03:26
Организация зависимостей — 02:31

Сборка React приложений — WebPack 3 лекции — 16:43

Что такое WebPack — 04:43
Установка WebPack — 07:30
Файл конфигурации WepPack — 04:30