Курс 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