React быстро. Веб-приложения на React, JSX, Redux и GraphQL - Азат Мардан - E-Book

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

Azat Mardan

0,0

Beschreibung

Как решить проблемы front-end-разработчиков и сделать их жизнь более счастливой? Нужно всего лишь познакомиться с возможностями React! Только так вы сможете быстро выйти на новый уровень и получить не только моральное, но и материальное удовлетворение от веб-разработки. Успешные пользовательские интерфейсы должны быть визуально интересными, быстрыми и гибкими. React ускоряет тяжелые веб-приложения, улучшая поток данных между компонентами UI. Сайты начинают эффективно и плавно обновлять визуальные элементы, сводя к минимуму время на перезагрузку страниц. Перед вами труд, над которым на протяжении полутора лет работало более дюжины человек. Тщательно отобранные примеры и подробные комментарии позволяют разработчикам перейти на React быстро, чтобы затем эффективно создавать веб-приложения, используя всю мощь JavaScript. ВНУТРИ: • Основы React • Создание полнофункциональных веб-приложений с маршрутизацией • Тестирование • Оптимизация приложений React «Эта книга — лучший способ разобраться в React.js». Джон Сонмез, автора книги "Путь программиста" «Азат — один из самых авторитетных источников в области программирования. Эта книга выходит за рамки начального уровня и глубоко погружает в основы и архитектуру React». Эрик Хэнчетт, автор книги «Ember.js Cookbook» «React быстро — универсальный источник информации для читателя, который желает освоить React с его экосистемой инструментов, концепций и библиотек». Питер Купер, редактор «JavaScript Weekly» «Эта книга — отличный ресурс для изучения React. Четко и по делу. Я буду пользоваться ей в работе над своим следующим приложением». Натан Бэйли, полностековый разработчик, SpringboardAuto.com

Sie lesen das E-Book in den Legimi-Apps auf:

Android
iOS
von Legimi
zertifizierten E-Readern
Kindle™-E-Readern
(für ausgewählte Pakete)

Seitenzahl: 534

Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:

Android
iOS
Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



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

Научный редактор М. Устимова

Переводчик Е. Матвеев

Технический редактор А. Руденко

Литературный редактор А. Бульченко

Художник Л. Егорова

Корректоры С. Беляева, Н. Викторова

Верстка Л. Егорова

Азат Мардан

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

ISBN 978-5-4461-0952-4

© ООО Издательство "Питер", 2021

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

Оглавление

