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

Больше никаких хаков с jQuery! Только структурированный код и декларативный подход в приложениях. React.js имеет огромную экосистему библиотек, зная его, не составит труда начать писать полноценные мобильные приложения с помощью React Native!

За 5 недель мы изучим React.js и разработаем свое веб-приложение. Освоим джентльменский набор инструментов React-разработчика. Весь код будет храниться на github, тестироваться в облаке, а сообщения об успешных тестах и ошибках у клиента прилетят нам в Slack.


Пройдя курс, вы научитесь

• Разрабатывать полноценные приложения на стеке React.js
  React.js является лишь представлением данных, для полноценной работы приложения мы изучим как хранить данные, общаться с сервером и следить за свежестью данных на клиентской стороне.

• Оптимизировать React.js приложения
  Прежде чем оптимизировать, мы научимся понимать когда нам нужно заниматься этим, и как правильно найти места, нуждающиеся в оптимизации. Мы научимся пользоваться современными инструментами google chrome и с помощью них найдем кандидатов на оптимизацию.

• Правильно разделять работу с данными и представлением
  Узнав какие абстракции используют разработчики известных библиотек, вы сможете улучшить свои приложения, используя такие же приемы. Строго разделив представление от данных, вы научитесь рендерить React-приложения как на стороне клиента, так и на стороне сервера, делать time travel debug и использовать приемы оптимистичных интерфейсов.

• Применять лучшие практики по управлению потока ваших данных
  С данными вашего приложения нужно работать очень аккуратно, неправильные данные могут вызвать ошибку в правильно работающем коде. Вы научитесь нормализовывать данные, писать абстракции работающие со всеми типами данных, организовывать общение ваших компонент, от родителя к ребенку, от ребенка к родителю, и даже от ребенка к ребенку

• Тестировать все части вашего фронтенд-приложения
  Современные приложения содержат тысячи строк кода и, чтобы быть уверенным в том, что все работает как надо, вы научитесь тестировать каждую часть вашего приложения, автоматизировать тестирование и наслаждаться стабильностью работы вашего приложения.

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

• Правильно разделять ваш код и UI на компоненты, а компоненты в правильную файловую иерархию
  Правильно разделив код на компоненты, вы сможете переиспользовать их много раз в разных частях вашего приложения. Мы изучим тонкости умных компонент, глупых компонент и компонент высшего порядка: зачем они нужны, и как такие компоненты упрощают разработку больших приложений.

• Мониторить работу вашего приложения и быстрое обнаружение ошибок у клиентов
  Написать и протестировать приложение — это еще пол беды, вы научитесь мониторить ошибки с помощью современных средств и вовремя на них реагировать, получая уведомления в отдельный канал slack о любой ошибке, случившейся у клиентов вашего приложения.

• Настройка рабочей среды
  • Приветствие
  • Фичи es6/7 которые мы будем использовать на курсе
  • Настройка окружения: vs code, github, npm & yarn, eslint, prettier
  • Полезные плагины для vs code
  • Установка create-react-app, настройка своего проекта
  • Принцип работы webpack и create-react-app
• REACT.js Введение
  • Компонентный подход к разработке
  • Virtual DOM: причины создания, принцип работы
  • JSX: верстка на js
  • Жизненный цикл: React-компоненты от инициализации до unmount.
  • Как все это работает вместе
• Компоненты React
  • Вложенные компоненты в JSX при помощи props.children.
  • Связь с DOM с помощью refs.
  • Проверка аргументов компоненты с помощью PropTypes
  • Три синтаксиса для компонент: Stateless компоненты, ES6-классы и React.createClass.
  • Отличие React.Component от React.PureComponent
  • Components, elements и instances

• Поток данных в React
  • Где и как хранить данные
  • Внутренний state компонент
  • Поток данных: props и state
  • Передача данных между близкими компонентами, родителю, детям, соседям
  • Работа со стилями
  • Context: механизм связывания компонент
  • Синтетические события реакта, способы подписки
• React semantic-ui. Изучаем и используем внешнюю библиотеку компонент
  • Установка
  • Изучаем принципы работы компонент
  • Компоненты уровня компоновки страниц
  • Компоненты оформления элементов
  • Работа с коллекциями
  • Компоненты порталы
• React-router. Используем роутинг на стороне браузера.
  • Как работает роутинг на клиенте.
  • React-router v4. Как работает static routing и dynamic routing.
  • Вложенные роуты в static routing и их аналог в dynamic routing.
  • Передача аргументов через url.
  • Тесты для роутов.
  • Авторизация пользователя
  • Редиректы и переходы на странице.

• Тестирование react приложений.
  • Что такое TDD.
  • Рабочее окружение для написание тестов: список популярных тест раннеров, типы тестов, типы синтаксисов тестов.
  • Jest: пишем в стиле TDD тесты для react и следим за изменениями.
  • Snapshot тестирование: упрощаем процесс тестирования стандартных сценариев.
  • Enzyme: тестируем правильный рендеринг компоненты.
• Введение в Redux
  • 3 принципа redux
  • Actions
  • Action creators
  • Reducers
  • Store
  • Data flow
  • Redux devtools
  • react-redux: Использование с react
• Redux - Использование с React.
  • Как работает redux middlewares
  • Redux-actions: укрощаем многословность redux
  • Селекторы состояния
  • Библиотека reselect, мемоизация селекторов
  • Тесты для redux action creators
  • Тесты для redux reducers

• Redux-saga. Управляем побочными эффектами
  • Что такое побочные эффекты в react.
  • Redux-saga и организация управления побочными эффектами.
  • Функции генераторы function* и управление генератором с помощью yield.
  • Возможности генераторов для организации работы с побочными эффектами в redux-saga.
  • Изучаем основные функции помощники redux-saga(put, call, takeEvery, takeLatest)
• Redux-saga. Типы операций
  • Разница между блокирующими и не блокирующими операциями.
  • Параллельное исполнение задач,
  • Исполнение задач в состоянии гонки
  • Последовательное исполнение групп параллельных задач
  • Композиции саг, отмена саг, форк саг
• Redux-saga. Работа с сетью
  • Подключаем axios для работы с сетью
  • Асинхронные экшены
  • Асинхронный поток данных
  • normalizr: горизонтальная нормализация данных
  • Тесты для разных операций redux-saga

• Redux-form: Работа с формами
  • Основные принципы работы.
  • Используем Field, FieldArray, FieldSection для компоновки формы
  • Нормализация данных
  • Валидируем данные по comit формы или при вводе
  • Асинхронный комит формы
• Деплой и тестирование в облаке
  • Что такое continuous integration и delivery integration
  • Настраиваем jenkins для тестирования в облаке
  • Регистрируемся на www.netlify.com
  • Деплой приложения на внешний сервер
  • Настраиваем rollbar для поимки сообщений у клиента
• Дополнительные инструменты разработки
  • React Storybook
  • React Media
  • JSX Control Statements
  • React Performance.
  • Работа с lodash и moment.js

Скачать: