Курс: React.js. Разработка веб-приложений (комплексная программа)

Продолжительность курса: 40 ак. ч.

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

После изучения курса слушатель будет уметь:
• Разрабатывать полноценные приложения на стеке React.js React.js является лишь представлением данных. Для полноценной работы приложения мы изучим, как хранить данные, общаться с сервером и следить за «свежестью» данных на клиентской стороне
• Оптимизировать React.js приложения. Прежде чем оптимизировать, мы научимся понимать, когда нам нужно заниматься этим, и как верно выбрать места, нуждающиеся в оптимизации. Мы научимся пользоваться современными инструментами google chrome и с их помощью находить кандидатов на оптимизацию
• Правильно разделять работу с данными и представлением. Узнав, какие абстракции используют разработчики известных библиотек, вы сможете улучшить свои приложения, используя такие же приёмы. Строго отделив представление от данных, вы научитесь рендерить React-приложения как на стороне клиента, так и на стороне сервера, делать time travel debug и использовать приёмы оптимистичных интерфейсов
• Применять лучшие практики по управлению потока ваших данных. С данными вашего приложения нужно работать очень аккуратно, неправильные данные могут вызвать ошибку в правильно работающем коде. Вы научитесь нормализовать данные, писать абстракции, работающие со всеми типами данных, организовывать общение ваших компонентов
• Тестировать все части вашего фронтенд-приложения. Современные приложения содержат тысячи строк кода и, чтобы быть уверенным в том, что все работает как надо, вы научитесь тестировать каждую часть вашего приложения, автоматизировать тестирование и наслаждаться стабильностью работы вашего приложения
• Выбирать правильные инструменты для вашего стартапа. Существует множество библиотек, которые позволяют не писать код «с нуля», а использовать чужие наработки, будучи уверенными, что там всё протестировано и проверено. Нам предстоит изучить не только стек React-приложений, но и самые популярные библиотеки, которые могут пригодиться в разработке больших приложений

Программа курса:
Модуль 1. Введение в React.js
1. Знакомство
• Рассказ о структуре курса
• Рассказ о работе с наставниками
• Как работает eslint
• Как работает prettier
• Как запускать проект на create-react-app
• Yarn
• Работа c github
2. I React.js
• Как работает react.js
• Что такое JSX и Virtual DOM
• Компонентный подход React.js
• Передача детей компонетнам
• Передача данных через props
• Обработка событий
• Условный рендер
• Списки и keys
• Хранение данных в state
• Плагин react-devtools для chrome
3. II React.js
• Lifecycle методы компонент
• Разница между Compoent, PureComponent и stateless component
• Способы работы со state
• Формы
• Контролируемые формы, поднятие данных в state
• Synthetic Events
• Обработка ошибок во время рендера
• Невидимые теги — Fragments

Модуль 2. Паттерны React.js, роутинг
1. III React.js
• React Context API
• Работа с реальным DOM с помощью Ref
• Portals
• Тонкая работа с children
• Reconcilation, процесс обновления реального dom
• Типизация компонент с prop types
• Компоненты, элементы и экземпляры класса компонент
2. IV React.js
• Паттерн high order components
• Паттерн Render Props
• Библиотека Recompose
• Ref forwarding
• StrickMode. Работа со старыми библиотеками
• Производительность приложения
3. Роутинг в браузере
• Как работает history API
• Бибилиотека react-router-dom
• Простой роутинг с помощью Route и Link
• Редиректы и страница 404 с помощью Switch и Redirect
• Роутинг на вложенных страницах
• Создание приватных страниц и доступ к ним с помощью PrivateRoute

Модуль 3. Redux, Redux-saga
1. I Redux
• Хранение данных во внешних хранилищах
• История создания redux
• Создание хранилища store
• Определение структуры хранилища с помощью редьюсеров
• Отправка сообщений с помощью экшенов
• ActionCreators. Функции для создания экшенов
• Flux standard action — стандарт структуры экшенов
• Создание вложенных редьюсеров с помощью combine-reducers
• Библиотека react-redux для подключения redux к react
• Плагин для chrome — redux-devtools. Логирование экшенов и состояния приложения
2. II Redux
• Расширение поведения redux с помощью middlewares
• Архитектура middlewares
• Асинхронный поток данных с redux. Три экшена для контроля асинхронных действий
• Написание своих middlewares
• Методология redux-ducks, модули вокруг фич проекта
• Библиотека redux-actions, укращение многословности redux
• Селекторы — единственный способ обращения к с стейту
• Библиотека reselect для мемоизации данных
3. I Redux-saga
• Побочные эффекты и управление ими
• Простая библиотека redux-thunk для работы с асинхронными действиями
• Мощное решение для работы с побочными эффектами — redux-saga
• Описание сценариев с помощью генераторов
• Эффекты takeEvery и takeLatest для реагирования на экшены
• Отправка экшенов с помощью put и получение стейта с помощью select
• Вызов внешних функций с помощью call
• Полноценная обработка асинхронных запросов с помощью try catch

Модуль 4. Redux-saga, тестирование
1. II Redux-saga
• Блокирующие и не блокирующие эффекты
• Эффект take для ожидания конкретного экшена
• Отмена сценариев
• Вечные сценарии, работающие в фоне
• Сценарий авторизации пользователей
• Сценарий отправки сетевого запроса с задержкой
• Бизнес логика на генераторах
2. Тестирование
• Как и где запускаются тесты
• TDD методология
• Тестраннер jest и его API
• Snapshot тестирование
• Библиотека enzyme для тестирования react компонент
• Подключение компоненты к тесту с помощью shallow и mount
• Статический рендер и cheerio API
• Тестирование роутинга, redux, connected компонент и саг
3. Работа со стилями
• Разные подходы к стилям
• 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
1. Работа с формами
• Общий API для работы с элементами форм
• Работа с формой через redux вместе с redux-form
• Обзор и API react-final-form
• Обзор и API formik
• Сценарий асинхронной и синхронной валидации формы
2. CI & DI & Client error handling
• Что такое continuous integration и delivery integration
• Обзор сервиса travis-ci для запуска сценариев ci
• API сервиса travis-ci
• Обзор сервиса heroku для размещения приложения
• Обзор сервиса now для размещения приложения
• Rollbar: обзор сервиса для хранения логов об ошибках
• Отправка ошибок, экшенов и стейта в rollbar
3. Набор полезных библиотек для разработки
• Компонентная разработка вместе с react-storybook
• Функциональный javascript вместе с ramda.js
• Аxios.js: удобный инструмент для работы с сетью
• Quokka.js. Repl прямо в вашем редакторе кода
• Typescript. Статическая типизация проектов Записаться на курс