[frontend-science] 6-недельный онлайн-курс «ReactJS»

6-недельный онлайн-курс
«ReactJS»

В этом курсе вы научитесь использовать React, Redux и множество других инструментов для создания крупных веб-приложений нового поколения. Курс охватывает все практические аспекты разработки на React: от основ создания компонентов, управления данными, настройки окружения до тонкостей проектирования архитектуры, создания server-side и изоморфных приложений на React.
Этот курс подойдет тем, кто уже знает HTML, CSS и JavaScript на среднем уровне.

Спойлер: Программа курса

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

• Введение в React.
• Основы ES2015 (ES6).
• Данные в React: props и state.
• Императивный vs Декларативный подход/
• Основы работы с JSX.
• Обработка событий.
• Динамика в приложении.
• Жизненный цикл компонента.

+ Практикум

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

• Грамотное разбиение приложения на компоненты.
• Основы работы с Webpack: Hot-module-replacement.
• Взаимодествие с DOM.
• Разные подходы к написанию стилей.
• Препроцессоры, БЭМ, CSS модули.
• PostCSS.
• Написание компонентов в ES2015 синтаксисе.
• Как работает React «под капотом».
• Использование сторонних библиотек и компонентов.

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

• Роутинг в приложении.
• React-router.
• Переходы между страницами и редиректы.
• Работа с context в React.
• Flux – основные концепции и понятия.
• Redux – функциональных подход к управдению состоянием.
• Redux dev tools и перемешение во времени.
• Actions и Reducers.
• Middleware в Redux.
• Асинхронные actions в Redux: redux-thunk и redux-promise.
• Взаимодействие со сторонним API.

+ Практикум

4 Неделя
На этой неделе мы познакомимся с важными практиками создания крупных приложений на React. На примере создания приложения для просмотра погоды мы разберем основы грамотного проектирования интерфейса, принципы построения архитектуры проекта и разбиения приложения на составляющие.

• Разделение ответственности: «умные» и «глупые» компоненты.
• Организация структуры приложения.
• Оптимистичное выполнение действий.
• ImmutableJS: как, зачем, почему?
• Higher order components.
• Создание механизма авторизации в React.
• Производительность приложения: рендерим 100000 элементов.
• Настройка и использование Eslint – не допускаем ошибок в коде.

5 Неделя
Теперь мы погрузимся в написание крупных приложений, научимся обрабатывать сложные асинхроные операции и писать тесты для наших функций, reducers, actions, компонентов и тестировать работу всего приложения, в целом, с использованием Selenium Web Driver.

• Компоненты как функции.

• Организации сложных асинхронных действий.

• Тестирование.

• Настройка окружения для тестирования.

• Написание unit тестов.

• Enzyme: тесты на компоненты.

• Nightwatch: Selenium тесты для веб-приложений.

• Деплой приложений.

+ Практикум

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

• Server-side рендеринг.
• Изоморфные приложения на React.
• Локализация приложения.
• Нюансы построения крупных приложений на React.
• Подведение итогов.
• Презентация ваших проектов.
• Награждение сертификатами.