React + Redux - Профессиональная Разработка

Чтобы сделать этот курс максимально полезным, мне очень важно знать мнение первых учеников. А это невозможно сделать, не поделившись готовыми уроками уже сейчас. Этот курс снят на 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 приложения