Отзывы о книге
Вступление
Предисловие
Благодарности
О книге
Структура книги
Для кого написана эта книга (обязательно прочитайте!)
Кому эта книга не подойдет (тоже прочитайте!)
Как использовать эту книгу
Исходный код
Об авторе
Об обложке
От издательства
Часть 1. Основы React
1. Знакомство с React
1.1. Что такое React?
1.2. Проблема, которую решает React
1.3. Преимущества React
1.4. Недостатки React
1.5. Как React интегрируется в веб-приложение
1.6. Первый код React: Hello world
1.7. Вопросы
1.8. Итоги
1.9. Ответы
2. Первые шаги с React
2.1. Вложение элементов
2.2. Создание классов компонентов
2.3. Работа со свойствами
2.4. Вопросы
2.5. Итоги
2.6. Ответы
3. Знакомство с JSX
3.1. Что такое JSX и чем он хорош?
3.2. Логика JSX
3.3. Настройка транспилятора JSX с Babel
3.4. Потенциальные проблемы React и JSX
3.5. Вопросы
3.6. Итоги
3.7. Ответы
4. Состояния и их роль в интерактивной природе React
4.1. Что такое состояние компонента React?
4.2. Работа с состояниями
4.3. Состояния и свойства
4.4. Компоненты без состояния
4.5. Компоненты с состоянием и без состояния
4.6. Вопросы
4.7. Итоги
4.8. Ответы
5. События жизненного цикла компонентов React
5.1. Общие сведения о событиях жизненного цикла компонентов React
5.2. Категории событий
5.3. Реализация события
5.4. Сразу все действия
5.5. События подключения
5.6. События обновления
5.7. События отключения
5.8. Простой пример
5.9. Вопросы
5.10. Итоги
5.11. Ответы
6. Обработка событий в React
6.1. Работа с событиями DOM в React
6.2. Реакция на события DOM, не поддерживаемые React
6.3. Интеграция React с другими библиотеками: UI-события jQuery
6.4. Вопросы
6.5. Итоги
6.6. Ответы
7. Работа с формами в React
7.1. Рекомендуемый способ работы с формами в React
7.2. Альтернативные способы работы с формами
7.3. Вопросы
7.4. Итоги
7.5. Ответы
8. Масштабируемость компонентов React
8.1. Свойства по умолчанию в компонентах
8.2. Типы свойств React и проверка данных
8.3. Рендеринг дочерних элементов
8.4. Создание компонентов React высшего порядка для повторного использования кода
8.5. Презентационные и контейнерные компоненты
8.6. Вопросы
8.7. Итоги
8.8. Ответы
9. Компонент меню
9.1. Структура проекта и инициализация
9.2. Построение меню без JSX
9.3. Построение меню в JSX
9.4. Домашнее задание
9.5. Итоги
10. Компонент Tooltip
10.1. Структура проекта и инициализация
10.2. Компонент Tooltip
10.3. Запуск
10.4. Домашнее задание
10.5. Итоги
11. Компонент Timer
11.1. Структура проекта и инициализация
11.2. Архитектура приложения
11.3. Компонент TimerWrapper
11.4. Компонент Timer
11.5. Компонент Button
11.6. Запуск таймера
11.7. Домашнее задание
11.8. Итоги
Часть 2. Архитектура React
12. Система сборки Webpack
12.1. Что делает Webpack?
12.2. Включение Webpack в проект
12.3. Модуляризация кода
12.4. Запуск Webpack и тестирование сборки
12.5. Оперативная замена модулей
12.6. Вопросы
12.7. Итоги
12.8. Ответы
13. Маршрутизация в React
13.1. Реализация маршрутизации с нуля
13.2. React Router
13.3. Функциональность React Router
13.4. Маршрутизация с использованием Backbone
13.5. Вопросы
13.6. Итоги
13.7. Ответы
14. Работа с данными с использованием Redux
14.1. Поддержка однонаправленной передачи данных в React
14.2. Архитектура данных Flux
14.3. Использование библиотеки данных Redux
14.4. Вопросы
14.5. Итоги
14.6. Ответы
15. Работа с данными в GraphQL
15.1. GraphQL
15.2. Добавление сервера к клону Netflix
15.3. Вопросы
15.4. Итоги
15.5. Ответы
16. Модульное тестирование кода React c Jest
16.1. Разновидности тестирования
16.2. Почему именно Jest?
16.3. Модульное тестирование с Jest
16.4. UI-тестирование React с использованием Jest и TestUtils
16.5. TestUtils: заключение
16.6. Вопросы
16.7. Итоги
16.8. Ответы
17. Использование React с Node и универсальный JavaScript
17.1. Зачем нужен React на сервере? И что такое универсальный JavaScript?
17.2. React с Node
17.3. React и Express: генерирование кода из компонентов на стороне сервера
17.4. Универсальный JavaScript с Express и React
17.5. Вопросы
17.6. Итоги
17.7. Ответы
18. Проект: создание книжного магазина с React Router
18.1. Структура проекта и конфигурация Webpack
18.2. Основной файл HTML
18.3. Создание компонентов
18.4. Запуск проекта
18.5. Домашнее задание
18.6. Итоги
19. Проект: проверка паролей с Jest
19.1. Структура проекта и конфигурация Webpack
19.2. Основной файл HTML
19.3. Реализация модуля надежного пароля
19.4. Реализация компонента Password
19.5. Виджет в действии
19.6. Домашнее задание
19.7. Итоги
20. Проект: реализация автозаполнения с Jest, Express и MongoDB
20.1. Структура проекта и конфигурация Webpack
20.2. Реализация веб-сервера
20.3. Добавление браузерного сценария
20.4. Создание серверного шаблона
20.5. Реализация компонента Autocomplete
20.6. Все вместе
20.7. Домашнее задание
20.8. Итоги
Приложения
А. Установка приложений
Установка React
Установка Node.js
Установка Express
Установка Bootstrap
Установка Browserify
Установка MongoDB
Использование Babel для компиляции JSX и ES6
Node.js и ES6
Автономный браузер Babel
Б. Шпаргалки по React
Установка
Рендеринг
Рендеринг на стороне сервера
Компоненты
Расширенные возможности компонентов
В. Краткая сводка Express.js
Установка Express.js
Г. Шпаргалка по MongoDB и Mongoose
MongoDB
Консоль MongoDB
Д. ES6 для успеха
Параметры по умолчанию
Шаблонные литералы
Многострочные строки
Стрелочные функции
Обещания
Конструкции с блочной областью видимости: let и const
Классы
Модули
Использование ES6 с Babel
Другие возможности ES6

Отзывы о книге

«React быстро — универсальный источник информации для читателя, который желает освоить React с экосистемой инструментов, концепций и библиотек, окружающих его. Следите за объяснениями Азата, работайте над приведенными проектами — и вскоре вы начнете понимать React, Redux, GraphQL, Webpack и Jest и сможете применять их на практике».

