Предисловие
Вот и еще одна по-волшебному теплая калифорнийская ночь. Легкий океанский бриз только способствует ощущению абсолютного блаженства. Место: Лос-Анджелес; время: двухтысячные годы. Я готовлюсь подключить по протоколу FTP свое небольшое веб-приложение под названием CSSsprites.com к своему серверу и выпустить его в окружающий мир. Последние несколько вечеров, работая над приложением, я задавался вопросом: почему на отладку основной логики работы приложения тратилось всего 20 % усилий, а 80 % уходило на доведение до ума пользовательского интерфейса? Сколько нужно создать дополнительного инструментария, чтобы не приходилось всякий раз пользоваться методом getElementById() и переживать за состояние приложения? (Подгрузил ли пользователь что-то на страницу? Что, произошла ошибка? А это диалоговое окно все еще на экране?) Почему на разработку пользовательского интерфейса уходит так много времени? И что происходит со всеми такими разными браузерами? И постепенно мое блаженство таяло, превращаясь в раздражение.
Перенесемся в март 2015 года, на Facebook-конференцию F8. Моя команда готовится сообщить о двух полностью переписанных веб-приложениях: предлагаемом нами средстве работы со сторонними комментариями и сопутствующем инструменте их модерации. По сравнению с моим небольшим приложением CSSsprites.com, здесь речь уже шла о полнофункциональных веб-приложениях с куда более существенными возможностями, намного большей эффективностью и безумными объемами трафика. Тем не менее разработка велась с превеликим удовольствием. Участники, не знакомые с приложением (некоторые даже не знакомые с JavaScript и CSS), могли высказать свои предложения насчет возможностей и каких-либо улучшений его различных частей, и мы тут же, без промедления и особых усилий их внедряли. Глядя на это, один из участников сказал: «Вот теперь я понимаю, что значит любить свою работу!»
Так что же произошло за это время? Появилась технология React.
React представляет собой библиотеку для создания пользовательских интерфейсов, которая помогает вам определить пользовательский интерфейс раз и навсегда. Затем при изменении состояния приложения пользовательский интерфейс перестраивается для реагирования на изменения — и вам не нужно выполнять какие-либо доработки. Ведь вы уже определили пользовательский интерфейс. Определили? Больше похоже на то, что вы его объявили. А для создания большого полнофункционального приложения вы воспользовались небольшими управляемыми компонентами. Теперь уже половина внутреннего кода ваших функций не занимается охотой на DOM-узлы, и вам остается лишь отслеживать состояние state вашего приложения (с помощью обычных объектов JavaScript), а все остальное происходит в соответствии с этим состоянием.
Изучение React воздастся сторицей — вы освоите всего одну библиотеку, а использовать ее будете для создания всего нижеперечисленного:
• веб-приложений;
• приложений для работы под управлением iOS и Android;
• canvas-приложений;
• TV-приложений;
• обычных приложений для настольных машин.
Используя ту же самую идею создания компонентов и пользовательских интерфейсов, вы сможете конструировать приложения, приспособленные под исходную систему с присущими ей производительностью и элементами управления (реальными, а не их копиями). Речь не идет о «единожды созданном и повсеместно запускаемом коде» (мы уже наступали на эти грабли), мы говорим о «единожды освоенном и повсеместно используемом средстве».
Короче говоря, изучение React позволяет сэкономить 80 % вашего времени и сконцентрироваться на истинной сути приложения (то есть на реальных задачах, для решения которых оно предназначено).
О чем эта книга
Книга посвящена изучению React с позиции веб-разработчика. В первых трех главах изучение начинается с использования пустого HTML-файла, на основе которого выстраивается весь остальной код. Это позволяет сосредоточиться на изучении React, не отвлекаясь на новый синтаксис или на применение дополнительных инструментальных средств.
В главе 4 дается введение в JSX — отдельную дополнительную технологию, обычно используемую в связке с React.
Далее перейдем к изучению приемов разработки реального приложения и освоению дополнительных инструментальных средств, которые могут оказать помощь в этом деле. В их числе средства для создания пакетов JavaScript (Browserify), для блочного тестирования (Jest), для проверки кода (ESLint), проверки соответствия типов (Flow), для организации потока данных в приложении (Flux) и для использования неизменяемых данных (Immutable.js). Рассмотрение дополнительных технологических средств сведено к минимуму, чтобы основное внимание уделялось React, а знакомство с этими средствами поможет осознанно выбирать их для решения ваших задач.
Успехов вам в изучении React, пусть оно будет приятным и плодотворным!
Соглашения, используемые в книге
В книге используются следующие условные обозначения.
Курсив
Применяется для обозначения новых понятий, а также в примерах кода для выделения элементов, которые должны быть заменены значениями, предоставляемыми пользователем или определяемыми контекстом.
Моноширинный шрифт
Используется для текста листингов.
Применяется внутри абзацев для выделения таких элементов программ, как имена переменных или функций, названия баз данных, типов данных, имена переменных среды, инструкции и ключевые слова.
Моноширинный зеленый шрифт
Показывает команды или другой текст, который должен быть заменен значением, предоставляемым пользователем или определяемым контекстом.
Шрифт без засечек
Используется для обозначения имен файлов и каталогов, а также путей и URL-адресов.
Этот элемент содержит совет или предложение.
Такой элемент указывает на примечание общего характера.
Использование примеров кода
Весь дополнительный материал (примеры кода, упражнения и т.д.) можно загрузить по адресу .
Эта книга призвана помочь вам в вашей работе. Примеры кода из данной книги вы можете использовать в своих программах и документации. Если объем кода несущественный, связываться с нами для получения разрешения не нужно. Например, для написания программы, использующей несколько фрагментов кода из этой книги, разрешения не требуется. А вот для продажи или распространения компакт-диска с примерами из книг издательства O’Reilly нужно получить разрешение. Ответы на вопросы путем цитирования этой книги и ссылок на примеры кода не требуют разрешения. Но для включения объемных примеров кода из этой книги в документацию по вашему программному продукту разрешение понадобится.
Мы приветствуем указание ссылки на источник, но не делаем это обязательным требованием. Такая ссылка обычно включает название книги, имя автора, название издательства и ISBN. Например, «React: Up & Running, автор Стоян Стефанов (Stoyan Stefanov) (O’Reilly). Copyright 2016 Stoyan Stefanov, 978-1-491-93182-0».
Если вам покажется, что использование кода примеров выходит за рамки оговоренных выше условий и разрешений, непременно свяжитесь с нами по адресу .
Благодарности
Хочу поблагодарить всех, кто вычитывал черновые варианты этой книги и поделился своими предложениями по внесению исправлений: Андреа Маноле (Andrea Manole), Ильяна Пейчева (Iliyan Peychev), Костадина Илова (Kostadin Ilov), Марка Дуппенталера (Mark Duppenthaler), Стефана Албера (Stephan Alber), Асена Божилова (Asen Bozhilov).
Спасибо всем сотрудникам Facebook, работавшим над React (или применявшим эту библиотеку) и каждый день отвечавшим на мои вопросы. Я также благодарен всему React-сообществу, которое создает великолепные инструментальные средства, библиотеки, публикует статьи и создает шаблоны применения этой технологии.
Премного благодарен Джордану Уалке (Jordan Walke).
Спасибо всем сотрудникам издательства O’Reilly, содействовавшим выходу этой книги: Мегу Фоли (Meg Foley), Киму Коферу (Kim Cofer), Николь Шелби (Nicole Shelby) и многим другим.
Спасибо Явору Ватчкову (Yavor Vatchkov), дизайнеру пользовательского интерфейса, примененного в примере приложения, разрабатываемого в данной книге (работу приложения можно оценить на сайте whinepad.com).
Об авторе
Стоян Стефанов (Stoyan Stefanov) работает инженером в компании Facebook. Ранее в компании Yahoo! он был создателем интерактивного средства оптимизации изображений smush.it, а также средства выявления проблем производительности YSlow 2.0. Стоян — автор книг JavaScript Patterns (O’Reilly, 2010) и Object-Oriented JavaScript (Packt Publishing, 2008), соавтор публикаций Even Faster Web Sites и High-Performance JavaScript, блогер и частый докладчик на многих конференциях, в числе которых Velocity, JSConf и Fronteers.
