Оглавление
Предисловие................................................................................................................. 12
Благодарности.............................................................................................................. 14
О книге......................................................................................................................... 16
Аудитория ................................................................................................................. 16
Структура издания..................................................................................................... 17
О коде ....................................................................................................................... 18
Требования к программному и аппаратному обеспечению......................................... 18
Об авторе.................................................................................................................. 19
Об обложке ............................................................................................................... 19
Часть I. Обзор React
Глава 1. Что такое React ............................................................................................. 23
1.1. Знакомство с React.............................................................................................. 23
1.1.1. Для кого эта книга............................................................................... 26
1.1.2. Примечание об инструментарии .......................................................... 27
1.1.3. Кто использует React........................................................................... 27
1.2. Чего React не делает........................................................................................... 29
1.3. Виртуальная объектная модель документа в React.............................................. 32
1.3.1. Объектная модель документа .............................................................. 34
1.3.2. Виртуальная объектная модель документа .......................................... 35
1.3.3. Обновления и отличия......................................................................... 36
1.3.4. Виртуальная DOM: жажда скорости ..................................................... 37
1.4. Компоненты — базовая единица React................................................................ 38
1.4.1. Компоненты в целом............................................................................ 38
1.4.2. Компоненты в React: инкапсулированные и многоразовые .................. 39
1.5. React для командной работы............................................................................... 40
1.6. Резюме ............................................................................................................... 42
Оглавление  7
Глава 2. : наш первый компонент ....................................................... 44
2.1. Введение в компоненты React............................................................................. 46
2.1.1. Данные приложения............................................................................ 48
2.1.2. Несколько компонентов: гибридные и родственные отношения........... 50
2.1.3. Установление отношений компонентов................................................ 51
2.2. Создание компонентов в React............................................................................ 53
2.2.1. Создание элементов React ................................................................... 54
2.2.2. Рендеринг вашего первого компонента ............................................... 57
2.2.3. Создание компонентов React ............................................................... 59
2.2.4. Создание классов React ....................................................................... 59
2.2.5. Метод рендеринга ............................................................................... 60
2.2.6. Проверка свойств с помощью PropTypes .............................................. 61
2.3. Время жизни и время компонента....................................................................... 65
2.3.1. «Реактивное» состояние...................................................................... 65
2.3.2. Установка начального состояния ......................................................... 68
2.4. Знакомство с JSX................................................................................................. 76
2.4.1. Создание компонентов с помощью JSX ................................................ 76
2.4.2. Преимущества JSX и отличия от HTML ................................................. 79
2.5. Резюме ............................................................................................................... 80
Часть II. Компоненты и данные в React
Глава 3. Данные и потоки данных в React ................................................................... 83
3.1. Использование состояния ................................................................................... 83
3.1.1. Что такое состояние ............................................................................ 84
3.1.2. Изменяемое и неизменяемое состояние............................................... 86
3.2. Состояние в React............................................................................................... 89
3.2.1. Изменяемое состояние в React: состояние компонента ........................ 89
3.2.2. Неизменяемое состояние в React: свойства ......................................... 94
3.2.3. Работа со свойствами: PropTypes и свойства по умолчанию................. 95
3.2.4. Функциональные компоненты без состояния ....................................... 96
3.3. Связь компонентов ............................................................................................. 98
3.4. Однонаправленный поток данных....................................................................... 99
3.5. Резюме ............................................................................................................. 101
Глава 4. Рендеринг и методы жизненного цикла в React ........................................... 103
4.1. Начало работы с репозиторием Letters Social .................................................... 103
4.1.1. Получение исходного кода ................................................................ 105
4.1.2. Какую версию узла следует использовать.......................................... 106
4.1.3. Замечание по инструментам и CSS..................................................... 106
8  Оглавление
4.1.4. Развертывание .................................................................................. 106
4.1.5. Сервер API и база данных.................................................................. 107
4.1.6. Запуск приложения............................................................................ 107
4.2. Процесс рендеринга и методы жизненного цикла ............................................. 108
4.2.1. Знакомство с методами жизненного цикла......................................... 108
4.2.2. Типы методов жизненного цикла....................................................... 110
4.2.3. Начальный метод и метод типа «будет» ............................................ 114
4.2.4. Монтирование компонентов............................................................... 115
4.2.5. Методы обновления........................................................................... 119
4.2.6. Методы размонтирования.................................................................. 122
4.2.7. Перехват ошибок ............................................................................... 125
4.3. Начало создания Letters Social .......................................................................... 129
4.4. Резюме ............................................................................................................. 137
Глава 5. Работа с формами в React............................................................................ 138
5.1. Создание сообщений в Letters Social ................................................................. 139
5.1.1. Требования к данным........................................................................ 139
5.1.2. Обзор и иерархия компонентов ......................................................... 140
5.2. Веб-формы в React............................................................................................ 142
5.2.1. Начало работы с веб-формами .......................................................... 142
5.2.2. Элементы и события формы .............................................................. 143
5.2.3. Обновление состояния в формах ....................................................... 147
5.2.4. Контролируемые и неконтролируемые компоненты ........................... 148
5.2.5. Подтверждение и очистка формы...................................................... 150
5.3. Создание новых сообщений .............................................................................. 153
5.4. Резюме ............................................................................................................. 156
Глава 6. Интеграция сторонних библиотек с React .................................................... 157
6.1. Отправка сообщений в API Letters Social ........................................................... 158
6.2. Расширение компонента с помощью карт.......................................................... 159
6.2.1. Разработка компонента DisplayMap с использованием ссылок............ 161
6.2.2. Создание компонента LocationTypeAhead ........................................... 168
6.2.3. Обновление CreatePost и добавление карт в сообщения .................... 173
6.3. Резюме ............................................................................................................. 179
Глава 7. Маршрутизация в React ............................................................................... 180
7.1. Что такое маршрутизация ................................................................................. 181
7.2. Создание роутера.............................................................................................. 183
7.2.1. Маршрутизация компонентов............................................................. 184
7.2.2. Создание компонента ........................................................ 184
Оглавление  9
7.2.3. Сборка компонента .......................................................... 187
7.2.4. Сопоставление URL-адресов и параметризованной
маршрутизации........................................................................................... 189
7.2.5. Добавление маршрутов в компонент Router....................................... 192
7.3. Резюме.............................................................................................................. 199
Глава 8. Маршрутизация и интеграция Firebase......................................................... 200
8.1. Использование роутера..................................................................................... 201
8.1.1. Создание страницы для сообщения ................................................... 207
8.1.2. Создание компонента ........................................................... 208
8.1.3. Создание компонента ................................................... 212
8.2. Интеграция Firebase.......................................................................................... 213
8.3. Резюме ............................................................................................................. 221
Глава 9. Тестирование компонентов React ................................................................ 222
9.1. Типы тестирования ........................................................................................... 224
9.2. Тестирование компонентов React с помощью Jest, Enzyme
и React-test-renderer ................................................................................................ 227
9.3. Написание первых тестов ................................................................................. 229
9.3.1. Начало работы с Jest......................................................................... 230
9.3.2. Тестирование функционального компонента без состояния............... 231
9.3.3. Тестирование компонента CreatePost без Enzyme .............................. 236
9.3.4. Покрытие тестированием................................................................... 245
9.4. Резюме ............................................................................................................. 248
Часть III. Архитектура React-приложений
Глава 10. Архитектура приложения Redux................................................................. 251
10.1. Архитектура приложения Flux ......................................................................... 252
10.1.1. Знакомьтесь с Redux: вариант Flux................................................... 255
10.1.2. Настройка для Redux ....................................................................... 258
10.2. Действия в Redux............................................................................................ 259
10.2.1. Определение типов действий .......................................................... 261
10.2.2. Создание действий в Redux.............................................................. 263
10.2.3. Создание действий для хранилища и диспетчера Redux .................. 264
10.2.4. Асинхронные действия и промежуточное ПО ................................... 268
10.2.5. Redux или не Redux?........................................................................ 275
10.2.6. Тестирование действий.................................................................... 277
10.2.7. Создание пользовательского промежуточного ПО Redux
для отчетов о сбоях .................................................................................... 279
10.3. Резюме............................................................................................................ 282
10  Оглавление
Глава 11. Интеграция Redux и React.......................................................................... 283
11.1. Редукторы определяют, как должно измениться состояние............................. 284
11.1.1. Форма состояния и начальное состояние ......................................... 284
11.1.2. Настройка редукторов для реагирования на входящие действия ..... 286
11.1.3. Объединение редукторов в нашем хранилище................................. 294
11.1.4. Тестирование редукторов ................................................................ 295
11.2. Сведение React и Redux .................................................................................. 297
11.2.1. Контейнеры против показательных компонентов............................. 297
11.2.2. Использование для подключения компонентов
к хранилищу Redux ..................................................................................... 301
11.2.3. Связывание действий с обработчиками событий компонентов ......... 306
11.2.4. Обновление тестов .......................................................................... 309
11.3. Резюме............................................................................................................ 310
Глава 12. React на стороне сервера и интеграция React Router ................................. 312
12.1. Что такое рендеринг на стороне сервера ........................................................ 313
12.2. Зачем рендерить на сервере ........................................................................... 318
12.3. Нужен ли вам рендеринг на стороне сервера? ................................................ 321
12.4. Рендеринг компонентов на сервере................................................................. 322
12.5. Переход на React Router.................................................................................. 328
12.6. Обработка аутентифицированных маршрутов с помощью роутера React......... 335
12.7. Рендеринг на стороне сервера с получением данных ...................................... 340
12.8. Резюме............................................................................................................ 350
Глава 13. Введение в React Native............................................................................. 352
13.1. Обзор React Native .......................................................................................... 352
13.2. React и React Native......................................................................................... 356
13.3. Когда использовать React Native ..................................................................... 359
13.4. Простейший пример Hello World ...................................................................... 361
13.5. Дальнейшее изучение..................................................................................... 364
13.6. Резюме............................................................................................................ 366