React. Разработка сложных клиентских приложений

Профиль аудитории:

• JavaScript-разработчики начального уровня, желающие получить навыки профессиональной разработки на React

Предварительные требования:

• Навыки JavaScript на уровне написания отдельных интерактивных компонентов.

По окончании курса слушатели смогут:

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

Раздел 1. Знакомство с TypeScript

• Узнаем что такое TypeScript, и какие задачи он решает. Познакомимся с системой типов и разберёмся, как происходит процесс типизации. Научимся конфигурировать компилятор и рассмотрим основные настройки. Затем перейдём к практике и разберёмся с особенностями написания типизированного кода: кортежи, интерфейсы, дженерики и так далее.
• Введение в TypeScript.
• Что такое TypeScript, и какие задачи он решает.
• Система типов.
• Как код на TypeScript превращается в
• Инфраструктура: настройки компилятора.
• Аннотации и автоматический вывод типов.
• Практика применения
• Типизация объектов, массивов, функций.
• Дженерики.
• Кортежи.
• Интерфейсы, псевдонимы типов.

Раздел 2. React

• Знакомство с библиотекой React. Узнаем, какие проблемы она решает и как может упростить разработку фронтенда. Подготовим основу проекта с помощью Научимся применять шаблоны для Vite. Затем познакомимся с основными возможностями библиотеки React (JSX, компоненты, передача данных между компонентами).
• Что такое React.
• Как работает React.
• Какие задачи эффективно решает.
• Virtual DOM.
• Инфраструктура.
• Create React App.
• TypeScript.
• JSX.
• Чем отличается от HTML.
• Основные приёмы работы.
• Компонентный подход.
• Компоненты React.
• Пропсы. Передача данных через свойства.
• Композиция.
• Рендеринг компонентов.
• Рендеринг списков.
• Условный рендеринг.

Раздел 3. Маршрутизация (React Router)

• Узнаем как организована маршрутизация в SPA. Добавим в проект React Router и разберёмся с возможностями пакета: маршруты, перенаправления, приватные маршруты и так далее.
• Маршрутизация в SPA.
• History API.
• Компоненты Route, Link, Redirect.
• Управление маршрутами.

Раздел 4. React-компоненты. Hooks

• Расширим знания о React и компонентах. Научимся управлять состоянием, использовать события и методы жизненного цикла компонентов. Познакомимся с React Hooks и узнаем, как заменить ими классовые компоненты. Научимся работать с формами.
• Состояние.
• Однонаправленный поток данных.
• Функциональные компоненты, классовые компоненты, PureComponent.
• Введение в React Hooks.
• Методы жизненного цикла.
• React и формы.

Раздел 5. React и паттерны

• Разбираемся с вопросом, что такое архитектура программного обеспечения и как её проектировать. Знакомимся и учимся на практике применять паттерны проектирования.
• Проектирование.
• Чем отличается хорошая программа от плохой.
• Зачем проектировать программное обеспечение. Цели проектирования.
• Архитектура программного обеспечения.
• Инструменты для проектирования.
• Паттерны проектирования.
• Какие проблемы решают паттерны.
• Из чего состоит паттерн.
• Виды паттернов проектирования.
• Паттерны в React.
• Простые компоненты (Stateless component).
• Компоненты-обёртки (Proxy component).
• Компоненты высшего порядка (Higher-order component).
• Render Props.
• Провайдер (Provider).
• React Hooks и паттерны.

Раздел 6. Управление состоянием. Redux

• Знакомимся с Flux-архитектурой: действия (Actions), диспетчеры (Dispatcher), представления (Views) и хранилища (Stores). Подключаем к проекту Redux и обновляем кодовую базу.
• Flux-архитектура.
• Хранилище, диспетчер, действия.
• Redux.
• Middlewares.
• Расширение функциональности Redux.

Раздел 7. Асинхронность в Redux

• Научимся внедрять асинхронный код в синхронную работу Redux с помощью Middleware. Узнаем как взаимодействовать с сервером при помощи пакета Axios. Познакомимся с интерцепторами.
• Redux-thunk.
• Axios.

Раздел 8. Оптимизация производительности

• Обсудим производительность React-приложений: какие есть особенности, на что следует обращать внимание при проектировании компонентов в первую очередь. Затем познакомимся с пакетом Redux Toolkit и узнаем как с его помощью избавиться от шаблонного кода при работе с Redux.
• Профилирование компонентов.
• Управление обновлением компонентов.
• Мемоизация.
• Redux Toolkit.
• Применение хуков useMemo, useCallback.
• Особенности useEffect.
• Redux Toolkit: createAction, createReducer, createSlice.

Раздел 9. Тестирование React

• Познакомимся с инструментами и методиками тестирования React-приложений. Настроим инфраструктуру для тестирования, напишем тесты для компонентов.
• Vitest.
• React Testing Library.