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

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 о любой ошибке, случившейся у клиентов вашего приложения.
  

WEEK 1

• Настройка рабочей среды
  
  
  • Приветствие
    
  • Фичи 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
    
  
  
  

WEEK 2

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

WEEK 3

• Тестирование 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
    
  
  
  

WEEK 4

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

WEEK 5

• 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
    
  
  
  

Скачать: Скрытая информация :: Авторизуйтесь для просмотра »