+7 (812) 703-02-02 info@hse.spbstu.ru

FRNT-REACT. Разработка WEB интерфейсов с использованием библиотеки React

Длительность дисциплины: 40 ак.ч.


Аннотация

Целью курса является освоение технологии разработки пользовательских интерфейсов с использованием современной библиотеки компонентной разработки React.

Слушатели курса научатся создавать сложные компоненты, используя React, научиться разрабатывать одностраничные приложения, повысить навыки и эффективность использования языка JavaScript для разработки клиентских приложений.


Знания и умения, полученные в результате изучения

В ходе обучения слушатели научатся:

  • использовать библиотеку React совместно с языком JavaScript для разработки пользовательских компонентов, отображаемых на странице и реализующих заданную бизнес логику;
  • создавать одностраничные приложения, взаимодействующие с пользователем;
  • использовать React для работы с внешними API.

После обучения на курсе слушатели будут знать:

  • принципы компонентной разработки пользовательских интерфейсов;
  • технологию создания компонентов с использованием библиотеки React;
  • связь между DOM, VDOM и компонентами React;
  • принципы маршрутизации в React;
  • принципы построения STA приложений.

Также слушатели курса получат практический опыт:

  • владения инструментарием разработки React компонентов;
  • владения методами разработки форм и проверки вводимых пользователем данных с помощью языка JavaScript.

Содержание дисциплины

Тема 1. Введение в экосистему React

  • JSX, декомпиляция JSX.
  • Свойства.
  • Состояния.
  • Простые компоненты.
  • Объединения компонентов и их жизненный цикл.
  • Подключение сторонних компонентов.
  • Подключение стилей, использование CSS модулей.

Практические занятия

  • Разработка и кастомизация простых React компонентов
  • Разработка сложных компонентов на базе простых и сторонних React компонентов

Тема 2. Компоненты и Virtual DOM

  • Virtual DOM.
  • Создание и использование refs для доступа к DOM.
  • Keys в React.
  • Стандартные и пользовательские Hooks.
  • Использование Hooks при написании компонентов.

Практические занятия

  • Работа с VDOM
  • Разработка пользовательского приложения

Тема 3. Динамические компоненты и формы React

  • React+TypeScript = Динамические компоненты.
  • Анимация в React.
  • Примеси.
  • Разработка форм: управляемые компоненты и валидация.

Практические занятия

  • Разработка универсальной кнопки
  • Разработка формы на React

Тема 4. Библиотека Redux.js

  • Основы Redux.js, Redux dev tools.
  • Объект Store.
  • Синхронный поток данных с Redux.
  • Связь компонентов и логики – react-redux.
  • Создание и использование Middlewares.
  • Получение данных от сервера.
  • Асинхронные экшены с redux-thunk.
  • Redux Tookit.

Практические занятия

  • Создание приложения с использованием Redux

Тема 5. Работа с внешними API в React

  • Синхронные и асинхронные вызовы API.
  • Использование React Query для работы с API.

Практические занятия

  • Создание приложения, используюего внешний API

Тема 6. Одностраничные приложения React

  • Роутинг и проектирование структуры приложения.
  • Настройка и использование react-router.
  • Вложенные маршруты.
  • Совместное использование Redux и react-router.
  • Обработка серверных ошибок.
  • Настройка и использование history.
  • Передача данных с помощью context.
  • Композиция элементов с использованием props.children.

Практические занятия

  • Разработка STA приложения на React

Тема 7. Разработка React приложения шаг за шагом

  • Этапы проектирования и разработки React приложения.
  • Использование внешних компонентов и библиотек для расширения функциональности.

Практические занятия

  • Разработка полноценного React приложения