Разработка веб-приложений в ReactJS

Адам Хортон, Райан Вайс

Разработка веб-приложений 

в ReactJS

Adam Horton, Ryan Vice

Mastering React

MASTER THE ART OF BUILDING MODERN  
WEB APPLICATIONS USING REACT

Адам Хортон, Райан Вайс

Разработка  
веб-приложений  
в ReactJS

ОВЛАДЕЙТЕ ИСКУССТВОМ СОЗДАНИЯ  
СОВРЕМЕННЫХ ВЕБ-ПРИЛОЖЕНИЙ  
С ПОМОЩЬЮ REACT

Москва, 2016

УДК 004.738.5:004.42React
ББК 32.973.4

Х82

Хортон А., Вайс Р.

Х82 Разработка веб-приложений в ReactJS: пер. с англ. Рагимо
ва Р. Н. – М.: ДМК Пресс, 2016. – 254 с.: ил.

ISBN 978-5-94074-819-9

ReactJSвыделяетсяизмассыпрочихвеб-фреймворковсобственнымподходом

к композиции, который обеспечивает сверхбыстрое отображение. Из книги вы
узнаете,какобъединитьконгломератвеб-технологий,окружающихReactJS,вкомплексный набор инструментов для построения современного веб-приложения.
Книга начинается с базовых понятий, а затем переходит к более сложным темам,
такимкаквалидацияформипроектированиеполноценногоприложения,включающеговсебявсеэтапыпроектирования.Такжекнигапознакомитвасснесколькими
способами реализации впечатляющей анимации с помощью ReactJS.

Издание предназначено хорошо разбирающимся в основах JavaScript веб
разработчикам, у которых есть желание узнать, что ReactJS способен привнести
в архитектуру современного приложения.

УДК 004.738.5:004.42React
ББК 32.973.4

Copyright © Packt Publishing 2016. First published in the English language

under the title “Mastering React” – (9781783558568).

Все права защищены. Любая часть этой книги не может быть воспроиз
ведена в какой бы то ни было форме и какими бы то ни было средствами без
письменного разрешения владельцев авторских прав.

Материал, изложенный в данной книге, многократно проверен. Но по
скольку вероятность технических ошибок все равно существует, издательство
не может гарантировать абсолютную точность и правильность приводимых
сведений. В связи с этим издательство не несет ответственности за возможные
ошибки, связанные с использованием книги.

ISBN 978-1-78355-856-8 (анг.) © 2016 Packt Publishing
ISBN 978-5-94074-819-9 (рус.) © Оформление, перевод, ДМК Пресс, 2016

Содержание

Пролог...................................................................... 9

Об.авторе.................................................................12

О.техническом.рецензенте..........................................14

Предисловие............................................................15

Глава.1..Введение.в.React...........................................22
Пример Hello React ............................................................................................22
JSX ............................................................................................................................26
Как это работает .............................................................................................27
Декомпиляция JSX ........................................................................................28
Структура результата отображения ........................................................29
Свойства .................................................................................................................31
Как это работает .............................................................................................32
Типы свойств ...................................................................................................33
Метод getDefaultProps .................................................................................34
Состояние ..............................................................................................................35
Как это работает .............................................................................................37
Итоги .......................................................................................................................38

Глава.2..Объединение.компонентов.и.их.жизненный..
цикл........................................................................39
Объединение простых компонентов ............................................................39
Объединение динамических компонентов ................................................41
Как это работает .............................................................................................43
Доступ к дочерним элементам компонента ...............................................47
Жизненный цикл компонента: подключение и отключение ...............52
Жизненный цикл компонента: события обновления .............................55
Как это работает .............................................................................................58
Итоги .......................................................................................................................61

Глава.3..Динамические.компоненты,.примеси,..
формы.и.прочие.элементы.JSX....................................62
Динамические компоненты .............................................................................62
Как это работает .............................................................................................64
Примеси ..................................................................................................................66

 Содержание

Как это работает .............................................................................................68
Формы .....................................................................................................................70
Управляемые компоненты: доступность только для чтения ..........70
Управляемые компоненты: доступность для чтения и записи.......71
Управляемые компоненты: простая форма ...........................................74
Валидация .........................................................................................................79
Итоги .......................................................................................................................93

Глава.4..Анатомия.React-приложений...........................95
Что такое одностраничное приложение? ...................................................96
Три аспекта проектирования одностраничных приложений ..............97
Системы сборки ..............................................................................................99
Препроцессоры CSS ................................................................................... 104
Компиляция современного синтаксиса JS и шаблонов JSX  ....... 105
Архитектура клиентских компонентов ............................................... 105
Проектирование приложения ................................................................. 109
Итоги .................................................................................................................... 115

