ReactJS — Разработка WEB клиентских приложений, использование библиотек Redux и функций Hooks — SynergyCom

ReactJS — Разработка WEB клиентских приложений, использование библиотек Redux и функций Hooks

Код курса: WEB-015 Продолжительность: 3 дня (24 часа)

Аудитория: Веб разработчики.

Цель: по окончанию курса слушатели смогут самостоятельно разрабатывать клиентские ReactJS приложения с использованием библиотек Redux и функций Hooks.

Предварительная подготовка: знание основ JavaScript.

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

Теория и практики курса:

  • Развертывание рабочего стенда для работы с микросервисами, представлеными, приложениями в технологиях JEE, Python, NodeJS, Postgresql, будем использовать этот стенд для всей разработки клиентской части — ReactJS — время 10 минут.
  • Эволюция развития веб приложений. От запроса — ответа, к сервлетам и feces технологиям сервера, к технологиям разработки клиентских приложений React, Vue, Angular. Введение в SPA приложения. Что такое реактивное приложение. Виртуальный DOM приложения.
  • Подготовка рабочей среды WebStorm для работы с ReactJS, подключение дополнительных библиотек в локальную песочницу.
  • Создание минимального React приложения, утилита create-react-app, анатомия и внутренняя архитектура каталогов, React объект — как точка входа в приложение.
  • Синтаксический сахар — React-JSX для функции createElement. Спецификация типов элементов, область видимости и нотации JSX. Правила именования. Свойства JSX элементов и литералы.
  • React компоненты — классы или функции, что выбрать. Props (свойства) и состояние (state). Описание и использование событий в функциональных и классовых компонентах. Методы жизненного цикла компонента. Этапы формирования и обновления виртуального DOM. Устаревшие методы — в несколько слов.
  • Использование функции fetch для доступа к микросервисам стенда. Описание прокси для сервера разработки. Авторизация и аутентификация клиентского приложения на сервере. Обработка ошибок сервера на стороне клиентского приложения. Выстраивание цепочки выполнения запросов к серверу в единый промис на конкретных примерах микросервисов. Построение готового клиентского приложения с обработкой отношения мастер-деталь, изменением данных в базе данных и формированием отчетов.
  • Неудобства работы с локальным хранилищем в React, изолированость хранилища и принятие специальных мер для обновления виртуального дома. Redux снимает эти проблемы.
  • Установка Redux, две библиотеки, создание структуры хранилища в файловой системе — общие принципы.
  • Назначение reducer, базовая функция.
  • Инициализация хранилища. Механизм диспетчеризации в хранилище, создание и использование механизмов обновления данных в хранилище. Возврат данных из хранилища.
  • Подписчики на состояние хранилища.
  • Передача состояния в свойства компонент — Provider, автоматизация передачи необходимых свойств из кранилища в компоненты — назначение функции mapStateToProps и  mapВшызфесрToProps.
  • Фукция обертка, или фунция верхнего порядка, которая возвращается функцией connect — для связи компонента с хранилищем и механизмами его обновления.
  • Все эти теоретические предпосылки разбираются на конкретном примере работы с серверной частью стенда. Разбирается пример построения клиентского приложения, где обрабатываются таблицы в отношении мастер-деталь.
  • Изсользование состояния приложения без реализации классовой архитектуры — это функции Хуки. Добавление состояния к функиональному компоненту — useState вместо this.state. Правила чтения и записи состояния. Виртуальный DOM отслеживает состояние.
  • Побочные эффекты компонента и хук useEffect, получение данных из микросервиса и обновление состояния, улучшение производительности useEffect с организацией наблюдения за переменными состояния.
  • Использование контекста (хук useContext) для получения доступа к свойствам в родительском компоненте.

Время проведения курса пока не определено, отправьте нам заявку, пожалуйста.

Возможно, мы предложим пройти курс в дистанционном режиме или организуем выездной курс, если у Вас группа.

Каталог услуг

Поиск по сайту