Разработка веб-приложений в ReactJS (1500,00 руб.)

Стр.5

Стр.6

Стр.7

Стр.8

Стр.9

УДК 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

Стр.5

Содержание Пролог...................................................................... 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

Стр.6

6  Содержание Как это работает .............................................................................................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

Содержание  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

Стр.8

8  Содержание Изменения в компоненте списка статей ............................................. 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

Стр.9