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

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

React + Redux - Профессиональная Разработка
Цена
6509
Кэшбэк до 7.5%
18 часов18 часов
Бесплатное ознакомлениеБесплатное ознакомление
СертификатСертификат
РусскийРусский
Udemy
Купить с кэшбэком

Описание:

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