Питер Купер (Peter Cooper), редактор «JavaScript Weekly»

 

«React быстро учит читателя наиболее ценным и заслуживающим внимания концепциям в построении современных веб-приложений с React, включая GraphQL, Webpack и прорисовку на стороне сервера. После прочтения этой книги вы будете чувствовать себя достаточно уверенно для построения веб-приложений коммерческого уровня на базе React».

Стэн Бершадский (Stan Bershadskiy), автор книги «React Native Cookbook»

 

«Азат — один из самых авторитетных персон в области программирования. Эта книга выходит далеко за рамки начального уровня, глубоко погружаясь в фундамент и архитектуру React. Ее стоит прочитать любому разработчику!»

Эрик Хэнчетт (Erik Hanchett), автор книги «Ember.js Cookbook»

 

«Стиль изложения материала достаточно прост. В книге используется очень простой язык, который поможет вам последовательно понять все рассматриваемые концепции».

Израэль Моралес (Israel Morales), разработчик интерфейсной части и веб-дизайнер в SavvyCard

 

«Простой язык с несложными и логичными примерами поможет вам быстро вой­ти в курс дела. В книге рассмотрены все основные темы, необходимые любому разработчику без опыта работы с React для того, чтобы начать писать приложения с использованием React. Авторское чувство юмора будет поддерживать ваш интерес до самых последних страниц. Я благодарен Азату за то, что он не пожалел времени и поделился с нами своим опытом React».

Сухас Дешпанде (Suhas Deshpande), программист в Capital One

 

«React быстро — отличный ресурс для изучения React. Все очень подробно и по делу. Я буду использовать эту книгу в работе над своим следующим приложением».

Натан Бэйли (Nathan Bailey), полностековый разработчик в SpringboardAuto.com

«Азат превосходно справляется со своим делом — учить людей программированию. Книга React быстро содержит как фундаментальные знания, так и практические примеры, которые помогут вам быстрее взяться за программирование с использованием React».

Шу Лю (Shu Liu), IT-консультант

 

«С момента перехода на распространение с открытым кодом в 2013 году React.js быстро стала популярной JS-библиотекой и одним из самых высоко оцененных проектов на GitHub. В новой книге Азат Мардан в своей характерной доходчивой манере рассказывает все необходимое для изучения экосистемы React и быстрого построения высокопроизводительных SPA-приложений. Главы о состоянии React и универсальном JavaScript сами по себе оправдывают цену книги».

Пракаш Сарма (Prakash Sarma), New Star Online

 

«React быстро упростит ваш переход на React и заложит надежный фундамент для построения приложений, в полной мере реализующих все преимущества использования React».

Аллан фон Шенкель (Allan Von Schenkel), вице-президент по технологии и стратегии компании FoundHuman

 

«React быстро рассматривает все важнейшие аспекты React в простой и доступной форме. Эта книга такая же, как и все работы Азата: лаконичная и понятная, и в ней рассматривается то, что необходимо для быстрого перехода к эффективной работе. Если вы намерены добавить React в свой творческий арсенал, я рекомендую начать отсюда».

Бруно Уотт (Bruno Watt), консультант по архитектуре в hypermedia.tech

 

«React быстро — невероятно полное руководство по полностековой веб-разработке с использованием React.js. В книге рассматривается не только React, но и окружающая экосистема. Меня всегда приводило в замешательство использование React на стороне сервера; книга Азата наконец-то помогла мне разобраться в этой теме. Если у вас нет опыта работы с React, но вы хотите действительно хорошо освоить эту технологию, я бы на вашем месте остановился именно на этой книге».

Ричард Хо (Richard Kho), программист в Capital One

 

Посвящаю моему деду Халиту Хамитову. Спасибо тебе за доброту и справедливость. Ты всегда останешься в моей памяти вместе со всем, чему ты меня научил, нашими поездками на дачу и нашими шахматными партиями.

Вступление

Я все еще надеюсь, что JavaScript умрет. Серьезно. Умрет в муках и страданиях.

Не то чтобы я ненавидел JavaScript — язык несколько улучшился за прошедшие годы. Просто я терпеть не могу лишней сложности — настолько, что назвал свой блог и бизнес «Простое программирование». Моим девизом всегда было: «Делаем сложное простым».

Сделать сложное простым нелегко. Для этого нужны особые навыки. Вы должны уметь понять сложное, и понять настолько хорошо, чтобы добраться до самой сути, — потому что на самом деле все просто. Именно это сделал Азат в своей книге.

