-018 С79 Стефанов Стоян С79 React.js. Быстрый старт. — СПб.: Питер, 2017. — 304 с.: ил. — (Серия «Бестселлеры O’Reilly»). Незаменимая вводная книга по технологии React для взыскательных JavaScriptразработчиков. Все самое интересное о сверхпопулярном инструменте от компании Facebook. В книге рассмотрены основные концепции высокопроизводительного программирования при помощи React, реальные примеры кода и доступные блок-схемы. Прочитав ее, вы научитесь: • Создавать и использовать собственные компоненты React наряду с универсальными компонентами DOM. • Писать компоненты для таблиц данных, позволяющие редактировать, сортировать таблицу, выполнять в ней поиск и экспортировать ее содержимое. • Использовать дополнительный синтаксис JSX в качестве альтернативы для вызовов функций. • Запускать низкоуровневый гибкий процесс сборки, который освободит вам время и поможет сосредоточиться на работе с React. • Работать с инструментами ESLint, Flow и Jest, позволяющими проверять и тестировать код по мере разработки приложения. • Обеспечивать коммуникацию между компонентами при помощи Flux. 12+ ( от 29 декабря 2010 г. № 436-ФЗ.) -018 получены по соглашению с O’Reilly. Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав. англ. Authorized Russian translation of the English edition of React: Up & Running, © 2016 Stoyan Stefanov This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same © Перевод на русский язык ООО Издательство «Питер», 2017 © Издание на русском языке, оформление ООО Издательство «Питер», 2017 © Серия «Бестселлеры O’Reilly», 2017 Предисловие . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 О чем эта книга. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Соглашения, используемые в книге . . . . . . . . . . . . . . . . . . . . . 17 Использование примеров кода. . . . . . . . . . . . . . . . . . . . . . . . . 18 Благодарности. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 . Hello World . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Установка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Привет, мир React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Так что же сейчас произошло?. . . . . . . . . . . . . . . . . . . . . . . . . 25 React.DOM.*. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Специальные DOM-атрибуты . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Расширение браузера React DevTools . . . . . . . . . . . . . . . . . . . . 33 Далее: настраиваемые компоненты . . . . . . . . . . . . . . . . . . . . . 33 . Жизнь компонента. . . . . . . . . . . . . . . . . . . . . . . . . . 35 Самый минимум. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Свойства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 propTypes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Состояние . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Компонент textarea, отслеживающий свое состояние . . . . . . . . 45 Немного о DOM-событиях. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Обработка событий в прежние времена. . . . . . . . . . . . . . . . 50 Обработка событий в React. . . . . . . . . . . . . . . . . . . . . . . . . 52 Сравнение свойств и состояния . . . . . . . . . . . . . . . . . . . . . . . . 53 Свойства в исходном состоянии: антишаблон. . . . . . . . . . . . . . 54 Доступ к компоненту извне . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Изменение свойств на лету. . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Методы управления жизненным циклом. . . . . . . . . . . . . . . . . . 60 Примеры управления жизненным циклом. . . . . . . . . . . . . . . . . 61 Тотальная регистрация. . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Использование примеси . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Применение дочернего компонента. . . . . . . . . . . . . . . . . . . 67 Выигрыш в производительности: предотвращение обновлений компонентов. . . . . . . . . . . . . . . . . . . . . . . . . . . 71 PureRenderMixin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 . Excel: необычный табличный компонент. . . . . . . 77 Начнем с данных. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Цикл создания заголовков таблицы . . . . . . . . . . . . . . . . . . . . . 78 Отладка для избавления от консольного предупреждения . . . . 81 Добавление содержимого . . . . . . . . . . . . . . . . . . . . . . . . 84 Сортировка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Создание индикации сортировки в пользовательском интерфейсе. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Редактирование данных. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Редактируемая ячейка. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Поле ввода ячейки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Сохранение. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Выводы и определение различий в виртуальной DOM-модели. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Поиск. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Состояние и пользовательский интерфейс. . . . . . . . . . . . . 102 Фильтрация содержимого . . . . . . . . . . . . . . . . . . . . . . . . . 105 Как можно усовершенствовать поиск?. . . . . . . . . . . . . . . . 108 Мгновенное воспроизведение. . . . . . . . . . . . . . . . . . . . . . . . . 108 Как можно усовершенствовать воспроизведение? . . . . . . . 111 А возможна ли альтернативная реализация?. . . . . . . . . . . 111 Скачивание данных таблицы . . . . . . . . . . . . . . . . . . . . . . . . . 111 . JSX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Привет, JSX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Транспиляция JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Babel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Клиентская сторона. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 О преобразовании JSX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 JavaScript в JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Пробельные символы в JSX . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Комментарии в JSX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Элементы HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Анти-XSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Распространяемые атрибуты . . . . . . . . . . . . . . . . . . . . . . . . . 130 Возвращение в JSX нескольких узлов. . . . . . . . . . . . . . . . . . . 133 Отличия JSX от HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Просто class использовать нельзя, а как насчет for?. . . . . . 136 style является объектом. . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Закрывающие теги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Атрибуты в «верблюжьем» регистре. . . . . . . . . . . . . . . . . 138 JSX и формы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Обработчик события onChange . . . . . . . . . . . . . . . . . . . . . 138 Сравнение value и defaultValue. . . . . . . . . . . . . . . . . . . . . . 139 Значение компонента

. . . . . . . . . . . . . . . . . . . 140
Значение компонента <select> .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 142
Компонент Excel в JSX .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 143
. Настройки для разработки приложения .  .  .  .  .  . 144
Типовое приложение.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 145
Файлы и папки .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 145
index.html.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 147
CSS.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 149
JavaScript .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 150
JavaScript: модернизированный код.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 150
Установка обязательных инструментальных средств.  .  .  .  .  .  .  . 155
Node.js .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 156
Browserify.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 156
Babel.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 157
React и прочие .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 157
Займемся сборкой .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 158
Транспиляция JavaScript .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 158
Создание пакета JavaScript .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 159
Создание пакета CSS.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 159
Результаты!. .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 160
Версия для Windows .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 160
Сборка в процессе разработки. .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 161
Развертывание.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 162
Идем дальше.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 164
. Создание приложения .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 165
Whinepad v.0.0.1. .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 166
Подготовка к работе.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 166
Приступим к программированию.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 166
Компоненты.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 169
Настройка.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 170
Исследование.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 171
Компонент <Button>.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 173
Button.css .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 174
Button.js .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 175
Формы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Компонент <Suggest>.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 180
Компонент <Rating>.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 183
Компонент <FormInput>.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 188
Компонент <Form>.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 192
Компонент <Actions> .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 196
Диалоги .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 198
Настройка приложения. .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 202
<Excel>: новый и усовершенствованный .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 204
Компонент <Whinepad>.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 216
Подведение итогов. .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 220
. Проверка качества кода, соответствия
типов, тестирование, повтор. .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 222
package.json.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 222
Настройка Babel .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 223
Сценарии .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 224
Средство ESLint .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 225
Установка.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 225
Запуск. .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 226
Все правила .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 228
Средство Flow .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 228
Установка.  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 229
Запуск. .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 229
Подписка на проверку соответствия типов. .  .  .  .  .  .  .  .  .  .  .  . 230</article></body></html>