Голосов: 0
#1
Курс включает в себя
Компонентный подход к разработке. Правильно разделяем код и UI.
Жизненный цикл React компонент. От constructor до unmount.
Состояние приложения с Redux. Actions, reducers, store, middlewares...
Роутинг и авторизация на клиенте.
Управление побочными эффектами на redux-saga.
Построение, нормализация и валидация сложных форм на redux-form.
Тестирование и автоматизация тестирования фронтенда.
Набор полезных инструментов для легкой разработки на React.
Учебная программа
Знакомство
I React.js
- Знакомство с преподавателем
- Структура курса
- Как работает create-react-app
- Как работает новый es
- Как сдавать домашние работы
- Автоматические тесты в домашних работах
- Cypress тесты в домашних работах
- Что делать если вы застряли?
II React.js
- Как работает react.js
- Что такое JSX и Virtual DOM
- Компонентный подход React.js
- Передача детей компонетнам
- Передача данных через props
- Обработка событий
- Условный рендер
- Списки и keys
- Хранение данных в state
- Плагин react-devtools для chrome
Практика
- Lifecycle методы компонент
- Разница между Component, PureComponent и stateless component
- Способы работы со state
- Формы
- Контролируемые формы, поднятие данных в state
- Synthetic Events
- Обработка ошибок во время рендера
- Невидимые теги — Fragments
III React.js
IV React.js
- React Context API
- Работа с реальным DOM с помощью Ref
- Portals
- Тонкая работа с children
- Reconcilation, процесс обновления реального dom
- Типизация компонент с prop types
- Компоненты, элементы и экземпляры класса компонент
Роутинг в браузере
- Паттерн high order components
- Паттерн Render Props
- Библиотека Recompose
- Ref forwarding
- StrickMode. Работа со старыми библиотеками
- Производительность приложения
Практика
- Как работает history API
- Библиотека react-router-dom
- Простой роутинг с помощью Route и Link
- Редиректы и страница 404 с помощью Switch и Redirect
- Роутинг на вложенных страницах
- Создание приватных страниц и доступ к ним с помощью PrivateRoute
I Redux
II Redux
- Хранение данных во внешних хранилищах
- История создания redux
- Создание хранилища store
- Определение структуры хранилища с помощью редьюсеров
- Отправка сообщений с помощью экшенов
- ActionCreators. Функции для создания экшенов
- Flux standard action — стандарт структуры экшенов
- Создание вложенных редьюсеров с помощью combine-reducers
- Библиотека react-redux для подключения redux к react
- Плагин для chrome — redux-devtools. Логирование экшенов и состояния приложения
I Redux-saga
- Расширение поведения redux с помощью middlewares
- Архитектура middlewares
- Асинхронный поток данных с redux. Три экшена для контроля асинхронных действий
- Написание своих middlewares
- Методология redux-ducks, модули вокруг фич проекта
- Библиотека redux-actions, укращение многословности redux
- Селекторы — единственный способ обращения к стейту
- Библиотека reselect для мемоизации данных
Практика
- Побочные эффекты и управление ими
- Простая библиотека redux-thunk для работы с асинхронными действиями
- Мощное решение для работы с побочными эффектами — redux-saga
- Описание сценариев с помощью генераторов
- Эффекты takeEvery и takeLatest для реагирования на экшены
- Отправка экшенов с помощью put и получение стейта с помощью select
- Вызов внешних функций с помощью call
- Полноценная обработка асинхронных запросов с помощью try catch
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
Работа с формами
CI & DI & Client error handling
- Общий API для работы с элементами форм
- Работа с формой через redux вместе с redux-form
- Обзор и API react-final-form
- Обзор и API formik
- Сценарий асинхронной и синхронной валидации формы
Набор полезных библиотек для разработки
- Что такое 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. Статическая типизация проектов
Выпускной
- Строим планы на будущее.
- Подводим итоги.
Во время первой половины курса мы займемся созданием дизайн системы: изучим React.js с помощью написания компонент от простых до сложных, а вторую половину занятий посвятим созданию приложения Loft-такси с помощью этого набора.
Старт курса: 22.10.2019
Страница курса:
Для просмотра содержимого вам необходимо зарегистрироваться!Для просмотра содержимого вам необходимо зарегистрироваться!
Последнее редактирование модератором:
- Статус
- В этой теме нельзя размещать новые ответы.