Признаюсь, что Азату в этом немного помогли. Одна из причин, по которым лично я люблю ReactJS, — это простота. Этот фреймворк проектировался так, чтобы быть простым. Он был спроектирован для решения проблемы с ростом сложности фреймворков JavaScript и сокращения этой сложности за счет возврата к первооснове: старому доброму JavaScript. (По крайней мере, по большей части. В ReactJS существует язык JSX, который компилируется в JavaScript, но лучше вам об этом расскажет Азат.)

Хотя мне нравятся Angular, Backbone и другие фреймворки JavaScript, так как они сильно упростили создание асинхронных веб-приложений и одностраничных приложений, они также несут с собой значительную долю сложности. Шаблоны, а также понимание синтаксиса и всех нюансов этих фреймворков делают работу более эффективной, но фактически сложность при этом выводится изнутри наружу. ReactJS действует иначе, избавляется от шаблонов и предоставляет средства для применения компонентной архитектуры в пользовательском интерфейсе с использованием JavaScript. Мне нравится такой подход. Он прост. Но даже самые простые вещи бывает сложно объяснить — или, что еще хуже, они становятся сложными в изложении преподавателя.

И здесь вступает в дело Азат. Он умеет объяснять. Умеет упрощать. В начале книги автор представляет React, сравнивая его с тем, что вам, скорее всего, уже известно — с Angular. Впрочем, даже если вы не знаете Angular, его объяснение ReactJS быстро поможет вам понять азы и предназначение этого продукта. Затем Азат быстро показывает, как создать простое приложение ReactJS, чтобы вы могли все увидеть и самостоятельно проверить на практике. После этого он излагает оставшиеся 20 % того, что необходимо знать для выполнения 80 % повседневной работы в React; при этом он использует реальные примеры, понятные каждому читателю. Наконец — и это моя любимая часть книги! — он приводит многочисленные примеры и учебные проекты. Безусловно, лучший способ узнать что-либо — практика. Под руководством Азата вы пройдете через создание шести (да, шести!) нетривиальных проектов с использованием ReactJS.

А теперь, в полном соответствии со своей любимой темой — простотой, я завершаю свое вступление. Скажу лишь, что эта книга — попросту лучший известный мне способ изучения ReactJS.

