Все курсы

Курс по React

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

Обзор курса

Обзор курса

Программа

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

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

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

  1. Знакомство с React, и его экосистемой.

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

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

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

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

Блок 1

Знакомство с React и его экосистемой.

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

  • Разбераем как работает create-react-app.
  • Глубже знакомимся с Реактом, Virtual DOM, JSX.
  • Разбераем React Hooks, их отличия от стейта и lifecycle методов.
  • Разберем примеры тестирования компонент с помощью Jest и Enzyme.
  • Учимся переиспользовать код с помощью наследования, декораторов и кастомных хуков.
  • Связь с DOM: keys & refs.
  • Анимации в React, CSSTransitionGroup.
  • Подключаем сторонние компоненты.

Блок 2

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

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

  • Особенности Redux.js: функциональный подход, Redux dev tools, возможности для мониторинга и универсальных приложений.
  • Store как иммутабельный объект: Redux + Immutable.js.
  • Настраиваем синхронный поток с Redux, переиспользуем созданные ранее компоненты.
  • React-redux для связи компонентов с логикой.
  • Мемоизированные селекторы reselect.
  • Side-effects в Redux: создание и использование Middlewares.
  • Получение данных от сервера.
  • Асинхронные экшены с redux-thunk

Блок 3

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

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

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

Блок 4

Куда развиваться дальше

На этот момент вы уже знаете все, что необходимо, для разработки React приложений. Но на этом рано останавливаться, вокруг Реакта выросла огромная экосистема. Мы обзорно пройдемся по основным возможностям для развития, разным платформам, библиотекам и вспомогательным инструментам. + Будет возможность разобрать интересующие именно вас вопросы.

  • Работа с формами: redux-form, final-form, formik.
  • Что ждать от React 17.
  • React Native и React VR.
  • GraphQL + Relay/Apollo.
  • MobX vs Redux.
  • Разные подходы к сайд-эффектам: redux-thunk, redux-loop, redux-saga, redux-observable.

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

Курс будет проходить по схеме 5 + 3 + 1. Мы с вами пройдем 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 стоит обратить внимание

Гарантия

  • Если объяснения будут вам непонятны
  • Если курсы не дадут вам новых знаний и умений
  • Если вы не сможете подключиться к системе онлайн-обучения

…то вы сможете получить деньги назад.

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

Преподаватели

Photo
Роман Якобчук

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

Знаю с десяток языков, но в последнее время активно пишу только на JavaScript.

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

За последние годы, неожиданно для себя, превратился в евангелиста React – я знаю и использую другие фреймворки, но так получается, что в 80% задач из моей жизни именно React является оптимальным решением.

Photo
Максим Крамаренко

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

С 2007 работаю веб-разработчиком. C 2014 пишу проекты разного масштаба используя React и его экосистему.

Один из первых разработчиков Zoomdata – системы визуализации больших данных в реальном времени, которой пользуются крупнейшие бизнесы в США.

Сейчас работаю в Wix.com, разрабатываю новую версию конструктора сайтов, которым пользуются сотни миллионов пользователей.

Так же принимал участие в проектировании open source библиотеки stylable.io для инкапсуляции стилей в React-компоненты.

Что говорят о курсе участники

Дополнительная информация

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

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

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

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

Комментарии

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