React в действии

Предисловие..................................................................................................................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
Глава 2. <Hello world! />: наш первый компонент........................................................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
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. Создание компонента <Route />.........................................................184
7.2.3. Сборка компонента <Router />...........................................................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. Создание компонента <Link/>............................................................208
8.1.3. Создание компонента <NotFound/>....................................................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
Глава 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. Использование <Provider /> для подключения компонентов к хранилищу 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