Джон Сонмез (John Sonmez) Автор книги «Soft Skills» (http://amzn.to/2hFHXAu) и основатель «Simple Programmer» (https://simpleprogrammer.com)

Предисловие

Шел 2008 год, банки закрывались сплошь и рядом. Я работал в Федеральной корпорации страхования депозитов (FDIC), главной задачей которой была компенсация вкладов закрывшихся и неплатежеспособных банков. Признаюсь, в отношении гарантии занятости моя должность была где-то на уровне работы в «Леман Бразерс» или продажи билетов на «Титаник». Но пока времена сокращения бюджета для моего отдела еще были в далеком будущем, мне представилась возможность поработать над приложением, которое называлось «электронным оценщиком депозитной страховки», или EDIE (Electronic Deposit Insurance Estimator). Приложение пользовалось огромной популярностью по простой причине: людям хотелось узнать, какая часть их сбережений была застрахована федеральным правительством Соединенных Штатов, и программа EDIE оценивала эту величину.

Однако здесь скрывалась одна загвоздка: люди не желают сообщать правительству о своих частных счетах. Для защиты конфиденциальности приложение было построено полностью из JavaScript, HTML и CSS клиентской части без каких-либо технологий серверной части. Таким образом, FDIC не собирала никакой финансовой информации.

Приложение представляло собой месиво из «спагетти-кода», который сформировался после десятков итераций, проведенных с консультантами. Разработчики приходили и уходили, не оставляя после себя ни документации, ни чего-либо напоминающего логичные, простые алгоритмы. Разбираясь в коде, я чувствовал себя как турист, пытающийся воспользоваться нью-йоркским метро без карты. Там были мириады функций, вызывающих другие функции, странные структуры данных и новые функции… В современной терминологии это было чистое UI-приложение, потому что у него не было серверной части с хранением данных.

Как жаль, что у меня тогда не было React.js. С React приятно работать. Это новый менталитет — новый подход к разработке. Простота хранения всей базовой функциональности в одном месте, в отличие от разбиения ее на HTML и JS, снимает ограничения. Она разожгла мой энтузиазм к разработке клиентской части.

React — свежий взгляд на разработку компонентов пользовательского интерфейса. Это новое поколение библиотек презентационного уровня. В сочетании с моделью и библиотекой маршрутизации React может заменить Angular, Backbone или Ember в технологическом стеке веб-программирования и мобильной разработки. Как раз по этой причине я написал эту книгу. Angular мне никогда не нравился: он слишком сложен и устанавливает слишком жесткие ограничения. Шаблонизатор сильно привязан к предметной области, до такой степени, что это уже не JavaScript, а другой язык. Я использовал Backbone.js; этот фреймворк нравится мне своей простотой и подходом «сделай сам». Он прошел проверку временем и больше напоминает основу для создания собственных фреймворков, нежели полноценный фреймворк. Проблема с Backbone — повышение сложности взаимодействий между моделями и представлениями; разные представления обновляют разные модели, которые обновляют другие представления, инициирующие события моделей.

Мой личный опыт проведения на Kickstarter кампании по созданию учебного курса React.js (http://mng.bz/XgkO) и посещения различных конференций и мероприятий показывает, что разработчики всегда ищут более эффективные способы разработки пользовательских интерфейсов. Большая часть коммерческой ценности в наши дни лежит в пользовательских интерфейсах, серверная часть — всего лишь ресурс. В области залива Сан-Франциско, где я живу и работаю, большинство вакансий программистов открывается для разработчиков интерфейсов или (модный новый термин) разработчиков широкого профиля/полностековых разработчиков. Лишь в нескольких больших компаниях, таких как Google, Amazon и Capital One, существует достаточно сильный спрос на специалистов по теории данных и программистов серверной части.

Лучший способ сохранить рабочее место или найти хорошую вакансию — стать разработчиком широкого профиля (generalist). А для этого проще всего использовать изоморфную, масштабируемую, удобную для разработчика библиотеку (такую, как React) в клиентской части — в сочетании с Node.js для серверной части на случай, если вам все же придется возиться с кодом на стороне сервера.

Для мобильных разработчиков HTML5 еще два или три года назад считался неприличным словом. Facebook отказался от своего приложения HTML5 в пользу более производительной платформенной реализации. Тем не менее это неблагоприятное отношение быстро изменяется. С React Native можно генерировать разметку для мобильных приложений; вы можете оставить свои компоненты пользовательского интерфейса, но адаптировать их к другой среде — еще один довод в пользу изучения React.

Программирование может быть творческим делом. Вы не отвлекаетесь на рутинные задачи, сложность и мнимое разделение обязанностей. Вы отсекаете все лишнее и направляете свои творческие силы на упрощенную красоту модульных компонентных пользовательских интерфейсов на базе React. Добавьте Node для изоморфного/универсального JavaScript, и вы постигнете дзен.

Приятного чтения, и расскажите мне, понравилась ли вам книга, — оставьте отзыв на Amazon.com (http://amzn.to/2gPxv9Q).

Благодарности

Я хочу поблагодарить интернет, Вселенную и человеческую изобретательность, благодаря которой стала возможна телепатия. Не открывая рта, я могу поделиться своими мыслями с миллионами людей по всему миру в социальных сетях, таких как Twitter, Facebook и Instagram. Ура!

Я беспредельно благодарен своим учителям — как тем, которые целенаправленно учили меня в школах и университетах, так и случайным, которые поделились своей мудростью в книгах и в общении.

Как однажды написал Стивен Кинг: «Писать — удел человеческий, редактировать — удел божественный». А значит, я бесконечно благодарен редакторам этой книги и в еще большей степени — читателям, которые столкнутся с неизбежными опечатками и ошибками. Это моя четырнадцатая книга, и я знаю, что очепятки все равно будут, несмотря на все мои старания.

Спасибо персоналу издательства Manning, благодаря которому эта книга стала возможной; издателю Маржану Бейсу (Marjan Bace) и всем участникам редакторской и производственной групп, включая Дженет Вейл (Janet Vail), Кевина Салливана (Kevin Sullivan), Тиффани Тейлор (Tiffany Taylor), Кэти Теннант (Katie Tennant), Джордана Салиновича (Gordan Salinovic), Дэна Махарри (Dan Maharry) и многих других, остававшихся в тени.

Мне не хватает слов для выражения благодарности потрясающей группе научных редакторов под руководством Айвена Мартиновича (Ivan Martinovic): Джеймсу Анайпакосу (James Anaipakos), Дейну Балье (Dane Balia), Арту Бергквисту (Art Bergquist), Джоэлю Голдфингеру (Joel Goldfinger), Питеру Хэмптону (Peter Hampton), Луису Мэттью Хеку (Luis Matthew Heck), Рубену Дж. Леону (Ruben J. Leon), Джеральду Мэку (Gerald Mack), Камалю Раджу (Kamal Raj) и Лукасу Теттаманти (Lucas Tettamanti). В частности, они обнаруживали технические ошибки, ошибки в терминологии и опечатки, а также предлагали темы для рассмотрения. Каждая итерация процесса редактирования, каждое изменение, реализованное на основании обсуждений на форуме, способствовали формированию текста книги.

Я хочу особо поблагодарить Анто Аравинта (Anto Aravinth), занимавшегося техническим редактированием, и Германа Фриджерио (German Frigerio), который был корректором. Это лучшие технические специалисты, на которых я только мог надеяться.

Огромное спасибо Джону Сонмезу (John Sonmez) из компании Pluralsight, издательства Manning и SimpleProgrammer.com, за предисловие к книге. Спасибо вам, Питер Купер (Peter Cooper), Эрик Хэнчетт (Erik Hanchett) и Стэн Бершадский (Stan Bershadskiy), за обзоры и большую достоверность материала. Читателям, которые никогда не слышали о Джоне, Питере, Эрике или Стэне, стоит подписаться на их публикации и понаблюдать за их работой в области разработки.

Наконец, спасибо всем участникам программы MEAP за обратную связь. Переработка книги на основании ваших отзывов задержала публикацию на год, но в результате появилась лучшая книга о React из всех опубликованных на сегодняшний день.

О книге

Эта книга была написана для того, чтобы помочь разработчикам решить некоторые проблемы, сделать их жизнь более содержательной и счастливой, а также помочь им больше зарабатывать благодаря знакомству с React.js — и притом быстро. Над этой книгой работало более десятка людей в течение полутора лет. Как минимум эта книга должна подготовить читателя к таким необычным концепциям, как JSX, однонаправленная передача данных и декларативное программирование.

Структура книги

Книга делится на две части: «Основы React» (главы 1–11) и «Архитектура React» (главы 12–20). В каждой главе приводится текстовое описание, дополненное примерами кода и диаграммами, где это уместно. Каждая глава написана как самостоятельная; это означает, что у вас не должно быть проблем с чтением книги не по порядку глав — хотя я рекомендую читать последовательно. В конце каждой главы приводятся вопросы, закрепляющие понимание материала, и краткая сводка.

Каждая часть завершается несколькими большими проектами, которые расширят ваш опыт работы с React и укрепят понимание темы как логического продолжения концепций и материалов предыдущих глав. Эти проекты являются неотъемлемой частью книги — старайтесь не пропускать их.

Я советую вводить каждую строку кода самостоятельно, не прибегая к копированию/вставке. Исследования показали, что письменный ввод и набор на клавиатуре повышает эффективность обучения. Книга завершается пятью приложениями со вспомогательным материалом. Ознакомьтесь с ними (а также прочитайте оглавление) перед тем, как начинать чтение.

Веб-сайты этой книги — www.manning.com/books/react-quickly и http://reactquickly.co. Если вам понадобится новейшая информация, скорее всего, вы найдете ее здесь.

Исходный код доступен на сайте Manning (www.manning.com/books/react-quickly) и GitHub (https://github.com/azat-co/react-quickly). За дополнительной информацией обращайтесь к разделу «Исходный код». В книге приводятся полные листинги — это намного удобнее, чем переходить к GitHub или редактору кода для просмотра файлов.

Для кого написана эта книга (обязательно прочитайте!)

Эта книга написана для веб-программистов, мобильных разработчиков и программистов с двух-трехлетним опытом работы, которые хотят изучить и использовать React.js для веб-программирования и мобильной разработки. Можно сказать, что книга написана для людей, которые знают наизусть комбинацию клавиш для Developer Tools (Cmd+Opt+J или Cmd+Opt+I на Mac). Книга предназначена для читателей, которые знакомы со следующими концепциями накоротке:

• Одностраничные приложения (SPA).

• REST-совместимые службы и архитектура API.

• JavaScript и особенно замыкания, области видимости, методы строк и массивов.

• HTML, HTML5, их элементы и атрибуты.

• CSS, стили и селекторы JavaScript.

Опыт работы с jQuery, Angular, Ember.js, Backbone.js или других фреймворков в стиле MVC пригодится, потому что вы сможете сравнить их с подходом React. Тем не менее это не необходимо и до какой-то степени может быть вредно, потому что вам придется забывать некоторые паттерны — React не следует некоторым канонам MVC.

Мы будем использовать инструменты командной строки, так что если вы боитесь их, самое время побороть свою фобию командной строки/терминала. Как правило, средства командной строки (CLI) превосходят по мощи и гибкости свои версии с графическим интерфейсом (сравните командную строку Git с настольной версией GitHub — в последней я до сих пор не разобрался).

Определенное сходство с Node.js позволит вам изучить React намного быстрее, чем читателю, который никогда не слышал о Node.js, npm, Browserify, CommonJS, Gulp или Express.js. Я написал несколько книг о Node.js для тех, кто захочет освежить свои знания; самая популярная из них — «Practical Node.js» (http://practicalnodebook.com). Также вы можете пройти в интернете бесплатное приключение NodeSchool (http://nodeschool.io) («бесплатно» не всегда означает «хуже»).

Кому эта книга не подойдет (тоже прочитайте!)

Эта книга не является исчерпывающим справочником по веб-программированию и мобильной разработке. Предполагается, что вы уже разбираетесь в этих областях. Если вам нужна информация о базовых концепциях программирования или основах JavaScript, на эти темы написано немало хороших книг, поэтому я не буду повторять уже существующие материалы в этой книге.

Как использовать эту книгу

Прежде всего книгу нужно прочитать. Это не шутка — многие люди покупают книги, но не читают их. Обычно подобное случается с цифровыми копиями, потому что они хранятся где-то на диске или в облаке и о них забывают. Прочитайте книгу и проработайте проекты, главу за главой.

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

В тексте встречаются многочисленные ссылки на внешние ресурсы. Большинство из них не являются обязательными, но они предоставляют дополнительную информацию по теме. Я рекомендую читать книгу поблизости от компьютера, чтобы открывать ссылки в тексте.

Часть текста оформлена моноширинным шрифтом: getAccounts(). Это означает, что этот текст содержит код (отдельные конструкции и целые блоки). Иногда встречается код с необычными отступами:

       document.getElementById('end-of-time').play()

     }

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

В других случаях блоки кода не имеют отступа. Тогда можно с уверенностью считать, что этот блок самостоятелен:

ReactDOM.render(

<Content />,

  document.getElementById('content')

)

Если в тексте встречается знак $, перед вами команда терминала/командной строки. Пример:

$ npm install -g [email protected]

Самое важное, что нужно знать и помнить во время чтения книги: вам должно быть интересно. Если вам неинтересно, это не JavaScript!

Исходный код

Весь код этой книги доступен по адресам www.manning.com/books/react-quickly и https://github.com/azat-co/react-quickly. В нем используется соглашение об именах папок chNN, где NN — номер главы с начальным 0 при необходимости (например, ch02 для кода главы 2). Исходный код в репозитории GitHub будет дорабатываться: в него будут включаться патчи, исправления ошибок, а возможно, даже новые версии и стили (ES2020?).

Об авторе

Я опубликовал более 14 книг и 17 сетевых учебных курсов (https://node.university), в основном доступных на облачных платформах, по темам React,JavaScript и Node.js. (Одна книга написана о том, как писать книги, а другая — о том, что делать после написания нескольких книг.)

Прежде чем сосредоточиться на Node, я программировал на других языках (Java, C, Perl, PHP, Ruby) практически все время после окончания средней школы (более 12 лет); на это у меня ушло определенно более рекомендованных 10 000 часов1.

В настоящее время я работаю техническим директором в одном из десяти крупнейших банков США, также входящих в список Fortune 500: Capital One Financial Corporation в прекрасном Сан-Франциско. До этого я работал в небольших старт­апах, гигантских корпорациях и даже в федеральном правительстве США, занимаясь разработкой настольных, мобильных и веб-приложений, преподаванием, распространением знаний в области разработки и управления проектами.

Не стану тратить слишком много вашего времени на рассказы о себе; вы можете узнать больше в моем блоге (http://webapplog.com/about) и в социальных сетях (www.linkedin.com/in/azatm). Вместо этого я хочу рассказать о моем опыте в той области, которая имеет прямое отношение к книге.

Когда я переехал в солнечный штат Калифорния в 2011 году, чтобы поступить в стартап и пройти программу бизнес-акселератора2 (если вам интересно, это была программа 500 Startups), я начал использовать современный JavaScript. Я изучил Backbone.js, чтобы построить несколько приложений для стартапа, и эта работа произвела на меня впечатление. Фреймворк был огромным шагом вперед в организации кода по сравнению с другими одностраничными приложениями, которые я строил до этого. В нем были маршруты и модели. Вот это да!

Мне представилась еще одна возможность увидеть выдающуюся силу Backbone и изоморфного JavaScript, когда я работал руководителем группы программистов в компании DocuSign, своего рода Google в мире электронных подписей (ее доля рынка составляет 70 %). Мы переработали монолитное веб-приложение ASP.NET семилетней давности, у которого выпуск дополнительной версии занимал четыре недели, в компактное приложение Backbone-Node-CoffeeScript-Express с отличным пользовательским интерфейсом и выпуском дополнительной версии всего за одну-две недели. Дизайнеры хорошо поработали над удобством использования. Не стоит и говорить, что в приложении было великое множество UI-представлений с различными степенями интерактивности.

Конечное приложение было изоморфным еще до того, как появился такой термин. Мы использовали модели Backbone на сервере для предварительной выборки данных из API и их кэширования. Одни и те же шаблоны Jade использовались в браузере и на сервере.

Это был интересный проект, который еще сильнее убедил меня в мощи использования одного языка во всем стеке. Разработчики с опытом работы на C# и интерфейсном JavaScript (в основном jQuery), работавшие над старым приложением, проводили спринт (один цикл выпуска — обычно неделя или две) и влюблялись в четкость структуры CoffeeScript, организацию Backbone и скорость Node (как в разработке, так и в плане скорости выполнения).

За десятилетие в веб-разработке я сталкивался с хорошими, плохими и уродливыми (в основном уродливыми) сторонами интерфейсной разработки. Как оказалось, нет худа без добра, потому что я начал еще больше ценить React после перехода.

Если вы хотите получать обновления, новости и полезные советы, свяжитесь со мной в Сети: подпишитесь, возьмите в друзья, просто читайте — выбирайте сами:

• Twitter — https://twitter.com/azatmardan

• Website — http://azat.co

• LinkedIn — http://linkedin.com/in/azatm

• Блог — http://webapplog.com

• Publications — http://webapplog.com/books

Об обложке

Один из читателей издания прислал мне сообщение с вопросом о дервише на обложке. Да, этого персонажа можно легко принять за перса или представителя одного из кочевых тюркских племен, населявших Ближний Восток и Центральную Азию. Отчасти это обусловлено высоким уровнем развития торговли и путешествий в тех регионах на протяжении многих веков. Но по словам художника, нарисовавшего эту картину, он рисовал сибирского башкира. Большинство современных башкиров живет в Республике Башкортостан (или Башкирия). Башкиры являются близким этническими и географическими соседями волжских булгар (ошибочно называемых татарами): башкиры и татары являются вторым по численности народом Российской Федерации (на первом месте русские, если вас интересует).

Иллюстрация позаимствована с гравюры XVIII века «Gravure Homme Baschkir» Жака Грассе де Сен-Совёр (Jacques Grasset de Saint-Sauveur). Увлечение дальними странами и путешествиями для удовольствия в то время только начиналось, и коллекции подобных рисунков были популярны; они знакомили как путешественников, так и домоседов, черпавших информацию из книг и картин, с жителями других стран. Разнообразие рисунков ярко напоминает нам, насколько непохожими в культурном отношении были города и области мира всего 200 лет назад. Люди, жившие в изоляции друг от друга, говорили на разных диалектах и языках. На улицах городов и в сельской местности можно было легко узнать, где живут люди и чем они занимаются, — достаточно было взглянуть на их одежду.

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

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

От издательства

Ваши замечания, предложения, вопросы отправляйте по адресу [email protected] (издательство «Питер», компьютерная редакция).

Мы будем рады узнать ваше мнение!

На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.

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

1 См. книгу М. Гладуэлла «Гении и аутсайдеры» (https://en.wikipedia.org/wiki/Outliers_(book)).

2https://ru.wikipedia.org/wiki/Бизнес-акселератор.

Часть 1. Основы React

Привет! Меня зовут Азат Мардан, и я собираюсь отправиться с вами в путешествие по удивительному миру React. React сделает программирование клиентской части более творческим, упростит написание и сопровождение кода, а пользователи будут поражены скоростью работы ваших веб-приложений. Появление React в корне изменило обстановку в веб-программировании: сообщество React положило начало многих подходов, понятий и паттернов проектирования, а другие библиотеки следовали по уже проложенному пути.

Я преподавал этот материал более 20 раз на своих сетевых уроках и обычных учебных курсах сотням программистов с совершенно разными уровнями квалификации и практического опыта. Таким образом, этот материал прошел проверку на моих студентах; вы получите переработанную и наиболее эффективную версию моего курса основ React в письменном виде. Главы этой части очень важны для вашего знакомства с React.

Главы 1–11 являются результатом почти двухлетней работы нескольких человек, но они читаются как последовательность тем, развивающих друг друга. Лучше всего начать с главы 1 и читать последовательно. Каждая глава включает небольшое видеопослание от меня; главы 1–8 завершаются упражнениями, а главы 9–11, которые представляют собой проекты, содержат упражнения для самостоятельной работы.

В целом эта часть книги закладывает прочную основу для изучения концепций, паттернтов и возможностей React. Сможете ли вы приехать в незнакомую страну и понять чужой язык, который вы не изучали? Нет, и именно поэтому необходимо изучить «язык» React, прежде чем пытаться строить сложные приложения. Следовательно, для вас очень важно изучить эти базовые концепции React — чтобы вы изучили язык React; именно этим мы и будем заниматься в следующих 11 главах.

Итак, пора начинать знакомство с React — и учиться бегло говорить «на языке React».