Глава.5..Начало.работы.над.React-приложением...........116
Проектирование приложения ...................................................................... 116
Создание схем .............................................................................................. 117
Субъекты данных ........................................................................................ 121
Основные представления и карта сайта .............................................. 121
Подготовка среды разработки ..................................................................... 122
Установка Node и его зависимостей ..................................................... 122
Установка и настройка Webpack ............................................................ 124
Некоторые соображения перед началом .................................................. 130
React и отображение .................................................................................. 130
Поддержка браузеров ................................................................................ 131
Валидация форм .......................................................................................... 133
Начало работы над приложением .............................................................. 133
Структура каталогов .................................................................................. 133
Фиктивная база данных............................................................................ 134
Основные представления ......................................................................... 138
Связывание представлений с React Router ....................................... 139
Итоги .................................................................................................................... 141

Глава.6..Реализация.React-приложения.блога,..
часть.1:.действия.и.общие.компоненты.......................142
Действия Reflux ................................................................................................ 143
Многократно используемые компоненты и базовые стили .............. 144
Базовые стили .............................................................................................. 145

Содержание  7

Индикатор ввода и загрузки ................................................................... 148
Заголовок приложения ............................................................................. 151
Итоги .................................................................................................................... 152

Глава.7..Реализация.React-приложения.блога,..
часть.2:.пользователи..............................................153
Описание программного кода ...................................................................... 154
Конфигурация времени выполнения приложения  ............................. 155
Примеси и зависимости ................................................................................. 155
Чтение и запись cookies ............................................................................ 155
Примеси обслуживания форм ................................................................ 156
Хранилища, связанные с пользователями .............................................. 159
Хранилище контекста сеансов ............................................................... 159
Хранилище сведений о пользователях ................................................ 162
Представления, связанные с пользователями ....................................... 164
Представление входа ................................................................................. 164
Представление создания пользователя ............................................... 166
Компонент представления пользователя ........................................... 173
Представление списка пользователей ................................................. 176
Представление пользователя .................................................................. 177
Другие затронутые представления ............................................................ 178
Заголовок приложения ............................................................................. 178
Итоги .................................................................................................................... 179

Глава.8..Реализация.React-приложения.блога,..
часть.3:.статьи........................................................180
Описание программного кода ...................................................................... 180
Хранилище статей ........................................................................................... 181
Представления для статей ............................................................................ 183
Создание/редактирование статьи ......................................................... 183
Представление статьи ................................................................................ 189
Компонент списка статей ......................................................................... 194
Представление списка статей ................................................................. 196
Другие затронутые представления ............................................................ 197
Представление пользователя .................................................................. 198
Итоги .................................................................................................................... 199

Глава.9..Реализация.React-приложения.блога,..
часть.4:.бесконечная.прокрутка.и.поиск......................200
Бесконечная прокрутка с загрузкой .......................................................... 201
Описание программного кода ................................................................. 201
Изменения в хранилище статей ............................................................. 201

 Содержание

Изменения в компоненте списка статей ............................................. 206
Поиск статей ...................................................................................................... 209
Описание программного кода ................................................................. 210
Хранилище для поиска ............................................................................. 210
Модификация хранилища постов ......................................................... 211
Изменения в заголовке приложения .................................................... 214
Изменения в компоненте списка статей ............................................. 215
Заключительные соображения ................................................................... 218
Предлагаемые усовершенствования .................................................... 218
Что дальше .................................................................................................... 219

Глава.10..Анимация.в.React.......................................220
Термины анимации .......................................................................................... 221
CSS-переходы переключением класса ..................................................... 221
Код на JavaScript ......................................................................................... 222
Исходный CSS-код ..................................................................................... 223
Анимация появления/исчезновения элементов DOM ...................... 225
Всплывающее меню ................................................................................... 225
Код на JavaScript ......................................................................................... 226
Исходный CSS-код ..................................................................................... 228
Фильтрация списка .................................................................................... 231
Код на JavaScript ......................................................................................... 232
Исходный CSS-код ..................................................................................... 235
Использование библиотеки для анимации React-Motion ................. 236
Как работает React-Motion ...................................................................... 236
Анимация часов ........................................................................................... 237
Код на JavaScript ......................................................................................... 238
Исходный CSS-код ..................................................................................... 245
Итоги .................................................................................................................... 247

Предметный.указатель.............................................248

Пролог

