Курсы
Программирование

JavaScript-фреймворк React.js

Формат
Онлайн
Длительность
3 месяца
Уровень
Продвинутый
Результат
Сертификат

Описание

Курс повышения квалификации или освоения программы с нуля по направлению JavaScript-фреймворк React.js от онлайн-университета Skillbox. Курсы, созданные практикующими экспертами компаний-партнеров. Индивидуальный график – вы сами выбирайте, когда и во сколько проходить программу обучения. После прохождения курса выдается сертификат и возможность пройти стажировку в лучших IT компаниях России. У каждого студента есть возможность пообщаться с преподавателем в режиме онлайн или задать вопрос в чат. Университет имеет государственную лицензию №039911 на право оказывать образовательные услуги.

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


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

12 тематических модулей 67 онлайн-уроковВведение в 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

Как записаться на курс

  • 1

    Нажмите на кнопку Записаться на курс

  • 2

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

  • 3

    Оставьте свои данные в форме заявки и после подтверждения оплатите учебный курс (полностью или в рассрочку)

  • 4

    Получите доступ к учебным материалам

Отзывов пока нет.

Текущая цена

17 500 ₽

Рассрочка

1 458 ₽/мес.

Старая цена

25 000 ₽
Записаться на курс

Автор курса

Skillbox

Рейтинг курса

0
0 отзывов

Авторизуйтесь через одну из социальных сетей