React + Redux - Профессиональная Разработка
Практическая разработка коммерческих React приложений


Описание:
Чтобы сделать этот курс максимально полезным, мне очень важно знать мнение первых учеников. А это невозможно сделать, не поделившись готовыми уроками уже сейчас. Этот курс снят на 97% (это означает, что две последних главы ещё не добавлены в курс). Это главы по WebPack и Jest.
Курс создан на основе 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
- Первое React приложение
- Настройка среды разработки
- Как скачать код примеров
- Современный JavaScript и его версии
ECMAScript 2019
- Введение - как использовать этот раздел
- Ключевые слова let и const
- Arrow-функции
- Параметры по-умолчанию
- Rest параметр
- Spread оператор для массивов
- Деструктуризация объектов
- Деструктуризация массивов
- Шаблонные строки (template strings)
- Объекты
- Оператор Object Spread
- Прототипы
- Предварительный просмотр
- Классы
- Свойства классов (class properties)
- Модули в JavaScript
Основы React
- Каким будет наш первый проект
- Создаём пустой React проект
- React элементы
- React компоненты
- JSX
- Упражнение - Code Review 1
- Структура React проекта (часть 1)
- Props - свойства компонентов
- Массивы, как свойства компонентов
- Коллекции и ключи
- Как импортировать css
- Структура React проекта - часть 2
Состояние компонентов и обработка событий
- Компоненты-классы
- Обработка событий
- State - состояние React компонента
- Как работает setState()
- Обновление состояние, зависящее от предыдущего состояния
- Собственные события
- setState() - удаление элемента
- setState() - добавление элемента
- Данные в React приложении
- setState() - редактирование элементов
- Работа с формами
- Контролируемые компоненты
Заканчиваем Todo App
- Как использовать этот раздел
- Реализуем поиск
- Реализуем фильтры
Работа с сервером
- Каким будет наш следующий проект
- Создаём пустой проект
- Выбор HTTP API для браузера
- Как работает Fetch API
- Обработка ошибок в Fetch API
- Создаём клиент для API
- Создаём компоненты StarDB
- Компонент, который получает данные из API
- Трансформация данных API
- Создаём индикатор загрузки
- Логика индикатора загрузки
- Обработка ошибок сети в компоненте
- Работа с API - выводы
- Жизненный цикл компонентов
- Зачем компонентам "жизненный цикл"?
- Методы жизненного цикла
- componentDidMount()
- Используем на практике componentDidMount()
- componentDidUpdate()
- Используем на практике componentDidUpdate()
- componentWillUnmount()
- componentDidCatch()
- Используем componentDidCatch() на практике
Паттерны React
- Паттерны React - введение
- Использование функций
- Render-функции
- Свойства-элементы
- Children
- Практика - рефакторинг компонента
- Работа с props.children
- Клонирование элементов
- Компоненты высшего порядка (HOC)
- Рефакторинг компонентов
- Композиция компонентов высшего порядка
- Контекст
- Использование Context API
- Использование HOC для работы с контекстом
- Трансформация props в компонентах высшего порядка
- Обновление контекста
- Рефакторинг: делаем код чище
- Рефакторинг компонентов высшего порядка (опциональный урок)
- Функция compose() (опциональный урок))
- Свойство defaultProps
- Свойство propTypes
- NPM - установка дополнительных пакетов
- Библиотеки prop-types
React Router
- Что такое роутинг
- Основы react-router
- Link
- Как работает Route
- Динамические пути
- withRouter
- Относительные пути
- Опциональные параметры
- Авторизация и "закрытые" страницы
- Switch (обработка несуществующих адресов)
Redux
- Введение в Redux
- Установка библиотек
- Reducer
- Redux Store
- Чистые функции
- UI для Redux
- Действия с параметрами
- Action Creator
- Структура проекта
- bindActionCreators()
- Использование React и Redux
- react-redux и функция connect()
- Функция mapDispatchToProps()
- mapDispatchToProps в виде объекта
Разработка Redux приложения
- Наш следующий проект
- Инициализация проекта
- Структура react+redux проекта
- Вспомогательные компоненты
- Redux компоненты
- Каркасc React-Redux приложения
- Роутинг
- Чтение данных из Redux Store
- Отправка действий в Redux Store (action dispatch)
- Стили (опциональное видео)
- Работа с асинхронными данными
- Отличия setState() и reducer
- Обработка ошибок
- mapDispatchToProps: аргумент ownProps
- Naming Convention для действий
- Компоненты-контейнеры
- Подключение нового компонента к Redux
- Redux: добавление элементов в массив
- Redux: обновление элементов в массиве
- Redux: удаление элементов из массива
- Организация кода reducer'а
- Store Enhancers
- Middleware
- Thunk
- Следующие шаги
- WebPack и Babel
- Сборка React приложения