Всем нам знакома избитая фраза: «Не изобретайте велосипед».
В общем смысле я признаю мудрость этого старого изречения, 
особенно применительно к разработке программного обеспечения. 
Предполагается, что программисты всегда должны работать в рамках 
известных моделей и как можно быстрее добиваться нужного результата. В области программной инженерии в ходу масса выражений, 
принижающих роль, казалось бы, ненужных экспериментов и проб: 
не дергайся при бритье, не изобретай велосипед, самоварное золото, 
конфигурирование, подстройка, баловство, переделка или изготовление снежинок под заказ. Кроме того, часто можно услышать: «Самая 
короткая дорога та, которую знаешь». И действительно, самые титулованные разработчики программного обеспечения гордо стоят на 
плечах гигантов и следуют установленным методикам и стандартам. 
Самооправданием такого подхода служит лозунг: «Это придумано не 
нами». Точно придерживаться плана, оставаться сосредоточенным, 
не тратить времени зря и делать только то, что нам уже знакомо.
Если и есть сообщество разработчиков программного обеспечения, которое отвергает такое мировоззрение, то это программисты на 
JavaScript. Постоянно меняющиеся возможности браузеров, нескончаемый приток разработчиков с различным опытом работы в других 
областях и часто пересматриваемые стандарты самого JavaScript – 
все это вместе определяет непрерывную смену методик.
Обновление подходов здесь является делом обычным, и так было 
всегда. При взаимодействии с DOM в браузере возникали проблемы, и эта область стала следующей целью для обновления. Причина появления на свет Sizzle, JQuery и в конечном итоге встроенной 
функции querySelectorAll кроется в фундаментальной неудовлетворенности существующими стандартами. Форматы XML и JSON из 
просто применяемых на практике превратились в доминирующие 
стандарты обмена информацией в Интернете. Загрузите любой современный JavaScript-фреймворк и вы убедитесь, что он построен на 
основе сразу нескольких моделей. Взгляните на список велосипедов 
различной формы и размеров: MVVM, MVC, MVW, MVP, Chain of 
Responsibility, PubSub, Event-Driven, Declarative, Functional, ObjectOriented, Modules, Prototypes. Единственно правильного способа 

 Пролог

разработки программ просто не существует. Кроме того, даже беглый 
взгляд на мир препроцессоров, таких как CoffeeScript, LiveScript, 
Babel, Typescript и ArnoldC, показывает, что разработчики заняты 
лихорадочным обновлением и самого JavaScript. Здесь ничто не является неприкосновенным, и, возможно, именно поэтому JavaScript 
развивается так быстро.
Я хорошо помню свое первое знакомство с React. Я тогда присутствовал на довольно известной конференции в Сан-Франциско и во 
время обеда имел счастье сидеть рядом с разработчиками из Facebook 
и Khan Academy, которые вели оживленую беседу. В то время самыми 
популярными инструментами были Ember, Backbone и, конечно же, 
Angular (в рамках конференции им было посвящено что-то около тридцати докладов). Мы начали обсуждать плюсы и минусы существующих инструментов, и разговор зашел о проблемах, возникающих из-за 
сложившегося мнения об абстрактности веб-приложений. Именно тогда человек, сидящий рядом со мной, сказал: «Может быть, вам нужно 
присоединиться к сообществу React», – и пригласил меня послушать 
его доклад, который должен был состояться в тот же день. Конечно же, 
я принял приглашение. Закончилось тем, что самой полезной (и самой 
спорной) презентацией стала та, на которую я пошел.
Мой собеседник за обедом, который представился как Пит Хант 
(Pete Hunt), оказался ключевым действующим лицом, продвигающим 
новый взгляд на веб-приложения. Я присутствовал на его выступлении и сразу понял, что наблюдаю очередное великое изобретение 
велосипеда в JavaScript. Обычные двухсторонние методы связывания 
данных были отброшены и заменены на более четкий односторонний 
поток данных, а стандартный шаблон MVC организации приложений 
был переосмыслен и преобразован в действия, хранилища и диспетчеры. Однако самой интересной и радикальной особенностью React 
был его способ обращения с DOM, который состоял в его полной 
и бескомпромиссной перестройке с нуля из JavaScript.
Если вы выбрали эту книгу, значит, вас интересует будущее JavaScript. Эта часто упоминаемая тема переосмысления сейчас более 
актуальна, чем когда-либо в последние несколько лет. React, ES6, 
современные системы сборки, скаффолдинг и многое другое являются новыми инструментами, заполняющими ландшафт JavaScript. 
Эта книга важна, потому что она рассматривает React без отрыва от 
современной экосистемы. Прочитав ее, вы освоите принципы, необходимые для проектирования и разработки реальных приложений, 
и в конечном итоге научитесь применять их на практике.

Пролог  11

