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

[serafim]

[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 для тестирования в облаке Регистрируемся на
  
  

  Войти или Зарегистрироваться чтобы увидеть скрытый текст.

  
  
  Деплой приложения на внешний сервер Настраиваем rollbar для поимки сообщений у клиента

Дополнительные инструменты разработки

• React Storybook React Media JSX Control Statements React Performance. Работа с lodash и moment.js

Скачать:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.