academy@academyit.ru
SLIT-1001
Разработка приложений
24 ак.часа
ReactJS - Разработка WEB клиентских приложений, использование библиотек Redux и функций Hooks
-
Описание образовательной программы
О КУРСЕНа протяжении всего курса, слушатели вместе с тренером строят конкретные приложения с использованием классов React и функций. На основе теоретических знаний, на конкретных данных, полученных из микросервисов стенда, формируют клиентское веб приложение с использованием функций хуков и библиотеки Redux
Разработчики web приложений на языке Java
Модуль 1 «Теория»
Развертывание рабочего стенда для работы с микросервисами, представленными, приложениями в технологиях JEE, Python, NodeJS, Postgresql, для всей разработки клиентской части - ReactJS
Эволюция развития веб приложений. От запроса - ответа, к сервлетам и feces технологиям сервера, к технологиям разработки клиентских приложений React, Vue, Angular.
Введение в SPA приложения. Что такое реактивное приложение. Виртуальный DOM приложения
Подготовка рабочей среды WebStorm для работы с ReactJS, подключение дополнительных библиотек в локальную песочницу
Модуль 2 «React»
Создание минимального React приложения, утилита create-react-app, анатомия и внутренняя архитектура каталогов, React объект - как точка входа в приложение
Синтаксический сахар - React-JSX для функции createElement.
Спецификация типов элементов, область видимости и нотации JSX.
Правила именования. Свойства JSX элементов и литералы
React компоненты - классы или функции, что выбрать. Props (свойства) и состояние (state).
Описание и использование событий в функциональных и классовых компонентах
Методы жизненного цикла компонента. Этапы формирования и обновления виртуального DOM. Устаревшие методы
Использование функции fetch для доступа к микросервисам стенда. Описание прокси для сервера разработки
Авторизация и аутентификация клиентского приложения на сервере. Обработка ошибок сервера на стороне клиентского приложения
Выстраивание цепочки выполнения запросов к серверу в единый промис на конкретных примерах микросервисов
Построение готового клиентского приложения с обработкой отношения мастер-деталь, изменением данных в базе данных и формированием отчетов
Модуль 3 «Redux»
Неудобства работы с локальным хранилищем в React, изолированность хранилища и принятие специальных мер для обновления виртуального дома
Снятие этих проблем Redux
Установка Redux, две библиотеки, создание структуры хранилища в файловой системе - общие принципы
Назначение reducer, базовая функция
Инициализация хранилища
Механизм диспетчеризации в хранилище, создание и использование механизмов обновления данных в хранилище
Возврат данных из хранилища
Подписчики на состояние хранилища
Передача состояния в свойства компонент - Provider, автоматизация передачи необходимых свойств из хранилища в компоненты - назначение функции mapStateToProps и mapDispatchToProps
Функция обертка, или функция верхнего порядка, которая возвращается функцией connect - для связи компонента с хранилищем и механизмами его обновления
Работа с серверной частью стенда
Пример построения клиентского приложения, где обрабатываются таблицы в отношении мастер-деталь
Модуль 4 «Hooks»
Использование состояния приложения без реализации классовой архитектуры - это функции Хуки
Добавление состояния к функиональному компоненту - useState вместо this.state
Правила чтения и записи состояния. Виртуальный DOM отслеживает состояние
Побочные эффекты компонента и хук useEffect, получение данных из микросервиса и обновление состояния, улучшение производительности useEffect с организацией наблюдения за переменными состояния
Использование контекста (хук useContext) для получения доступа к свойствам в родительском компоненте
-
Для успешного прохождения курса необходимы:
- Знание основ JavaScript
