Войти
 

Курс обучения JavaScript-фреймворк React.js


Скидки: Весенняя распродажа c 1 марта! До конца марта действуют скидки до 50%!
Расширьте свои профессиональные знания и навыки разработчика, научившись использовать в работе фреймворк React. js

Вы научитесь:

Создавать приложения с нуля
Конфигурировать их с помощью Webpack или использовать готовые решения.

Работать с публичными API
Узнаете о механизмах OAuth и имплементациях в React.

Познакомитесь с Flux, Redux, Mobx
Узнаете подробности о состоянии приложения и работе с ним.

Профилировать свое приложение
Искать слабые места и оптимизировать их.

Тестировать свое приложение
Познакомитесь с библиотеками Jest и Enzyme.

Создавать SPA и RIA приложения с нуля
Будете применять разные подходы, с SSR или без него, включая деплой в облачный сервис Now.
После окончания курсов выдается: Сертификат.
Программа, характеристики курса могут меняться, актуальную информацию смотрите на странице курса перейдя по ссылке ниже.

Программа

В программе

Введение в React
Что такое React. Основные преимущества
Основы декларативного подхода
Возможности React, компоненты, состояние, применения
Экосистема React, основные библиотеки, из чего обычно состоит React-стек
Разбираем проект-пример
Создание проекта
Основы работы React
Создаем проект для React, используя Webpack
Подключаем typescript проекта + проводим краткий обзор конфигурации
Подключаем Jest, Enzyme в проект, пишем конфигурацию
Структурируем проект
Работа с CSS-модулями: принципы использования
Компоненты на примере новостной карточки Reddit
Компоненты в React
Основы Typescript, типы, интерфейсы, классы, @types
Создаем Layout приложения
Создаем компонент новостной карточки
Generics
Состояния в Class Components и Functional Components
Введение в функциональный подход
Больше о компонентах и введение в тестирование компонентов
Жизненный цикл компонента
Меню в новостной карточке
Введение в Unit-тесты и Jest
Тест на реакт компонент Enzyme vs Snapshots
Hooks
useContext и Context в React
Адаптивные и неадаптивные компоненты. Mobile first и desktop first в адаптиве. Разница в подходах
Дробление компонентов на вспомогательные: Text, Break и подобные. Плюсы и минусы. Специфика применения
Работа с публичным API на примере Reddit
Как работать с API
Регистрируем аккаунт разработчика на Reddit
OAuth2
Страница авторизации пользователя
Как структурировать API-запросы в приложении
Введение в Redux на примере новостной ленты
Управление состоянием приложения
Введение в Redux
Устанавливаем Redux, подключаем его к приложению
Получаем данные с Reddit
Presentation Components/Container Components
Подключаем компонент к Store
Обзор отличных от Redux решений на примере Mobx
Использование Redux-Thunk на примере бесконечной ленты
Работа с асинхронными запросами в Redux
Пишем простой logger middleware
Подключаем thunk к приложению. Пишем свой первый асинхронный action
Работа с асинхронным состоянием
Пишем простой loader, показываем его перед загрузкой новостей при помощи контейнера
Сайдбар + роутинг
Создаем сайдбар, используя более продвинутые практики
Роутинг в SPA и в React
Подключаем React Router
Подключаем новостную ленту к роутеру
Дополнительный функционал роутинга 
Формы на примере комментариев и карточки поста
Использование порталов на примере карточки поста
Ref и useRef React hook. Реализуем с их помощью механизма click outside для скрытия модалки по клику вне тела модального окна
Обратимся к API поста и отобразим вложенные комментарии, используя рекурсивный механизм
Экскурс в формы на примере комментария. Проблематика форм React
Состояние полей. Как с этим справляются. Различные подходы
Пара слов о библиотеках - и почему они могут стать обузой
Controlled и uncontrolled поля, разница подходов
Сохраняем состояние формы и валидируем поля. Выводим ошибки в правильный момент времени
Смотрим на форму с точки зрения доступности, нативных элементов и возможности работать с ней табуляцией
Добавляем форму комментария по кнопке для ответа на любой комментарий, отправляем данные комментария и отображаем новый комментарий в дереве или сообщение об ошибке
Оптимизируем приложение
Lighthouse: как с ним работать и зачем следовать рекомендациям. Аналоги этого инструмента
React Profiler: как профилировать и оптимизировать приложение
Оптимизация приложения с помощью React. useMemo
SSR + NextJS
Серверный и статический рендеринг. Изоморфные приложения
Делаем серверный рендеринг, используя express
NextJS
Переносим приложение на Next
Деплой приложения в Zeit
Бонусный модуль: Mobx

Написать о неактуальной информации.