Курс по React.JS

Этот онлайн-курс посвящён профессиональной разработке веб-приложений с помощью React.JS.

Программа

В этом курсе мы с вами шаг за шагом пройдем от знакомства с основными идеями до использования самых новых инструментов и инфраструктуры React, на практике будем развивать одностраничное приложение. Начнем с построения простых компонентов, научимся настраивать окружение, поговорим про системы сборки и особенности работы с ES2015 синтаксисом.

Постепенно мы разберем особенности построения SPA с использованием React, будем использовать сторонние компоненты и библиотеки для создания бизнес-логики. Вы в деталях узнаете классическую для React-приложений архитектуру: Unidirectional dataflow, и научитесь строить ее с использованием современной и наиболее популярной реализацией Flux – Redux.js

Курс состоит из 4-х блоков:

  1. Знакомство с React.

  2. Инфраструктура React.

  3. Построение приложений с React: Redux.js.

  4. React для SPA: react-router и продвинутые API Реакта

Детали программы смотрите далее.

Набор в группы

В текущих группах мест нет.

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

На ваш email придёт письмо с информацией о дате и деталях программы.

Стоимость обучения – порядка 150-250$. Время обучения: 1 месяц, точные даты будут при открытии записи.

Этот курс ведёт Роман Якобчук.

Основные темы программы

  • Неделя 1
  • Неделя 2
  • Неделя 3
  • Неделя 4

Неделя 1

Знакомство с React

В этом блоке мы разберем основные идеи Реакта, научимся писать простые компоненты и узнаем, в чем принципиальное отличие React.js от других популярных фреймворков. Создадим первые компоненты, используя декларативный подход.

  • Обзор и сравнение популярных современных фреймворков: Angular, Ember, React.
  • Настройка Babel и Webpack, HMR и React-transform (react-hot-loader).
  • Основы работы с Реактом, Virtual DOM, JSX.
  • Три синтаксиса для компонентов: Stateless components, ES2015-классы и React.createClass.
  • Поток данных: props и state.
  • Lifecycle: Жизнь React-компонента от инициализации до unmount.
  • Связь с DOM: keys & refs.
  • Готовим компоненты к повторному использованию: propTypes, mixins, decorators.

Неделя 2

Инфраструктура React

Сейчас, говоря "React", уже редко имеют ввиду саму библиотеку, которая просто позволяет декларативно описывать ваш UI. Сегодня React – это большая инфраструктура, которая включает в себя различные бибилиотеки для работы с данными, бизнес-логикой, сторонними компонентами, декораторами и множеством другого полезного кода.

  • Вложенные компоненты в JSX при помощи props.children.
  • Оптимизируем наше приложение с shouldComponentUpdate.
  • Immutable.js: узнаем как и зачем использовать иммутабельные данные.
  • Анимации в React, CSSTransitionGroup.
  • Использование сторонних компонентов.

Неделя 3

Построение приложений с React: Redux.js

Когда приложения становятся сложнее и в них появляется интерактивность, приходиться задумываться про организацию бизнес-логики, настраивать потоки данных и взаимодействие с сервером. В процесе построения простого новостного приложения мы детально разберем самую популярную библиотеку для одностороннего потока данных, узнаем ее особенности и научимся использовать дев-тулзы.

  • Знакомство с Flux – разбор основных элементов и идей.
  • Построение компонентов синхронной и асинхрнонной бизнес логики с Flux.
  • Ключевые отличия Redux и Flux.
  • Особенности Redux.js: функциональный подход, Redux dev tools, возможности для мониторинга и универсальных приложений.
  • Store, как иммутабельный отъект: Redux + Immutable.js.
  • Actions и Reducers, как чистые функции.
  • Настраиваем синхронный поток с Redux, переиспользуем созданные ранее компоненты.
  • React-redux для связи компонентов с логикой.
  • Side-effects в Redux: создание и использование Middlewares.
  • Варианты реализации асинхронных actions в Redux.

Неделя 4

React для SPA: react-router и продвинутые API Реакта

Разработка single-page applications – одно из основных направлений фронтэнда. Мы разберем, как строить их, используя React. Научимся использовать react-router и продвинутые элементы API React.JS.

  • Зачем нужен роутинг и как он устроен, проектируем структуру приложения.
  • Настраиваем вложенные роуты.
  • Выбираем и настаиваем history для нашего приложения.
  • Используем context – еще один механизм передачи данных.
  • Объеденяем react-router и Redux.
  • Обзор Advanced API react-router.
  • Авторизация в react-router.

Как проходит обучение?

Курс будет проходить по схеме 1 + 5 + 4, т.е. организационое собрание перед первой встречей. Затем мы с вами пройдем 2 блока (5 занятий), на которых разберем основы и инфраструктуру React, научимся строить приложения с использованием Redux. Сделаем каникулы, во время которых вы сможете освоиться с пройденным материалом. На следующих 3-х уроках мы будем учиться разрабатывать более сложные SPA: настроим коммуникацию с сервером, будем использовать react-router и advanced API Реакта. А последние занятие мы посвятим обзору экосистемы Реакта и пониманию куда развиваться дальше, поговорим про тестирование, Relay + GraphQL, Univeral Apps, MobX и прочие модные инструменты.

На каждом занятии мы изучаем что-то новое. После встречи даётся домашнее задание.

На следующем занятии мы смотрим, что и как получилось решить и как сделать лучше. Чтобы получить от курса максимум результата, нужно не только слушать, но и делать что-то дома, а затем – показывать преподавателю. Так, постепенно, с обратной связью от преподавателя, создавая проект на React, вы действительно хорошо разберётесь c этой технологией.

Результат обучения

  1. Вы знаете, понимаете и умеете использовать основные идеи React.
  2. Компонентный подход и архитетура одностороннего потока данных(Flux/Redux) ваше второе "Я"
  3. Вы умеете строить как многоразовые компоненты так и SPA с помощью React
  4. Вы знаете в каком направлении развиваться и на какие элементы инфраструктры React стоит обратить внимание

Требования к участникам

Для этого курса нужно знание JavaScript и знакомство с CSS/HTML.

Желательно понимание английского языка. По ходу курса будут предлагаться для дополнительного ознакомления материалы на английском, всё самое важное мы пройдём на занятиях, но желательно, чтобы вы могли их понять.

Системные требования

Windows или Mac поддерживаются полностью.

Под Linux онлайн-участие работает, но для просмотра записей занятий нужен Dual Boot в Win/MacOS.

Для онлайн-общения желателен интернет от 256kb/s.

Что говорят о курсах люди

Комментарии

перед тем как писать…
  • Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.