[loftschool] React.js. Разработка веб-приложений [2019]

[loftschool] React.js. Разработка веб-приложений [2019]

Курс включает в себя
​

Компонентный подход к разработке. Правильно разделяем код и UI.​

Жизненный цикл React компонент. От constructor до unmount.​

Состояние приложения с Redux. Actions, reducers, store, middlewares...​

Роутинг и авторизация на клиенте.​

Управление побочными эффектами на redux-saga.​

Построение, нормализация и валидация сложных форм на redux-form.​

Тестирование и автоматизация тестирования фронтенда.​

Набор полезных инструментов для легкой разработки на React.​

Учебная программа

Спойлер: Неделя 1 – Введение в React.js

Знакомство

• Знакомство с преподавателем
• Структура курса
• Как работает 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.js, роутинг

III React.js

• 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, Redux-saga

I Redux

• Хранение данных во внешних хранилищах
• История создания 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 – Redux-saga, тестирование

II Redux-saga

• Блокирующие и не блокирующие эффекты
• Эффект 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 – Формы, CI & DI & Client error handling

Работа с формами

• Общий 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-такси с помощью этого набора.​

​

Старт курса: 22.10.2019

Страница курса: