React быстро. Веб-приложения на React, JSX, Redux и GraphQL

Вступление...........................................................................................................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
Глава 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
Глава 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
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
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
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
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
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
ПРИЛОЖЕНИЯ.......................................................................................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
Маршруты и команды 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