Программа курса:
Неделя 1
На первой неделе мы познакомимся, изучим основы ES2015, новые возможности JavaScript и познакомимся со способами функционального программирования на JavaScript. После этого перейдем к самому React, напишем наш первый компонент и изучим тонкости работы React и Virtual DOM.
- О курсе.
- Основы ES2015.
- Основы функционального программирования на JavaScript.
- Методы для работы с массивами map, reduce, filter.
- Императивный vs Декларативный подход.
- Введение в React.
- Основы работы с JSX.
- Как работает виртуальный DOM.
- Компоненты в React.
- Как работает React «под капотом».
+ Практикум
Неделя 2
На этой неделе мы продолжим нашу работу с React. Узнаем много нового о компонентах, их жизненном цикле, работе с состоянием и реализуем наше первое одностраничное приложение! Потом изучим тонкости настройки сборки приложения с помощью Webpack и основы грамотной структуризации кода.
- Обработка событий.
- Динамика в приложении.
- Жизненный цикл компонента.
- Состояние компонентов.
- Тонкости работы Webpack.
- Тонкости конфигурации Webpack.
- Грамотное разбиение приложения на компоненты.
- Взаимодествие с DOM.
Неделя 3
На этой неделе приготовьтесь перевернуть ваше представление о программировании! Мы научимся описывать наши компоненты с помощью ES6 классов, писать компоненты в функциональном стиле и научимся использовать композицию компонентов по полной! После того, как узнаем о компонентах все-все-все, мы перейдем к работе с состоянием в приложении. Познакомимся с концепцией однонаправленного потока данных и одной из ее реализаций — билиотекой Redux!
- Использование ES6 классов для создания компонентов.
- Higher Order Components.
- Functional Components.
- Использование ESLint.
- Переиспользование компонентов.
- Использование сторонних библиотек и компонентов.
- Redux — функциональный подход к управлению данными.
- Основные принципы Redux.
+ Практикум
Неделя 4
На этой неделе мы продолжим работать с Redux! Узнаем обо всех его фишках и тонкостях! Научимся путешествовать во времени с Redux Dev Tools и научимся работать со сторонним API и обрабатывать асинхронные действия.
- Middleware в Redux.
- Redux dev tools.
- Time Travel debugging.
- Middleware в Redux.
- Асинхронные actions в Redux.
- Взаимодействие со сторонним API.
- Концепции разделения ответственности.
Неделя 5
Дальше мы поговорим про очень важную составляющую современных приложений — роутинг! Научимся использовать различные модули для работы с историей, подключим роутинг к Redux и реализуем механизм авторизации.
- Навигация в приложении.
- Использование react-router.
- Различные модули History.
- Редиректы и переходы на странице.
- Работа со ссылками.
- React Router Hooks.
- Механизм авторизации пользователя.
- Интеграция роутинга с Redux.
+ Практикум
Неделя 6
На этой неделе у нас 2 очень важные темы — использование иммутабельных данных и тестирование! Мы познакомимся с библиотекой ImmutableJS от Facebook и научимся использовать ее для работы с иммутабельными данными в приложнии. После этого переступим к изучению различных подходов для написания тестов. Будем писать тесты для наших функций, reducers, actions, компонентов и тестировать работу всего приложения в целом с использованием Selenium Web Driver.
- Оптимизация производительности в React.
- Правила для улучшения перформанса.
- Pure Components в React.
- Иммутабельные данные.
- ImmutableJS.
- Работа с ImmutableJS в React/Redux приложении.
- Тестирование.
- Настройка окружения для тестирования.
- Написание unit тестов.
- Enzyme: тесты на компоненты.
- Nightwatch: Selenium тесты для веб-приложений.
Неделя 7
На этой неделе мы уже перейдем к сложным вопросам построения крупных приложений, проектирования архитектуры и управления сложностью! Мы разберем разные подходы, которые позволяют упростить работу с большим количеством данных и разберем хитрости для улучшения перформанса в React! На занятиях мы будем разбирать код и архитектуру крупных живых проектов и попробуем отрендерить 100500 элементов на странице!
- Абстрагирования структуры состояния.
- Использование селекторов.
- Нормализация данных.
- Нюансы построения крупных приложений.
- React Performance.
- Архитектура приложений на React.
+ Практикум
Неделя 8
Пришло время для продвинутых технологий, сложных функций и непростых задач. Мы с вами разберем тонкости настройки Continuos Integration и процесса деплоя наших приложений! Потом мы рассмотрим возможности React на сервере и напишем изоморфное приложение для отображения ленты новостей! Поверьте, после этой недели вы будете готовы писать на React все, что угодно!
- Процесс деплоя приложения.
- Деплой на GitHub Pages и Heroku.
- Другие способы деплоя приложения.
- Настрока Continuos Integration.
- Travis CI.
- Server-side рендеринг.
- Изоморфные приложения на React.
+ Выпускной
