• ​
  Курс включает в себя
  Компонентный подход к разработке. Правильно разделяем код и UI.
  
  Жизненный цикл React компонент. От constructor до unmount.
  
  Состояние приложения с Redux. Actions, reducers, store, middlewares...
  
  Роутинг и авторизация на клиенте.
  
  Управление побочными эффектами на redux-saga.
  
  Построение, нормализация и валидация сложных форм на redux-form.
  
  Тестирование и автоматизация тестирования фронтенда.
  
  Набор полезных инструментов для легкой разработки на React.
  
  Учебная программа
• Спойлер: неделя-1

  • • Знакомство с преподавателем
    • Структура курса
    • Как работает create-react-app
    • Как работает новый es
    • Как сдавать домашние работы
    • Автоматические тесты в домашних работах
    • Cypress тесты в домашних работах
    • Что делать если вы застряли?

  I React.js
  
  

  • 
    
    
    • Как работает react.js
    • Что такое JSX и Virtual DOM
    • Компонентный подход React.js
    • Передача детей компонетнам
    • Передача данных через props
    • Обработка событий
    • Условный рендер
    • Списки и keys
    • Хранение данных в state
    • Плагин react-devtools для chrome

  II React.js
  
  

  • 
    
    
    • Lifecycle методы компонент
    • Разница между Component, PureComponent и stateless component
    • Способы работы со state
    • Формы
    • Контролируемые формы, поднятие данных в state
    • Synthetic Events
    • Обработка ошибок во время рендера
    • Невидимые теги — Fragments

  Практика
• Спойлер: неделя-2

  • • React Context API
    • Работа с реальным DOM с помощью Ref
    • Portals
    • Тонкая работа с children
    • Reconcilation, процесс обновления реального dom
    • Типизация компонент с prop types
    • Компоненты, элементы и экземпляры класса компонент

  IV React.js
  
  

  • 
    
    
    • Паттерн high order components
    • Паттерн Render Props
    • Библиотека Recompose
    • Ref forwarding
    • StrickMode. Работа со старыми библиотеками
    • Производительность приложения

  Роутинг в браузере
  
  

  • 
    
    
    • Как работает history API
    • Библиотека react-router-dom
    • Простой роутинг с помощью Route и Link
    • Редиректы и страница 404 с помощью Switch и Redirect
    • Роутинг на вложенных страницах
    • Создание приватных страниц и доступ к ним с помощью PrivateRoute

  Практика
• Спойлер: неделя-3

  • • Хранение данных во внешних хранилищах
    • История создания redux
    • Создание хранилища store
    • Определение структуры хранилища с помощью редьюсеров
    • Отправка сообщений с помощью экшенов
    • ActionCreators. Функции для создания экшенов
    • Flux standard action — стандарт структуры экшенов
    • Создание вложенных редьюсеров с помощью combine-reducers
    • Библиотека react-redux для подключения redux к react
    • Плагин для chrome — redux-devtools. Логирование экшенов и состояния приложения

  II Redux
  
  

  • 
    
    
    • Расширение поведения redux с помощью middlewares
    • Архитектура middlewares
    • Асинхронный поток данных с redux. Три экшена для контроля асинхронных действий
    • Написание своих middlewares
    • Методология redux-ducks, модули вокруг фич проекта
    • Библиотека redux-actions, укращение многословности redux
    • Селекторы — единственный способ обращения к стейту
    • Библиотека reselect для мемоизации данных

  I Redux-saga
  
  

  • 
    
    
    • Побочные эффекты и управление ими
    • Простая библиотека redux-thunk для работы с асинхронными действиями
    • Мощное решение для работы с побочными эффектами — redux-saga
    • Описание сценариев с помощью генераторов
    • Эффекты takeEvery и takeLatest для реагирования на экшены
    • Отправка экшенов с помощью put и получение стейта с помощью select
    • Вызов внешних функций с помощью call
    • Полноценная обработка асинхронных запросов с помощью try catch

  Практика
• Спойлер: неделя-4

  • • Блокирующие и не блокирующие эффекты
    • Эффект take для ожидания конкретного экшена
    • Отмена сценариев
    • Вечные сценарии, работающие в фоне
    • Сценарий авторизации пользователей
    • Сценарий отправки сетевого запроса с задержкой
    • Бизнес логика на генераторах

  Тестирование
  
  

  • 
    
    
    • Как и где запускаются тесты
    • TDD методология
    • Тестраннер jest и его API
    • Snapshot тестирование
    • Библиотека enzyme для тестирования react компонент
    • Подключение компоненты к тесту с помощью shallow и mount
    • Статический рендер и cheerio API
    • Тестирование роутинга, redux, connected компонент и саг

  Работа со стилями
  
  

  • 
    
    
    • Разные подходы к стилям
    • Styled-components, стили рядом с js
    • Sass с помощью сторонних библиотек
    • Подход css-modules в create-react-app версии 2.0
    • Организация имен классов с библиотекой classnames
    • Библиотека bem-cn, для генерации имен по методологии yandex.bem
    • Организация анимаций с css-transition-group

  Практика
• Спойлер: неделя-5

  • • Общий API для работы с элементами форм
    • Работа с формой через redux вместе с redux-form
    • Обзор и API react-final-form
    • Обзор и API formik
    • Сценарий асинхронной и синхронной валидации формы

  CI & DI & Client error handling
  
  

  • 
    
    
    • Что такое continuous integration и delivery integration
    • Обзор сервиса travis-ci для запуска сценариев ci
    • API сервиса travis-ci
    • Обзор сервиса heroku для размещения приложения
    • Обзор сервиса now для размещения приложения
    • Rollbar: обзор сервиса для хранения логов об ошибках
    • Отправка ошибок, экшенов и стейта в rollbar

  Набор полезных библиотек для разработки
  
  

  • 
    
    
    • Компонентная разработка вместе с react-storybook
    • Функциональный javascript вместе с ramda.js
    • Аxios.js: удобный инструмент для работы с сетью
    • Quokka.js. Repl прямо в вашем редакторе кода
    • Typescript. Статическая типизация проектов

  Практика
• Спойлер: неделя-6

  • Строим планы на будущее.

  • Подводим итоги.

Спойлер: выпускной проект

Во время первой половины курса мы займемся созданием дизайн системы: изучим React.js с помощью написания компонент от простых до сложных, а вторую половину занятий посвятим созданию приложения Loft-такси с помощью этого набора.