Войти

JavaScript-фреймворк React.js
Расширьте свои профессиональные знания и навыки разработчика, научившись использовать в работе фреймворк React.js
SkillBox
Стоимость: 21 000 р. / Разово

Целевая аудитория

Практикующим JavaScript-разработчикам

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

Frontend-разработчикам

React.js — один из самых популярных фреймворков в мире. Вы научитесь создавать изоморфные приложения на React Redux, типизировать их с помощью Typescript и работать с различными публичными сервисами.

Описание курса

Длительность 3 месяца Онлайн в удобное время Обучение на практике Доступ к курсу навсегда

Программа курса


Введение в React

  • Что такое React. Основные преимущества
  • Основы декларативного подхода
  • Возможности React, компоненты, состояние, применения
  • Экосистема React, основные библиотеки, из чего обычно состоит React-стек

Создание проекта

  • Конфигурация webpack на клиенте
  • Конфигурация webpack на сервере
  • Подключение к проекту HMR и SSR
  • Подключение Typescript
  • Подключение CSS modules, Jest, Enzyme

Typescript

  • Основы TypeScript. Типы
  • Работа с массивами
  • Работа с объектами и интерфейсами
  • Типизация функций и типы TS
  • Generics
  • Классы
  • Infer, typeof, keyof, Mapped Types

Компоненты на примере новостной карточки Reddit

  • Компоненты в React
  • Состояния в Class Components
  • Состояния в Functional Components
  • Создание Layout приложения. Часть 1
  • Создание Layout приложения. Часть 2
  • Создание компонента новостной карточки
  • Жизненный цикл компонента

Hooks и функциональное программирование

  • Каррирование и функции высшего порядка
  • Hooks в React
  • Map и Reduce в React
  • Создание компонента dropdown c использованием hooks
  • Compose, Pipe и их применение в React

Компоненты - продвинутые темы. Введение в тестирование компонентов

  • Адаптивные и неадаптивные компоненты. Mobile first и desktop first подходы
  • Создание Dropdown-меню с использованием state
  • Введение в unit-тесты и Jest
  • Написание тестов для React компонента. Enzyme vs Snapshots
  • Вспомогательные компоненты

Работа с публичным API на примере Reddit

  • Как работать с API
  • Регистрируем аккаунт разработчика на Reddit
  • OAuth2
  • Страница авторизации пользователя
  • Как структурировать API-запросы в приложении

React Context

  • Забираем из API данные пользователя
  • Отображаем данные пользователя в компоненте через prop
  • Используем React Context для работы с данными
  • Обновляем данные через контекст

Портал и форма

  • Верстаем карточку поста, используя ReactPortal
  • Ref и useRef React hook. Реализуем механизм click outside для скрытия модального окна
  • Controlled и uncontrolled компоненты на примере поля комментария
  • Сохраняем состояние формы, используя контекст

Введение в Redux на примере поля для ввода комментария

  • Введение в Redux
  • Устанавливаем Redux, подключаем его к приложению
  • Action + reducer
  • Presentation Components/Container Components

Использование Redux-Thunk на примере загрузки профиля пользователя

  • Работа с асинхронными запросами в Redux
  • Пишем простой logger middleware
  • Подключаем thunk к приложению. Пишем свой первый асинхронный action
  • Работа с асинхронным состоянием
  • Пишем простой loader

Формы на примере комментариев и карточки поста

  • Экскурс в формы. Проблематика форм React
  • Состояние полей. Различные подходы
  • Какие можно использовать библиотеки и почему они могут мешать
  • Сохраняем состояние формы, валидируем поля и выводим ошибки
  • Доступности, нативные элементов и возможности работать с формой через табуляцию

«Бесконечные» списки на примере ленты постов

  • Работа с запросами к API
  • Делаем загрузку ленты постов
  • Виды бесконечных скроллов и пагинаций
  • Делаем подгрузку ленты постов
  • Эффективный рендеринг больших списков

Сайдбар + роутинг

  • Создаем сайдбар, используя более продвинутые практики
  • Роутинг в SPA и в React
  • Подключаем React Router
  • Подключаем новостную ленту к роутеру
  • Дополнительный функционал роутинга

SSR + NextJS

  • Серверный и статический рендеринг. Изоморфные приложения
  • Делаем серверный рендеринг, используя express
  • NextJS
  • Переносим приложение на Next
  • Деплой приложения в Zeit

Бонусный модуль: Mobx


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

    Александр Кузнецов

    Frontend techlead ТАСС

    Ольга Климонова

    Ведущий разработчик ТАСС

    Алексей Авдеев

    CTO в Mish.Design

    Оставьте отзыв первым!