Книга посвящена программированию веб-приложений на языке JavaScript с применением популярного веб-фреймворка React. Дается вводный курс, наглядно, по шагам описывающий разработку несложного веб-приложения — списка запланированных дел. Описываются базовые инструменты: создание и настройка React-проекта, написание компонентов, язык JSX, передача данных между компонентами и создание веб-форм. Рассматриваются полезные дополнительные библиотеки: React Router (навигация), Redux, React Redux и Redux Toolkit (централизованное хранилище данных), Formik (быстрая разработка веб-форм), Yup (валидация), React Reveal (анимационные эффекты) и др. Рассказывается о разделении кода, обработке ошибок, средствах отладки, публикации готового веб-приложения и рендеринге на стороне сервера.
Электронный архив на сайте издательства содержит код описанного в книге веб-приложения и другие полезные файлы.
Для программистов
Простота и скорость клиентской веб-разработки
Книга посвящена разработке веб-приложений на языке JavaScript с применением популярного клиентского веб-фреймворка React 19. В ней учтены все нововведения, появившиеся в React 19 и новых версиях сопутствующих библиотек.
Дается вводный курс для новичков в React, содержащий пошаговое описание разработки несложного веб-приложения — списка планируемых дел.
Описываются базовые инструменты и приемы React-программирования: создание и настройка проекта React-приложения, написание компонентов, обработка событий, передача данных между компонентами, программирование веб-форм и компоненты высшего порядка.
Рассматриваются дополнительные библиотеки, которые пригодятся любому React-разработчику: React Router (навигация), Redux (централизованное хранилище данных), React Redux и Redux Toolkit (упрощение разработки и использования централизованного хранилища), Formik (быстрая разработка веб-форм), Yup (валидация введенных данных), React Awesome Reveal (создание анимационных эффектов) и др.
Далее ведется рассказ о работе с метаданными, разделении кода, обработке ошибок, отладочных инструментах (включая расширения веб-обозревателя React Developer Tools и Redux DevTools), публикации готового веб-приложения с использованием веб-серверов Apache HTTP Server и serve.
- Новинки React 19 и сопутствующих библиотек
- Компоненты
- Работа с бэкендом
- Веб-формы
- Навигация
- Загрузчики и воздействия
- Фетчеры данных
- Redux
- Анимация
- Работа с метатегами
- Публикация
Книгу “React 19. Разработка веб-приложений на JavaScript” можно купить со скидкой в интернет-магазине издательства “БХВ“.
Предисловие…………………………………………………………………………………………… 13
Веб-сайты третьего поколения. Фронтенды и бэкенды………………………………………………………….. 13
Проблемы с программированием фронтендов………………………………………………………………………… 14
Клиентские веб-фреймворки решат все проблемы…………………………………………………………………. 14
Веб-фреймворк React — почему именно он?…………………………………………………………………………… 15
Что содержится в этой книге?…………………………………………………………………………………………………… 15
Что нового?…………………………………………………………………………………………………………………………………. 16
Необходимые знания и навыки………………………………………………………………………………………………… 17
Использованное ПО…………………………………………………………………………………………………………………… 17
Типографские соглашения………………………………………………………………………………………………………… 17
Часть I. Создание простейшего React-приложения……….. 21
Глава 1. Список планируемых дел 1.0……………………………………………………. 22
1.1. Создание проекта todos……………………………………………………………………………………………………… 22
Теория………………………………………………………………………………………………………………………………………. 22
Практика………………………………………………………………………………………………………………………………….. 22
1.2. Запуск и остановка проекта………………………………………………………………………………………………. 24
1.3. Введение в компоненты. JSX………………………………………………………………………………………………. 25
Теория………………………………………………………………………………………………………………………………………. 25
Практика………………………………………………………………………………………………………………………………….. 26
1.4. Вывод компонентов. Пропы и спуск данных……………………………………………………………………. 31
Теория………………………………………………………………………………………………………………………………………. 31
Практика………………………………………………………………………………………………………………………………….. 32
1.5. Подъем данных и обработка событий………………………………………………………………………………. 36
Теория………………………………………………………………………………………………………………………………………. 36
Практика………………………………………………………………………………………………………………………………….. 36
1.6. Состояния компонента. Реактивные данные……………………………………………………………………. 38
Теория………………………………………………………………………………………………………………………………………. 38
Практика………………………………………………………………………………………………………………………………….. 38
1.7. Работа с веб-формами………………………………………………………………………………………………………… 41
1.8. Навигация. Библиотека React Router. Маршрутизатор, маршрут и выпуск…………………. 46
Теория………………………………………………………………………………………………………………………………………. 46
Практика………………………………………………………………………………………………………………………………….. 46
1.9. Загрузчики и воздействия React Router. Перенаправление…………………………………………….. 53
Теория………………………………………………………………………………………………………………………………………. 53
Практика………………………………………………………………………………………………………………………………….. 54
1.10. Параметризованные маршруты………………………………………………………………………………………. 58
Теория………………………………………………………………………………………………………………………………………. 58
Практика………………………………………………………………………………………………………………………………….. 58
1.11. Вывод сообщения об ошибке 404……………………………………………………………………………………. 64
Глава 2. Список планируемых дел 2.0……………………………………………………. 67
2.1. Создание базы данных Google Firebase и подготовка приложения к работе с ней……….. 67
2.2. Регистрация новых посетителей………………………………………………………………………………………… 77
2.3. Вход и выход……………………………………………………………………………………………………………………….. 84
2.4. Хранение данных в базе Google Firebase…………………………………………………………………………… 87
Теория………………………………………………………………………………………………………………………………………. 87
Практика………………………………………………………………………………………………………………………………….. 88
2.5. Разграничение доступа………………………………………………………………………………………………………. 94
2.6. Валидация и вывод сообщений об ошибках в стиле React…………………………………………….. 96
Теория………………………………………………………………………………………………………………………………………. 96
Практика………………………………………………………………………………………………………………………………….. 96
Часть II. Базовые инструменты………………………………………………. 101
Глава 3. Проект React-приложения………………………………………………………. 102
3.1. Создание React-проекта…………………………………………………………………………………………………… 102
3.2. Структура React-проекта…………………………………………………………………………………………………. 103
3.3. Базовые файлы проекта……………………………………………………………………………………………………. 106
3.3.1. Веб-страница приложения…………………………………………………………………………………………. 106
3.3.2. Стартовый модуль………………………………………………………………………………………………………. 108
3.3.3. Таблица стилей приложения……………………………………………………………………………………… 109
3.3.3.1. Сброс стилей………………………………………………………………………………………………………. 109
3.3.3.2. Использование таблиц стилей SASS………………………………………………………………… 110
3.4. Запуск и остановка выполнения проекта……………………………………………………………………….. 110
3.4.1. Отслеживание кода…………………………………………………………………………………………………….. 112
3.4.2. Использование HTTPS при отладке………………………………………………………………………….. 112
3.5. Выявление ошибок……………………………………………………………………………………………………………. 113
3.5.1. Ошибки в программном коде……………………………………………………………………………………… 113
3.5.2. Ошибки времени выполнения…………………………………………………………………………………….. 114
3.6. Настройка проекта. Переменные окружения…………………………………………………………………. 114
3.6.1. Задание переменных окружения. Файлы окружения………………………………………………. 115
3.6.2. Использование переменных окружения в программном коде………………………………… 116
3.6.3. Переменные окружения, поддерживаемые React…………………………………………………….. 116
3.6.4. Создание своих переменных окружения…………………………………………………………………… 119
Глава 4. Компоненты…………………………………………………………………………… 120
4.1. Реализация компонентов………………………………………………………………………………………………….. 120
4.1.1. Жизненный цикл компонента. Хуки………………………………………………………………………….. 121
4.1.2. Пропы компонента……………………………………………………………………………………………………… 122
4.1.3. Рендеринг компонента………………………………………………………………………………………………… 124
4.1.3.1. Объектное описание содержимого компонента. Фрагменты…………………………. 124
4.1.3.2. Разделение кода, выполняющего рендеринг…………………………………………………… 126
4.1.3.3. Предотвращение рендеринга……………………………………………………………………………. 127
4.1.3.4. Рендеринг произвольного содержимого………………………………………………………….. 127
4.1.3.4.1. Рендеринг содержимого в одном месте компонента-родителя……………….. 127
4.1.3.4.2. Рендеринг содержимого в разных местах компонента-родителя.
Слоты……………………………………………………………………………………………………………………………. 128
4.1.3.4.3. Инструменты для работы с коллекцией потомков……………………………………. 129
4.1.4. Состояния компонента……………………………………………………………………………………………….. 131
4.1.4.1. Состояние компонента: момент первый………………………………………………………….. 132
4.1.4.2. Состояние компонента: момент второй…………………………………………………………… 133
4.1.4.3. Как состояния связываются с компонентами?………………………………………………… 134
4.2. Дополнительные инструменты для написания компонентов……………………………………….. 135
4.2.1. Управление элементами веб-страниц. Рефы…………………………………………………………….. 136
4.2.1.1. Объектные рефы…………………………………………………………………………………………………. 136
4.2.1.2. Функциональные рефы……………………………………………………………………………………… 137
4.2.2. Порталы……………………………………………………………………………………………………………………….. 139
4.2.3. Принудительное обновление компонента………………………………………………………………… 141
4.2.4. Генерирование уникальных якорей………………………………………………………………………….. 141
4.3. Повышение производительности компонентов. Мемоизация………………………………………. 142
4.3.1. Мемоизация компонентов………………………………………………………………………………………….. 142
4.3.2. Мемоизация результатов вычислений………………………………………………………………………. 144
Глава 5. Язык JSX………………………………………………………………………………… 146
5.1. Основы JSX………………………………………………………………………………………………………………………… 146
5.1.1. Синтаксис JSX……………………………………………………………………………………………………………… 146
5.1.1.1. Указание типа выводимого элемента во время выполнения………………………….. 149
5.1.2. Вывод значений…………………………………………………………………………………………………………… 150
5.1.3. Условный вывод………………………………………………………………………………………………………….. 151
5.1.4. Вывод последовательностей……………………………………………………………………………………… 152
5.1.4.1. Ключи…………………………………………………………………………………………………………………. 152
5.2. Использование в компонентах внедренных элементов…………………………………………………. 153
5.3. Оформление компонентов………………………………………………………………………………………………… 154
5.3.1. Таблицы стилей компонентов……………………………………………………………………………………. 154
5.3.1.1. CSS-модули………………………………………………………………………………………………………… 155
5.3.2. Задание встроенных стилей CSS……………………………………………………………………………….. 156
Глава 6. Обработка событий………………………………………………………………… 157
6.1. Написание обработчиков событий…………………………………………………………………………………. 157
6.2. Привязка обработчиков к событиям……………………………………………………………………………….. 158
6.2.1. Передача параметров обработчикам событий………………………………………………………… 159
6.3. События, поддерживаемые React. Класс события React………………………………………………. 159
6.4. Фазы событий в React………………………………………………………………………………………………………. 161
6.4.1. Обработка событий на фазе погружения………………………………………………………………….. 162
Глава 7. Взаимодействие между компонентами……………………………………. 164
7.1. Передача данных……………………………………………………………………………………………………………… 164
7.1.1. Спуск данных………………………………………………………………………………………………………………. 164
7.1.1.1. Спуск данных посредством пропов. Простой и сквозной спуск……………………. 164
7.1.1.2. Спуск данных посредством контекстов…………………………………………………………… 166
7.1.2. Подъем данных……………………………………………………………………………………………………………. 170
7.1.2.1. Мемоизация функций, передаваемых потомкам…………………………………………….. 171
7.2. Передача функциональности. Рендер-пропы…………………………………………………………………. 172
7.3. Передача управления……………………………………………………………………………………………………….. 174
7.3.1. Перенаправление рефов……………………………………………………………………………………………… 174
7.3.2. Использование промежуточных обработчиков……………………………………………………….. 175
Глава 8. Работа с веб-формами и элементами управления……………………. 177
8.1. Работа с элементами управления……………………………………………………………………………………. 177
8.2. Работа с веб-формами………………………………………………………………………………………………………. 179
8.2.1. Обработка события submit веб-формы……………………………………………………………………… 179
8.2.2. Использование воздействий React…………………………………………………………………………….. 180
8.2.2.1. Упрощенные воздействия React……………………………………………………………………….. 180
8.2.2.1.1. Получение сведений о веб-форме………………………………………………………………. 182
8.2.2.2. Полнофункциональные воздействия React……………………………………………………… 183
8.3. Валидация заносимых данных………………………………………………………………………………………… 185
Глава 9. Работа с внешними API………………………………………………………….. 187
9.1. Использование эффектов React……………………………………………………………………………………….. 187
9.1.1. Эффекты, вызываемые перед рендерингом компонента………………………………………….. 187
9.1.2. Эффекты, вызываемые после рендеринга компонента……………………………………………. 190
9.1.3. Эффекты, служащие для взаимодействия с внешним хранилищем данных………….. 191
9.2. Поддержка асинхронных операций………………………………………………………………………………… 192
9.2.1. Приостановщик…………………………………………………………………………………………………………… 192
9.2.2. Низкоприоритетные обновления компонента………………………………………………………….. 194
9.2.2.1. Упрощенные низкоприоритетные обновления……………………………………………….. 195
9.2.2.2. Полнофункциональные низкоприоритетные обновления……………………………… 197
9.2.3. Величины с отложенным изменением……………………………………………………………………….. 198
9.2.4. Оптимистичное обновление компонентов………………………………………………………………… 199
Глава 10. Компоненты высшего порядка и собственные хуки…………….. 202
10.1. Компоненты высшего порядка………………………………………………………………………………………. 202
10.1.1. Компонент высшего порядка, пример 1………………………………………………………………….. 202
10.1.2. Компонент высшего порядка, пример 2………………………………………………………………….. 204
10.2. Написание собственных хуков……………………………………………………………………………………… 207
Часть III. Дополнительные библиотеки
и расширенные инструменты………………………………………………… 209
Глава 11. Библиотека React Router: навигация, раздел 1……………………… 210
11.1. Основные принципы и понятия React Router……………………………………………………………….. 210
11.2. Маршруты, списки маршрутов и маршрутизаторы……………………………………………………. 212
11.2.1. Маршрут……………………………………………………………………………………………………………………. 212
11.2.1.1. Написание шаблонных путей. Запись URL-параметров…………………………….. 213
11.2.2. Список маршрутов……………………………………………………………………………………………………. 214
11.2.2.1. Создание списка маршрутов………………………………………………………………………….. 214
11.2.2.2. Две разновидности списка маршрутов………………………………………………………….. 214
11.2.2.2.1. Простой список маршрутов……………………………………………………………………… 214
11.2.2.2.2. Иерархический список маршрутов………………………………………………………….. 215
11.2.3. Выпуск……………………………………………………………………………………………………………………….. 218
11.2.4. Маршрутизаторы……………………………………………………………………………………………………… 218
11.2.4.1. Маршрутизатор Browser Router……………………………………………………………………… 218
11.2.4.2. Маршрутизатор Hash Router………………………………………………………………………….. 219
11.2.5. Провайдер маршрутизации……………………………………………………………………………………… 220
11.3. Навигация………………………………………………………………………………………………………………………… 220
11.3.1. Гиперссылки……………………………………………………………………………………………………………… 221
11.3.1.1. Упрощенные гиперссылки………………………………………………………………………………. 221
11.3.1.1.1. Написание путей в гиперссылках……………………………………………………………. 222
11.3.1.2. Полнофункциональные гиперссылки…………………………………………………………….. 223
11.3.2. Перенаправление………………………………………………………………………………………………………. 225
11.4. Получение сведений о текущем интернет-адресе………………………………………………………… 226
11.4.1. Получение значений URL-параметров…………………………………………………………………… 226
11.4.2. Получение и изменение значений GET-параметров………………………………………………. 227
11.4.3. Получение текущего местоположения……………………………………………………………………. 228
11.5. Дополнительные программные инструменты React Router……………………………………….. 229
11.5.1. Разметочные маршруты…………………………………………………………………………………………… 229
11.5.2. Обработка события beforeunload окна…………………………………………………………………… 229
11.5.3. Блокировка ухода…………………………………………………………………………………………………….. 230
11.5.4. Проверка пути…………………………………………………………………………………………………………… 232
11.5.5. Задание маршрутов в виде простых объектов……………………………………………………….. 233
Глава 12. Библиотека React Router: навигация, раздел 2……………………… 235
12.1. Загрузка и отправка данных………………………………………………………………………………………….. 235
12.1.1. Загрузка данных. Загрузчики………………………………………………………………………………….. 235
12.1.1.1. Написание загрузчиков…………………………………………………………………………………… 235
12.1.1.1.1. Перенаправление в загрузчиках………………………………………………………………. 236
12.1.1.2. Указание загрузчика в маршруте…………………………………………………………………… 237
12.1.1.3. Получение результата, возвращенного загрузчиком…………………………………… 237
12.1.2. Отправка данных. Воздействия React Router…………………………………………………………. 238
12.1.2.1. Написание воздействий React Router…………………………………………………………….. 238
12.1.2.2. Указание воздействия React Router в маршруте…………………………………………… 239
12.1.2.3. Инициирование запуска воздействия React Router………………………………………. 239
12.1.2.3.1. Запуск воздействия из веб-формы……………………………………………………………. 239
12.1.2.3.2. Программный запуск воздействия……………………………………………………………. 241
12.1.2.4. Получение результата, возвращенного воздействием React Router…………… 243
12.1.3. Фетчеры……………………………………………………………………………………………………………………… 243
12.1.3.1. Создание фетчеров………………………………………………………………………………………….. 243
12.1.3.2. Загрузка данных с помощью фетчеров………………………………………………………….. 244
12.1.3.3. Отправка данных с помощью фетчера………………………………………………………….. 245
12.1.3.3.1. Отправка данных посредством веб-формы фетчера………………………………. 245
12.1.3.3.2. Упрощенный способ отправки данных фетчером из веб-формы………….. 246
12.1.3.3.3. Программная отправка данных фетчером………………………………………………. 246
12.1.3.4. Доступ к произвольному фетчеру………………………………………………………………….. 247
12.1.3.5. Получение сведений обо всех созданных в приложении фетчерах……………. 248
12.2. Поддержка асинхронных операций в React Router…………………………………………………….. 248
12.3. Получение сведений о совпавших маршрутах и самом маршрутизаторе………………… 251
12.3.1. Получение сведений о совпавших маршрутах………………………………………………………. 251
12.3.2. Получение сведений о самом маршрутизаторе……………………………………………………… 252
12.4. Передача произвольного значения целевому компоненту через маршрут……………….. 253
12.5. Сохранение позиции прокрутки……………………………………………………………………………………. 255
Глава 13. Преобразователи данных React…………………………………………….. 257
13.1. Влияния……………………………………………………………………………………………………………………………. 257
13.2. Создание преобразователя React………………………………………………………………………………….. 258
13.2.1. Написание преобразователя React…………………………………………………………………………. 258
13.2.2. Регистрация преобразователя React……………………………………………………………………….. 259
13.3. Работа с преобразователями React………………………………………………………………………………. 260
Глава 14. Библиотека Redux: централизованное хранение состояния, раздел 1 262
14.1. Библиотека Redux…………………………………………………………………………………………………………… 262
14.1.1. Влияния……………………………………………………………………………………………………………………… 263
14.1.2. Преобразователь Redux…………………………………………………………………………………………… 264
14.1.3. Хранилище………………………………………………………………………………………………………………… 265
14.1.4. Селекторы………………………………………………………………………………………………………………….. 266
14.1.5. Получение данных из хранилища…………………………………………………………………………… 267
14.1.6. Отправка влияний……………………………………………………………………………………………………… 267
14.1.7. Регистрация слушателей………………………………………………………………………………………….. 268
14.1.8. Создатели влияний……………………………………………………………………………………………………. 269
14.1.9. Отправители влияний……………………………………………………………………………………………….. 270
14.1.10. Специфические случаи применения Redux………………………………………………………….. 271
14.1.10.1. Составные преобразователи………………………………………………………………………… 271
14.1.10.2. Замена преобразователя………………………………………………………………………………. 273
14.1.10.3. Мемоизация селекторов. Библиотека Reselect……………………………………………. 273
14.2. Выполнение действий с данными из внешних источников…………………………………………. 275
14.2.1. Использование посредников Redux………………………………………………………………………… 275
14.2.2. Использование переходников. Библиотека Redux Thunk…………………………………….. 280
Глава 15. Библиотека Redux: централизованное хранение состояния, раздел 2 282
15.1. Связывание React-компонентов с хранилищем Redux. Библиотека React Redux……. 282
15.1.1. Предоставление хранилища компонентам. Провайдер хранилища……………………. 282
15.1.2. Доступ к хранилищу посредством функции connect()…………………………………………… 283
15.1.2.1. Функция connect(), параметр № 1: получатель данных……………………………….. 284
15.1.2.2. Функция connect(), параметр № 2: брокер влияний………………………………………. 285
15.1.2.3. Функция connect(), параметр № 3: составитель пропов……………………………….. 287
15.1.2.4. Функция connect(), параметр № 4: настройки……………………………………………….. 288
15.1.3. Доступ к хранилищу посредством хуков……………………………………………………………….. 290
15.1.3.1. Получение данных из хранилища………………………………………………………………….. 290
15.1.3.2. Управление данными в хранилище……………………………………………………………….. 292
15.1.3.3. Получение доступа к самому хранилищу…………………………………………………….. 292
15.1.3.4. Работа с хранилищем, предоставляемым через пользовательский
контекст…………………………………………………………………………………………………………………………… 293
15.2. Упрощение создания хранилища. Библиотека Redux Toolkit……………………………………. 294
15.2.1. Упрощение формирования создателей влияний…………………………………………………….. 294
15.2.2. Упрощение создания преобразователя…………………………………………………………………… 295
15.2.3. Упрощение создания хранилища……………………………………………………………………………. 299
15.2.4. Упрощение создания преобразователей срезов…………………………………………………….. 301
15.2.4.1. Допустимые и недопустимые типы данных во влияниях…………………………….. 305
15.2.5. Упрощение создания переходников………………………………………………………………………… 305
15.2.5.1. Создание переходников………………………………………………………………………………….. 305
15.2.5.2. Создание обработчиков операций…………………………………………………………………. 308
15.2.5.3. Запуск переходников, получение результата и обработка ошибок…………… 311
15.2.5.4. Прерывание выполнения операций……………………………………………………………….. 312
15.2.6. Создание мемоизированных селекторов………………………………………………………………… 312
Глава 16. Библиотека Formik: создание веб-форм………………………………… 313
16.1. Быстрое создание веб-форм…………………………………………………………………………………………… 313
16.1.1. Компонент Formik: построитель веб-форм…………………………………………………………….. 313
16.1.2. Компонент Form: веб-форма……………………………………………………………………………………. 315
16.1.3. Компонент Field: элемент управления……………………………………………………………………. 315
16.1.3.1. Вывод флажков, переключателей, списков и полей выбора файлов………….. 316
16.1.4. Обработка занесенных данных……………………………………………………………………………….. 318
16.1.5. Валидация данных……………………………………………………………………………………………………. 319
16.1.6. Ввод данных в массивы и объекты………………………………………………………………………….. 322
16.2. Создание более сложных веб-форм………………………………………………………………………………. 323
16.3. Создание своих элементов управления………………………………………………………………………… 328
16.4. Сброс веб-форм……………………………………………………………………………………………………………….. 329
16.5. Массивы элементов управления……………………………………………………………………………………. 331
Глава 17. Библиотека Yup: валидация данных…………………………………….. 334
17.1. Написание правил валидации. Схемы………………………………………………………………………….. 334
17.1.1. Правила, применимые ко всем типам……………………………………………………………………… 336
17.1.2. Правила валидации строк………………………………………………………………………………………… 337
17.1.3. Правила валидации чисел……………………………………………………………………………………….. 339
17.1.4. Правила валидации логических величин……………………………………………………………….. 339
17.1.5. Правила валидации временнх отметок………………………………………………………………… 340
17.1.6. Правила валидации массивов………………………………………………………………………………….. 340
17.1.7. Правила валидации объектов………………………………………………………………………………….. 341
17.1.8. Написание своих дополнительных условий и преобразований…………………………… 343
17.2. Валидация данных…………………………………………………………………………………………………………. 344
17.2.1. Использование только инструментов Yup……………………………………………………………… 344
17.2.2. Использование Yup совместно с Formik…………………………………………………………………. 346
Глава 18. Библиотека ReactFire: интеграция с Google Firebase…………….. 347
18.1. Первый уровень: провайдер серверного веб-приложения………………………………………….. 347
18.2. Второй уровень: провайдеры базы данных и подсистемы разграничения доступа… 348
18.3. Третий уровень: компоненты-потребители………………………………………………………………….. 349
18.3.1. Получение сведений о текущем посетителе…………………………………………………………… 349
18.3.2. Извлечение данных из базы……………………………………………………………………………………… 351
Глава 19. Библиотека React Awesome Reveal: анимация………………………. 353
19.1. Анимационные эффекты…………………………………………………………………………………………………. 353
19.1.1. Компоненты, реализующие анимационные эффекты……………………………………………. 353
19.1.2. Общие параметры анимационных эффектов………………………………………………………….. 355
19.1.3. Анимирование нескольких элементов (компонентов)……………………………………………. 357
19.1.3.1. Анимирование символов текста……………………………………………………………………… 358
19.2. Специальные эффекты……………………………………………………………………………………………………. 358
Глава 20. Прочие полезные инструменты и библиотеки………………………. 360
20.1. Библиотека React Window: вывод больших перечней………………………………………………… 360
20.1.1. Компонент FixedSizeList: вывод списков с пунктами одинакового размера……….. 360
20.1.2. Компонент VariableSizeList: вывод списков с пунктами разного размера………….. 364
20.1.3. Компонент FixedSizeGrid: вывод таблиц с ячейками одинаковых размеров………. 365
20.1.4. Компонент VariableSizeGrid: вывод таблиц с ячейками разных размеров…………. 369
20.2. Работа с метатегами……………………………………………………………………………………………………….. 371
20.2.1. Указание названия веб-страницы (тег <title>)………………………………………………………. 371
20.2.2. Указание метаданных (тег <meta>)………………………………………………………………………… 372
20.2.3. Привязка к веб-странице сторонних файлов (тег <link>)……………………………………… 372
20.2.4. Задание внутренних таблиц стилей………………………………………………………………………… 374
20.2.5. Задание сторонних веб-сценариев………………………………………………………………………….. 375
20.3. Предварительная загрузка интернет-ресурсов……………………………………………………………. 375
Глава 21. Обработка ошибок……………………………………………………………….. 379
21.1. Обработка ошибок средствами JavaScript……………………………………………………………………. 379
21.2. Обработка ошибок средствами React Router……………………………………………………………….. 380
21.2.1. Базовые средства обработки ошибок……………………………………………………………………… 380
21.2.2. Обработка HTTP-ошибок…………………………………………………………………………………………. 382
21.2.3. Обработка ошибок в приостановщиках Await……………………………………………………….. 383
Глава 22. Разделение кода и загрузка по запросу…………………………………. 384
22.1. Загрузка по запросу средствами JavaScript…………………………………………………………………. 384
22.2. Загрузка по запросу средствами React…………………………………………………………………………. 385
22.3. Загрузка по запросу средствами React Router…………………………………………………………….. 386
Глава 23. Расширенные средства отладки……………………………………………. 388
23.1. Строгий режим………………………………………………………………………………………………………………… 388
23.2. Настройка отладчика, встроенного в Visual Studio Code……………………………………………. 389
23.3. Расширение React Developer Tools………………………………………………………………………………… 390
23.3.1. Сведения о компонентах………………………………………………………………………………………….. 390
23.3.2. Профилировщик………………………………………………………………………………………………………… 395
23.3.3. Настройка расширения React Developer Tools………………………………………………………. 399
23.3.4. Упрощение отладки собственных хуков………………………………………………………………… 402
23.4. Расширение Redux DevTools………………………………………………………………………………………….. 403
23.4.1. Подготовка проекта к работе с Redux DevTools……………………………………………………. 403
23.4.2. Работа с Redux DevTools………………………………………………………………………………………….. 404
23.4.3. Настройка расширения Redux DevTools………………………………………………………………… 409
23.5. Получение метрик Web Vitals………………………………………………………………………………………… 409
23.6. Встроенный профилировщик React………………………………………………………………………………. 409
Глава 24. Публикация веб-приложения……………………………………………….. 412
24.1. Подготовка веб-приложения к публикации………………………………………………………………….. 412
24.2. Создание эксплуатационной редакции веб-приложения……………………………………………. 413
24.3. Публикация веб-приложения…………………………………………………………………………………………. 414
24.3.1. Публикация на мощностях разработчика………………………………………………………………. 414
24.3.1.1. Публикация с помощью Apache HTTP Server……………………………………………….. 414
24.3.1.2. Публикация с помощью веб-сервера serve…………………………………………………….. 415
24.3.2. Публикация на сторонних мощностях……………………………………………………………………. 416
24.4. Выброс React-проекта……………………………………………………………………………………………………. 416
Заключение………………………………………………………………………………………….. 419
Приложение 1. Компоненты-классы…………………………………………………….. 421
П1.1. Введение в компоненты-классы……………………………………………………………………………………. 421
П1.2. Реализация компонентов-классов…………………………………………………………………………………. 422
П1.2.1. Объявление класса компонента………………………………………………………………………………. 422
П1.2.2. Пропы компонента-класса………………………………………………………………………………………. 422
П1.2.3. Состояние компонента-класса………………………………………………………………………………… 423
П1.2.4. Написание обработчиков событий в компоненте-классе…………………………………….. 425
П1.3. Дополнительные инструменты для написания компонентов-классов………………………. 427
П1.3.1. Рефы в компоненте-классе……………………………………………………………………………………….. 427
П1.3.2. Получение данных из контекста React…………………………………………………………………… 428
П1.3.3. Волшебные методы компонента-класса………………………………………………………………… 429
П1.3.4. Принудительное обновление компонента-класса…………………………………………………. 433
П1.4. Средства для обработки ошибок в компонентах-классах. Перехватчики……………….. 433
П1.5. Повышение производительности компонентов-классов.
Лишние обновления и их устранение…………………………………………………………………………………….. 435
П1.5.1. Явное подавление лишних обновлений…………………………………………………………………. 436
П1.5.2. Создание чистых компонентов……………………………………………………………………………….. 437
П1.6. Отладка компонентов-классов……………………………………………………………………………………… 438
Приложение 2. Устаревший API библиотеки React Router……………………. 439
П2.1. Базовые инструменты маршрутизации………………………………………………………………………… 439
П2.2. Создание иерархического списка маршрутов средствами устаревшего API…………… 441
Приложение 3. Описание файлового архива………………………………………… 442
Предметный указатель…………………………………………………………………………. 443