Я не могу представить себе лучшего проводника в этом захватывающем путешествии по передовым областям проектирования приложений, чем Адам. Я познакомился с ним, когда был студентом, 
и с тех пор не раз имел удовольствие слышать его выступления на 
конференции Thunder Plains, посвященной самым современным 
и грандиозным веб-разработкам. Он представлял прихотливую коллекцию своих личных проектов, таких как посадка в игре со смещением средней точки и полностью переделанный механизм бросания 
лучей в трехмерной графике на чистом JavaScript.
Адам – уникальный программист. Он работает как ученый, мастер 
и художник. Он не боится перестраивать существующие системы, 
чтобы лучше в них разобраться, и экспериментирует с новыми подходами, чтобы найти более эффективные способы достижения своих целей. Чтобы разобраться в этих новых захватывающих событиях 
в мире JavaScript, вам потребуется гид, который поможет критически 
взглянуть на них, заняться их исследованием и сделать для себя открытия.
Другим вашим гидом станет Райан Вайс, на протяжении многих 
лет трижды удостаиваемый звания Microsoft MVP, автор книг по промышленной разработке, которые часто обсуждаются на различных отраслевых мероприятиях, а также закаленный в сражениях разработчик 
программного обеспечения. И что еще более важно, Райан создал собственную компанию Vice Software LLC, которая основывает свои решения на React. Его реальный опыт в разработке проектов, основанных на 
React, характеризует его как отличного наставника, способного помочь 
вам перейти к созданию собственных передовых веб-приложений.
Велосипеды тоже нуждаются в обновлении. Если вы с этим не согласны, попробуйте поставить на свой автомобиль колеса, некогда 
изобретенные впервые. Будьте последовательны в своих убеждениях 
и прокатитесь с ветерком по шоссе, двигаясь на громоздких каменных 
дисках. А я буду мечтать о летающих автомобилях и делать ставку на 
JavaScript.
Джесси Харлин (Jesse Harlin), 
http://jesseharlin.net/,  
разработчик на JavaScript и лидер сообщества.

Об авторе

Адам Хортон (Adam Horton) – ярый поклонник старых игр, а также 
создатель, разрушитель и перестройщик всего и вся в Сети, вычислительной технике и компьютерных играх. Начинал карьеру как разработчик встроенного программного обеспечения в подразделении по 
разработке высокопроизводительных серверов Superdome в компании Hewlett Packard. Там он с помощью JavaScript и C управлял питанием, охлаждением, контролем исправности и настройкой этих чудовищных устройств. Затем он занимался веб-разработкой для PayPal, 
используя кросс-доменные технологии JavaScript, основанные на 
приемах идентификации пользователей. В последнее время работает 
в ESO Solutions ведущим разработчиком на JavaScript и занимается 
созданием приложений следующего поколения для сбора добольничных электронных медицинских карт (Electronic Health Record, EHR).
Адам верит в общедоступность, повсеместность и открытость Интернета. Ценит прагматизм и преобладание практики над догмой при 
проектировании и разработке вычислительных приложений и в образовании.

Я хотел бы поблагодарить мою жену за ее бесконечное терпение и поддержку. Она – как попутный ветер, подталкивающий 
меня во всех моих начинаниях, в том числе и при работе над 
этой книгой. Я также хотел бы поблагодарить своих родителей за то, что заботливо заправляют мою ракету, пока я играю 
с системой наведения.

Райан Вайс (Ryan Vice) – основатель и главный разработчик компании Vice Software, специализирующейся на решениях по индивидуальным заказам клиентов, желающих вывести свои MVP на рынок 
или модернизировать существующие приложения. Vice Software предлагает не только весьма конкурентоспособные цены по всем направлениям, но и основывает свою ценовую политику на сложности задач, 
что позволяет клиентам оплачивать решения по ставке высококлассного специалиста только при возникновении такой необходимости, 
а на более простые работы расценки гораздо ниже. Райан трижды был 
удостоен звания Microsoft MVP, является автором еще одной книги 

Об авторе  13

по архитектуре программного обеспечения, а также часто выступает 
на конференциях и принимает участие в мероприятиях, проходящих 
в Техасе. Кроме того, Райану выпала удача жениться на Хизер, и он 
большую часть своего свободного времени тратит на попытки не отставать от трех своих детей: Грейс, Дилана и Ноя.

О техническом  
рецензенте

Тунг Дао (Tung Dao) – специалист по комплексной разработке вебприложений с многолетним опытом создания веб-сайтов и служб.
Ныне работает инженером-программистом в FPT Software, во 
Вьетнаме, где разрабатывает веб-службы RESTful, основанные на 
NoSQL и Elasticsearch. В свободное время занимается созданием вебприложений на Clojure/Go или возится со своим Raspberry Pi.
Клиентские части своих веб-приложений в основном пишет на 
ClojureScript/Reagent (библиотека для связи React с Clojure). При 
работе над библиотекой применил несколько идей из React. Эта книга послужила ему напоминанием, так как он работает со следующим 
поколением JavaScript (ES6) и повторно осмысливает основные идеи 
React.

Большое спасибо авторам и сотрудникам Packt Publishing за их 
напряженную работу и поддержку.