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

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

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

Adam Horton, Ryan Vice

Mastering React

MASTER THE ART OF BUILDING MODERN  
WEB APPLICATIONS USING REACT

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

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

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

Москва, 2023

2-е издание, электронное

УДК 004.738.5:004.42React
ББК 32.973.4
Х82

Х82
Хортон, Адам.
Разработка веб-приложений в ReactJS / А. Хортон, Р. Вайс ; пер. с англ. 
Р. Н. Рагимова. — 2-е изд., эл. — 1 файл pdf : 255 с. — Москва : ДМК Пресс, 
2023. — Систем. требования: Adobe Reader XI либо Adobe Digital Editions 
4.5 ; экран 10". — Текст : электронный.
ISBN 978-5-89818-503-9
ReactJS выделяется из массы прочих веб-фреймворков собственным подходом 
к композиции, который обеспечивает сверхбыстрое отображение. Из книги вы узнаете, как объединить конгломерат веб-технологий, окружающих ReactJS, в комплексный набор инструментов для построения современного веб-приложения. Книга начинается с базовых понятий, а затем переходит к более сложным темам, таким 
как валидация форм и проектирование полноценного приложения, включающего в 
себя все этапы проектирования. Также книга познакомит вас с несколькими способами реализации впечатляющей анимации с помощью ReactJS.
Издание предназначено хорошо разбирающимся в основах JavaScript веб-разработчикам, у которых есть желание узнать, что ReactJS способен привнести в архитектуру современного приложения.

УДК 004.738.5:004.42React 
ББК 32.973.4

Электронное издание на основе печатного издания: Разработка веб-приложений в ReactJS / 
А. Хортон, Р. Вайс ; пер. с англ. Р. Н. Рагимова. — Москва : ДМК Пресс, 2016. — 254 с. — ISBN 
978-5-94074-819-9. — Текст : непосредственный.

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

В соответствии со ст. 1299 и 1301 ГК РФ при устранении ограничений, установленных техническими средствами 
защиты авторских прав, правообладатель вправе требовать от нарушителя возмещения убытков или выплаты компенсации.

ISBN 978-5-89818-503-9
© 2016 Packt Publishing
© Оформление, перевод, ДМК Пресс, 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 без отрыва от 
современной экосистемы. Прочитав ее, вы освоите принципы, необходимые для проектирования и разработки реальных приложений, 
и в конечном итоге научитесь применять их на практике.