Оглавление
Вступление .......................................................................................................... 18
Предисловие ....................................................................................................... 20
Благодарности .................................................................................................... 22
О книге..................................................................................................................24
Структура книги .................................................................................................... 24
Для кого написана эта книга (обязательно прочитайте!)....................................... 25
Кому эта книга не подойдет (тоже прочитайте!).................................................... 25
Как использовать эту книгу ................................................................................... 26
Исходный код ........................................................................................................ 27
Об авторе..............................................................................................................28
Об обложке ........................................................................................................... 29
ЧАСТЬ I. ОСНОВЫ REACT ....................................................................... 31
Глава 1. Знакомство с React ...................................................................................... 32
1.1. Что такое React? ............................................................................................. 34
1.2. Проблема, которую решает React.................................................................... 35
1.3. Преимущества React ....................................................................................... 36
1.3.1. Простота................................................................................................. 37
1.3.2. Скорость и удобство тестирования.......................................................... 44
1.3.3. Экосистема и сообщество ....................................................................... 45
1.4. Недостатки React ............................................................................................ 46
1.5. Как React интегрируется в веб-приложение .................................................... 47
1.5.1. Библиотеки React и объекты рендеринга ................................................ 48
1.5.2. Одностраничные приложения и React..................................................... 50
1.5.3. Стек React............................................................................................... 52
1.6. Первый код React: Hello world ......................................................................... 53
1.7. Вопросы.......................................................................................................... 58
1.8. Итоги.............................................................................................................. 59
1.9. Ответы............................................................................................................ 59
6 Оглавление
Глава 2. Первые шаги с React.................................................................................... 60
2.1. Вложение элементов....................................................................................... 60
2.2. Создание классов компонентов....................................................................... 64
2.3. Работа со свойствами ..................................................................................... 68
2.4. Вопросы.......................................................................................................... 74
2.5. Итоги.............................................................................................................. 74
2.6. Ответы............................................................................................................ 75
Глава 3. Знакомство с JSX ......................................................................................... 76
3.1. Что такое JSX и чем он хорош? ....................................................................... 77
3.2. Логика JSX...................................................................................................... 80
3.2.1. Создание элементов с JSX....................................................................... 81
3.2.2. Работа с JSX в компонентах .................................................................... 82
3.2.3. Вывод переменных в JSX ........................................................................ 83
3.2.4. Работа со свойствами в JSX..................................................................... 85
3.2.5. Создание методов компонентов React..................................................... 90
3.2.6. if/else в JSX............................................................................................. 91
3.2.7. Комментарии в JSX.................................................................................. 95
3.3. Настройка транспилятора JSX с Babel ............................................................. 96
3.4. Потенциальные проблемы React и JSX .......................................................... 101
3.4.1. Специальные символы.......................................................................... 101
3.4.2. Атрибуты data-...................................................................................... 103
3.4.3. Атрибут style......................................................................................... 103
3.4.4. class и for.............................................................................................. 104
3.4.5. Значения логических атрибутов............................................................ 104
3.5. Вопросы........................................................................................................ 105
3.6. Итоги............................................................................................................ 106
3.7. Ответы.......................................................................................................... 106
Глава 4. Состояния и их роль в интерактивной природе React................................. 107
4.1. Что такое состояние компонента React?........................................................ 109
4.2. Работа с состояниями ................................................................................... 111
4.2.1. Обращение к состояниям...................................................................... 111
4.2.2. Назначение исходного состояния.......................................................... 112
4.2.3. Обновление состояния.......................................................................... 114
4.3. Состояния и свойства.................................................................................... 119
4.4. Компоненты без состояния ........................................................................... 120
4.5. Компоненты с состоянием и без состояния ................................................... 122
4.6. Вопросы........................................................................................................ 128
4.7. Итоги ............................................................................................................ 128
4.8. Ответы.......................................................................................................... 129
Оглавление 7
Глава 5. События жизненного цикла компонентов React ......................................... 130
5.1. Общие сведения о событиях жизненного цикла компонентов React .............. 131
5.2. Категории событий ....................................................................................... 131
5.3. Реализация события ..................................................................................... 135
5.4. Сразу все действия ....................................................................................... 136
5.5. События подключения .................................................................................. 139
5.5.1. componentWillMount()............................................................................ 140
5.5.2. componentDidMount()............................................................................ 140
5.6. События обновления..................................................................................... 144
5.6.1. componentWillReceiveProps(newProps) ................................................... 145
5.6.2. shouldComponentUpdate()...................................................................... 145
5.6.3. componentWillUpdate() .......................................................................... 146
5.6.4. componentDidUpdate()........................................................................... 146
5.7. События отключения..................................................................................... 146
5.7.1. componentWillUnmount()........................................................................ 147
5.8. Простой пример............................................................................................ 147
5.9. Вопросы........................................................................................................ 151
5.10. Итоги .......................................................................................................... 151
5.11. Ответы........................................................................................................ 152
Глава 6. Обработка событий в React........................................................................ 153
6.1. Работа с событиями DOM в React.................................................................. 154
6.1.1. Фазы спуска и подъема......................................................................... 156
6.1.2. События React во внутренней реализации ............................................ 159
6.1.3. Работа с объектами события React SyntheticEvent ................................. 163
6.1.4. Использование событий и состояния..................................................... 168
6.1.5. Передача обработчиков событий как свойств ....................................... 170
6.1.6. Передача данных между компонентами ................................................ 173
6.2. Реакция на события DOM, не поддерживаемые React.................................... 175
6.3. Интеграция React с другими библиотеками: UI-события jQuery ..................... 178
6.3.1. Интеграция кнопок ............................................................................... 179
6.3.2. Интеграция надписей............................................................................ 181
6.4. Вопросы........................................................................................................ 183
6.5 Итоги............................................................................................................. 183
6.6. Ответы.......................................................................................................... 184
Глава 7. Работа с формами в React.......................................................................... 185
7.1. Рекомендуемый способ работы с формами в React........................................ 186
7.1.1. Определение формы и ее событий в React............................................ 189
7.1.2. Определение элементов форм .............................................................. 191
7.1.3. Отслеживание изменений в формах...................................................... 197
8 Оглавление
7.1.4. Поле для банковского счета.................................................................. 200
7.2. Альтернативные способы работы с формами................................................. 202
7.2.1. Неуправляемые элементы с отслеживанием изменений ........................ 203
7.2.2. Неуправляемые элементы без отслеживания изменений....................... 205
7.2.3. Использование ссылок для обращения к переменным........................... 206
7.2.4. Значения по умолчанию........................................................................ 209
7.3. Вопросы........................................................................................................ 210
7.4. Итоги ............................................................................................................ 211
7.5. Ответы.......................................................................................................... 211
Глава 8. Масштабируемость компонентов React ...................................................... 212
8.1. Свойства по умолчанию в компонентах......................................................... 213
8.2. Типы свойств React и проверка данных......................................................... 215
8.3. Рендеринг дочерних элементов .................................................................... 223
8.4. Создание компонентов React высшего порядка для повторного
использования кода............................................................................................. 226
8.4.1. Использование displayName: как отличить дочерние компоненты
от родителя.................................................................................................... 229
8.4.2. Использование оператора расширения: передача всех атрибутов ........ 230
8.4.3. Использование компонентов высшего порядка ..................................... 231
8.5. Презентационные и контейнерные компоненты............................................ 233
8.6. Вопросы........................................................................................................ 235
8.7. Итоги ............................................................................................................ 235
8.8. Ответы.......................................................................................................... 236
Глава 9. Компонент меню........................................................................................ 237
9.1. Структура проекта и инициализация............................................................. 238
9.2. Построение меню без JSX ............................................................................. 239
9.2.1. Компонент Menu ................................................................................... 240
9.2.2. Компонент Link ..................................................................................... 243
9.2.3. Запуск................................................................................................... 245
9.3. Построение меню в JSX................................................................................. 247
9.3.1. Переработка компонента Menu ............................................................. 248
9.3.2. Переработка компонента Link ............................................................... 250
9.3.3. Запуск проекта JSX ............................................................................... 251
9.4. Домашнее задание........................................................................................ 252
9.5. Итоги............................................................................................................ 252
Глава 10. Компонент Tooltip .................................................................................... 253
10.1. Структура проекта и инициализация........................................................... 254
10.2. Компонент Tooltip........................................................................................ 256
Оглавление 9
10.2.1. Функция toggle()................................................................................. 257
10.2.2. Функция render()................................................................................. 258
10.3. Запуск......................................................................................................... 261
10.4. Домашнее задание...................................................................................... 261
10.5. Итоги .......................................................................................................... 262
Глава 11. Компонент Timer ..................................................................................... 263
11.1. Структура проекта и инициализация........................................................... 264
11.2. Архитектура приложения ............................................................................ 266
11.3. Компонент TimerWrapper............................................................................. 268
11.4. Компонент Timer......................................................................................... 273
11.5. Компонент Button........................................................................................ 274
11.6. Запуск таймера ........................................................................................... 277
11.7. Домашнее задание ...................................................................................... 277
11.8. Итоги .......................................................................................................... 278
ЧАСТЬ 2. АРХИТЕКТУРА REACT............................................................ 279
Глава 12. Система сборки Webpack ......................................................................... 280
12.1. Что делает Webpack? .................................................................................. 281
12.2. Включение Webpack в проект...................................................................... 283
12.2.1. Установка системы Webpack и ее зависимостей .................................. 284
12.2.2. Настройка Webpack............................................................................. 286
12.3. Модуляризация кода ................................................................................... 288
12.4. Запуск Webpack и тестирование сборки ...................................................... 290
12.5. Оперативная замена модулей ..................................................................... 292
12.5.1. Настройка HMR ................................................................................... 294
12.5.2. Оперативная замена модулей в действии............................................ 297
12.6. Вопросы...................................................................................................... 299
12.7. Итоги .......................................................................................................... 299
12.8. Ответы........................................................................................................ 299
Глава 13. Маршрутизация в React ........................................................................... 300
13.1. Реализация маршрутизации с нуля ............................................................. 301
13.1.1. Создание проекта ............................................................................... 302
13.1.2. Создание мэппинга маршрутов в файле app.jsx................................... 304
13.1.3. Создание компонента Router в router.jsx.............................................. 305
13.2. React Router................................................................................................ 307
13.2.1. Стиль JSX в React Router ..................................................................... 310
13.2.2. История идентификатора фрагмента................................................... 311
13.2.3. История браузера................................................................................ 313
10 Оглавление
13.2.4. Настройка React Router для разработки с Webpack.............................. 314
13.2.5. Создание макетного компонента......................................................... 317
13.3. Функциональность React Router .................................................................. 320
13.3.1. Обращение к маршрутизатору с использованием компонента
высшего порядка withRouter........................................................................... 321
13.3.2. Навигация на программном уровне ..................................................... 322
13.3.3. Параметры URL и другие данные маршрутов....................................... 322
13.3.4. Передача свойств в Router.................................................................. 323
13.4. Маршрутизация с использованием Backbone ............................................... 325
13.5. Вопросы...................................................................................................... 328
13.6. Итоги .......................................................................................................... 329
13.7. Ответы........................................................................................................ 329
Глава 14. Работа с данными с использованием Redux ............................................. 330
14.1. Поддержка однонаправленной передачи данных в React ............................ 331
14.2. Архитектура данных Flux............................................................................. 334
14.3. Использование библиотеки данных Redux................................................... 336
14.3.1. Клон Netflix на базе Redux................................................................... 338
14.3.2. Зависимости и конфигурации.............................................................. 340
14.3.3. Включение Redux................................................................................ 343
14.3.4. Маршруты........................................................................................... 344
14.3.5. Объединение редьюсеров ................................................................... 345
14.3.6. Редьюсер для movies........................................................................... 347
14.3.7. Действия ............................................................................................. 350
14.3.8. Создатели действий ............................................................................ 352
14.3.9. Установление связи компонентов с хранилищем................................. 353
14.3.10. Передача действий ........................................................................... 356
14.3.11. Передача создателей действий в свойствах компонентов.................. 357
14.3.12. Выполнение клона Netflix .................................................................. 362
14.3.13. Redux: заключение............................................................................ 362
14.4. Вопросы...................................................................................................... 363
14.5. Итоги .......................................................................................................... 363
14.6. Ответы........................................................................................................ 364
Глава 15. Работа с данными в GraphQL ................................................................... 365
15.1. GraphQL ...................................................................................................... 366
15.2. Добавление сервера к клону Netflix............................................................. 368
15.2.1. Установка GraphQL на сервере............................................................ 370
15.2.2. Структура данных ............................................................................... 374
15.2.3. Схема GraphQL.................................................................................... 375
15.2.4. Запросы к API и сохранение ответа в хранилище ................................ 377
Оглавление 11
15.2.5. Вывод списка фильмов........................................................................ 382
15.2.6. GraphQL: заключение.......................................................................... 384
15.3. Вопросы...................................................................................................... 384
15.4. Итоги .......................................................................................................... 385
15.5. Ответы........................................................................................................ 385
Глава 16. Модульное тестирование кода React c Jest .............................................. 386
16.1. Разновидности тестирования ...................................................................... 387
16.2. Почему именно Jest? ................................................................................... 388
16.3. Модульное тестирование с Jest ................................................................... 390
16.3.1. Написание модульных тестов в Jest .................................................... 392
16.3.2. Тестовые утверждения Jest................................................................. 394
16.4. UI-тестирование React с использованием Jest и TestUtils ............................. 396
16.4.1. Поиск элементов с TestUtils ................................................................. 399
16.4.2. UI-тестирование виджета для генерирования паролей........................ 400
16.4.3. Неглубокий рендеринг ........................................................................ 405
16.5. TestUtils: заключение .................................................................................. 407
16.6. Вопросы...................................................................................................... 407
16.7. Итоги .......................................................................................................... 408
16.8. Ответы........................................................................................................ 408
Глава 17. Использование React с Node и универсальный JavaScript......................... 409
17.1. Зачем нужен React на сервере? И что такое универсальный JavaScript? ...... 410
17.1.1. Корректное индексирование страниц .................................................. 411
17.1.2. Повышение быстродействия с ускорением загрузки ............................ 412
17.1.3 Упрощенное сопровождение кода ........................................................ 413
17.1.4. Универсальный JavaScript с React и Node............................................. 413
17.2. React с Node................................................................................................ 416
17.3. React и Express: генерирование кода из компонентов на стороне сервера... 419
17.3.1. Рендеринг простого текста на стороне сервера ................................... 420
17.3.2. Рендеринг страницы HTML .................................................................. 421
17.4. Универсальный JavaScript с Express и React................................................. 429
17.4.1. Структура и конфигурация проекта..................................................... 431
17.4.2. Настройка сервера .............................................................................. 432
17.4.3. Структурные шаблоны на стороне сервера с использованием
Handlebars...................................................................................................... 437
17.4.4. Формирование компонентов React на сервере..................................... 440
17.4.5. Клиентский код React.......................................................................... 442
17.4.6. Настройка Webpack ............................................................................. 443
17.4.7. Запуск приложения ............................................................................. 445
17.5. Вопросы...................................................................................................... 449
12 Оглавление
17.6. Итоги .......................................................................................................... 450
17.7. Ответы ........................................................................................................ 450
Глава 18. Проект: создание книжного магазина с React Router................................ 451
18.1. Структура проекта и конфигурация Webpack .............................................. 454
18.2. Основной файл HTML.................................................................................. 457
18.3. Создание компонентов................................................................................ 458
18.3.1. Главный файл: app.jsx ........................................................................ 458
18.3.2. Компонент Cart ................................................................................... 466
18.3.3. Компонент Checkout............................................................................ 468
18.3.4. Компонент Modal................................................................................. 469
18.3.5. Компонент Product .............................................................................. 471
18.4. Запуск проекта............................................................................................ 472
18.5. Домашнее задание...................................................................................... 473
18.6. Итоги .......................................................................................................... 473
Глава 19. Проект: проверка паролей с Jest ............................................................. 474
19.1. Структура проекта и конфигурация Webpack .............................................. 476
19.2. Основной файл HTML.................................................................................. 480
19.3. Реализация модуля надежного пароля........................................................ 481
19.3.1. Тесты.................................................................................................. 481
19.3.2. Код ..................................................................................................... 482
19.4. Реализация компонента Password................................................................ 484
19.4.1. Тесты.................................................................................................. 484
19.4.2. Код ..................................................................................................... 485
19.5. Виджет в действии...................................................................................... 491
19.6. Домашнее задание...................................................................................... 493
19.7. Итоги .......................................................................................................... 493
Глава 20. Проект: реализация автозаполнения с Jest, Express и MongoDB............... 494
20.1. Структура проекта и конфигурация Webpack .............................................. 497
20.2. Реализация веб-сервера.............................................................................. 502
20.2.1. Определение REST-совместимых API................................................... 503
20.2.2. Рендеринг React на сервере ................................................................ 504
20.3. Добавление браузерного сценария ............................................................. 505
20.4. Создание серверного шаблона .................................................................... 506
20.5. Реализация компонента Autocomplete ......................................................... 507
20.5.1. Тесты для Autocomplete ...................................................................... 507
20.5.2. Код компонента Autocomplete ............................................................. 508
20.6. Все вместе .................................................................................................. 512
20.7. Домашнее задание ...................................................................................... 515
20.8. Итоги .......................................................................................................... 516
Оглавление 13
ПРИЛОЖЕНИЯ ...................................................................................... 517
Приложение А. Установка приложений.................................................................. 518
Установка React................................................................................................... 518
Установка Node.js................................................................................................ 519
Установка Express................................................................................................ 520
Установка Bootstrap............................................................................................. 521
Установка Browserify............................................................................................ 522
Установка MongoDB............................................................................................. 523
Использование Babel для компиляции JSX и ES6.................................................. 524
Node.js и ES6....................................................................................................... 526
Автономный браузер Babel .................................................................................. 526
Приложение Б. Шпаргалки по React ...................................................................... 527
Установка............................................................................................................ 528
React.............................................................................................................. 528
React DOM...................................................................................................... 528
Рендеринг ........................................................................................................... 528
ES5................................................................................................................. 528
ES5+JSX ......................................................................................................... 528
Рендеринг на стороне сервера............................................................................. 528
Компоненты ........................................................................................................ 529
ES5................................................................................................................. 529
ES5 + JSX ....................................................................................................... 529
ES6 + JSX ....................................................................................................... 529
Расширенные возможности компонентов............................................................. 529
Варианты (ES5) .............................................................................................. 529
ES5................................................................................................................. 529
ES5 + JSX ....................................................................................................... 530
ES6 + JSX ....................................................................................................... 530
События жизненного цикла ............................................................................ 531
Специальные свойства ................................................................................... 532
propTypes ....................................................................................................... 532
Свойства и методы компонентов .................................................................... 533
Дополнения React .......................................................................................... 533
Компоненты React .......................................................................................... 534
Приложение В. Краткая сводка Express.js .............................................................. 535
Установка Express.js ............................................................................................ 536
Генератор ...................................................................................................... 536
Основы........................................................................................................... 536
14 Оглавление
Маршруты и команды HTTP ............................................................................ 537
Запросы ......................................................................................................... 537
Сокращенные обозначения заголовков........................................................... 537
Ответ ............................................................................................................. 538
Сигнатуры обработчиков................................................................................ 538
Stylus и Jade................................................................................................... 538
Тело............................................................................................................... 539
Статические файлы........................................................................................ 539
Подсоединение промежуточных модулей ....................................................... 539
Другие популярные промежуточные модули .................................................. 540
Ресурсы.......................................................................................................... 540
Приложение Г. Шпаргалка по MongoDB и Mongoose .............................................. 541
MongoDB ............................................................................................................. 542
Консоль MongoDB................................................................................................ 542
Установка Mongoose....................................................................................... 542
Простейший вариант использования Mongoose .............................................. 542
Схема Mongoose ............................................................................................. 543
Пример Mongoose с использованием CRUD (Create/Read/Update/Delete)......... 543
Методы модели Mongoose .............................................................................. 544
Методы документов Mongoose........................................................................ 544
Приложение Д. ES6 для успеха.............................................................................. 545
Параметры по умолчанию ................................................................................... 545
Шаблонные литералы.......................................................................................... 547
Многострочные строки ........................................................................................ 547
Деструктурирующее присваивание................................................................. 548
Расширенные объектные литералы ................................................................ 548
Стрелочные функции........................................................................................... 551
Обещания............................................................................................................ 552
Конструкции с блочной областью видимости: let и const ..................................... 554
Классы ................................................................................................................ 555
Модули................................................................................................................ 557
Использование ES6 с Babel .................................................................................. 558
Другие возможности ES6 ..................................................................................... 558
