Все курсы

Продвинутый курс по React

Курс для тех, кто уверенно чувсвтвует себя с React/Redux, и готов попробовать более продвинутые практики, современную экосистему и альтернативные подходы к решению задач.

Программа

Этот курс рассчитан на людей с опытом работы на React. Здесь мы будем учиться использовать экосистему React для решения стандартных задач: testing, drag-n-drop, lazy-loading, grids, forms и т.д. Разберем продвинутые варианты композиции редюсеров и работы с сайд-эффектами в Redux, будем работать с redux-saga. Изучим альтернативные подходы к слою бизнес-логики, детально разберем MobX. Научимся использовать GraphQL и Apollo. Построим простое универсальное(SSR) приложение с NextJS. Познакомимся с разработкой приложений на React Native и поработаем с real-time на примере MobX и Redux-Saga.

В этом курсе мы будем строить мобильное приложение на React Native и админку для него, используя облачную real-time базу данных Firebase. Начнем с веб-интерфейса админки, научимся работать с авторизацией, будем использовать популярные UI библиотеки (react-dnd, react-virtualized), разберем redux-saga. Затем построим простое мобильное приложение на React Native, для которого будем использовать MobX.

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

  1. Продвинутый Redux.
  2. Экосистема React.
  3. React-Native.
  4. Основы MobX.

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

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

Блок 1

Продвинутый Redux:

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

  • Redux-Form.
  • Авторизация в React приложениях (backend в Firebase, можно любой другой).
  • Разные подходы к композиции редюсеров, плюсы и минусы.
  • Redux Ducks.
  • Варианты работы с сайд-эфектами: redux-thunk, redux-promise, redux-loop, redux-saga.
  • Работа с сагами, их тестирование.

Блок 2

Экосистема React:

  • Тестирование React-компонент.
  • Drag-N-Drop с react-dnd.

Блок 3

Фреймворки для React:

  • GraphQL, как язык запросов, особоенности и реализация.
  • Apollo, клиент для GraphQL.
  • Построение универсальных приложений, NextJS

Блок 4

React Native:

  • Настройка окружения React Native.
  • Разбор основных принципов и отличий от работы в браузере.
  • Базовые компоненты React Native.
  • Стили для React Native, Flexbox.
  • Некоторые неочевидные проблемы верстки для React Native.
  • Роутинг с React Native Router Flux.

Блок 5

MobX:

  • Основы MobX.
  • Построение архитектуры приложения.
  • Работа с данными.
  • Подводные камни.
  • Работа с сетью.
  • Пример real-time в MobX и Redux-Saga.

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

Курс будет проходить по схеме 5 + 3 + 1, т.е. мы с вами пройдем 2 блока (5 занятий), на которых разберем продвинутый Redux и экосистему React, построим админку для нашего приложения. Сделаем каникулы, во время которых вы сможете освоиться с пройденным материалом. На следующих 3-х уроках мы будем создавать мобильное приложение на React Native, с исползованием MobX, настроим коммуникацию с сервером и авторизацию, посмотрим на пример работы с real-time в MobX и Redux-Saga. А последние занятие мы посвятим вашим вопросам и увидим куда развиваться дальше.

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

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

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

  1. Вы можете строить архитектуру приложения выбирая лучший из многих доступных вариантов, не ограничиваясь стандартным путем.
  2. Вы не ограничены Redux-ом: уже умеете использовать MobX, знаете какие еще есть системы, их плюсы и минусы, можете легко в них разобраться.
  3. Вы знакомы с мощными инструментами дла коммуникации с сервером(GraphQL и Apollo)
  4. Вы понимаете, как строить универсальные приложения с серверным рендерингом.
  5. Вы знаете не только сам React, но и множество вспомогательных библиотек, умеете решать стандартные задачи не изобретая велосипедов.
  6. Вы знакомы с React Native, можете строить не только Web, но и Mobile приложения.

Гарантия

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

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

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

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

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

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

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

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

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

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

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

    • Знание JavaScript (ES2017) и знакомство с CSS/HTML.
    • Знание основ программирования (ООП, паттерны JS, знание нескольких архитектурных паттернов).
    • Знание основ React и экосистемы: redux, immutable, react-router@4, reselect, react-router-redux. Если вы прошли наш основной курс по React, то этого достаточно.

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

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

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

Комментарии

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