Erhalten Sie Zugang zu diesem und mehr als 300000 Büchern ab EUR 5,99 monatlich.
- Herausgeber: Питер
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Russisch
Хотите научиться писать эффективные пользовательские интерфейсы при помощи React? Тогда вы нашли нужную книгу. Авторы расскажут, как создавать пользовательские интерфейсы при помощи этой компактной библиотеки и писать сайты, на которых можно обрабатывать огромные объемы данных без перезагрузки страниц. Также вы изучите новейшие возможности стандарта ECMAScript и функционального программирования.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 326
Veröffentlichungsjahr: 2022
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Ähnliche
Переводчики Н. Вильчинский, И. Пальти, А. Тумаркин
Технический редактор Н. Хлебина
Литературные редакторы Е. Павлович, Н. Хлебина
Художники С. Заматевская , Л. Колесниченко, С. Маликова
Корректоры Е. Павлович, Е. Павлович, Е. Рафалюк-Бузовская
Верстка О. Богданович
А. Бэнкс
React и Redux: функциональная веб-разработка. — СПб.: Питер, 2018.
ISBN 978-5-4461-0668-4
© ООО Издательство "Питер", 2018
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Оглавление
Предисловие
Эта книга предназначена для разработчиков, желающих изучить библиотеку React и освоить передовые технологии, внедряемые в язык JavaScript. Сейчас самое время стать JavaScript-разработчиком. Экосистема этого языка стремительно пополняется новыми инструментами, синтаксисом и наработанными методиками, обещающими разрешение множества проблем, стоящих перед разработчиками. Целью написания книги стала систематизация новых технологий, позволяющая сразу же приступить к работе с React. Мы рассмотрим библиотеку Redux, маршрутизатор React Router, а также инструменты разработчика и обещаем читателям, что не бросим их на произвол судьбы после того, как дадим вводную информацию.
Чтение книги не предполагает никаких предварительных знаний React. Все основы библиотеки будут представлены с самого начала. Мы также не строим никаких предположений относительно вашего опыта работы с ES6 или любым другим современным синтаксисом языка JavaScript. Мы дадим все это в главе 2 в качестве основы для понимания материала последующих глав.
Конечно, материал книги будет проще усвоить, имея достаточно ясное представление о том, что такое HTML, CSS и JavaScript. Прежде чем углубляться в изучение библиотек, лучше сперва как следует разобраться с этой большой троицей.
В ходе изучения материала можно обращаться к хранилищу GitHub (https://github.com/moonhighway/learning-react). Там находится весь код, позволяющий освоить практические примеры.
Условные обозначения
В книге используются следующие типографские обозначения.
Курсив
Курсивом выделены новые термины.
Моноширинный шрифт
Используется для примеров программ, а также внутри абзацев, чтобы обратиться к элементам программы вроде переменных, функций, баз данных, типов данных, переменных среды, инструкций и ключевых слов, имен файлов и расширений этих имен.
Моноширинный полужирный шрифт
Показывает команды или другой текст, который пользователь должен ввести самостоятельно.
Моноширинный курсивный шрифт
Показывает текст, который должен быть заменен значениями, введенными пользователем, или значениями, определяемыми контекстом.
Шрифт без засечек
Используется для обозначения URL, адресов электронной почты.
Этот рисунок указывает на совет или предложение.
Такой рисунок указывает на общее замечание.
Этот рисунок указывает на предупреждение.
Использование примеров кода
Сопроводительный материал (примеры кода, упражнения и т. д.) доступен для скачивания на https://github.com/moonhighway/learning-react.
Эта книга призвана помочь вам решать практические задачи. В целом, если пример кода предлагается вместе с книгой, вы можете использовать его в программах и документации. Вам не нужно обращаться к нам за разрешением, кроме случаев воспроизведения весьма существенного объема кода. Например, написание программы, использующей несколько фрагментов кода из этой книги, не требует разрешения, в отличие от продажи или распространения компакт-диска с примерами из книг издательства O’Reilly. Ответы на вопросы с цитированием материала данной книги и приведением примеров кода разрешения не требуют, чего не скажешь о вставке существенного объема примеров кода из этой книги в документацию по вашему программному продукту. Если есть сомнения по поводу правомерности использования примеров кода в рамках вышеизложенного, то можете свободно обратиться к нам за консультацией по адресу [email protected].
Благодарности
Наше путешествие по React вряд ли бы состоялось, не будь, как всегда, удачного стечения обстоятельств. Когда в стенах компании Yahoo! мы преподавали полный курс по разработке программ на JavaScript, для создания учебных материалов использовали библиотеку YUI. А затем, в августе 2014 года, разработка на YUI прекратилась. Нам пришлось заменить все файлы нашего курса, но чем? Что теперь предполагалось использовать при разработке внешнего интерфейса? Ответом была React. В нее мы влюбились не сразу, понадобилась пара часов на то, чтобы она зацепила нас. Казалось, React потенциально может изменить что угодно. Мы включились в работу с ней на ранней стадии и считаем, что нам очень повезло.
Эта книга не появилась бы на свет без участия Элли Макдональд (Ally MacDonald), помогавшей нам на всех этапах и весьма терпеливо перенесшей вместе с нами несколько обновлений библиотеки. Мы благодарны Мелани Ярбро (Melanie Yarbrough), Коллину Топореку (Colleen Toporek) и Рейчел Хед (Rachel Head) за их удивительное внимание к деталям. Спасибо Саре Ронау (Sarah Ronau) за корректуру этой книги непосредственно перед тем, как она готова была предстать перед читательским взором, и Бонни Эйзенман (Bonnie Eisenman) — за ценный совет и очаровательный характер. Спасибо также Стояну Стефанову (Stoyan Stefanov), который благосклонно согласился предоставить технический обзор, несмотря на большую занятость созданием передовых программных средств в компании Facebook.
Книга также не состоялась бы без участия Шэрон Адамс (Sharon Adams) и Мэрилин Мессинео (Marilyn Messineo). Именно они сговорились купить Алексу первый компьютер, который назывался Tandy TRS 80 Color Computer. И материал не превратился бы в книгу без любви, поддержки и поощрения со стороны Джима (Jim) и Лорри Порселло (Lorri Porcello), а также Майка (Mike) и Шэрон Адамс (Sharon Adams).
Хочется выразить благодарность и заведению Coffee Connexion в Тахо-Сити, Калифорния, предоставлявшему нам кофе, столь необходимый для завершения работы над этой книгой, и его владельцу Робину, разразившемуся в наш адрес прописной, на его взгляд, истиной: «Книга по программированию? Звучит очень скучно!»
1. Добро пожаловать в React
React — популярная библиотека, используемая для создания пользовательских интерфейсов. Она была создана в Facebook с целью решить ряд проблем, связанных с крупномасштабными сайтами, управляемыми данными. В момент выпуска библиотеки в 2013 году этот проект воспринимался с некоторой долей скептицизма, поскольку соглашения по React довольно необычны.
В попытке не отпугнуть новых пользователей основная команда разработчиков React написала статью под названием Why React? (Почему именно React?), в которой рекомендовалось Give It (React) Five Minutes (Уделить ей (React) всего пять минут). Им хотелось сначала воодушевить людей на работу с библиотекой, прежде чем те подумают, что подход разработчиков слишком безумен.
React действительно является небольшой библиотекой, поставляемой без того набора инструментов, который может понадобиться для создания ваших приложений. Но уделите ей пять минут.
Да, благодаря React прямо в вашем JavaScript создается код, похожий на HTML. И разумеется, все эти теги требуют предварительной обработки перед запуском в браузере. А для этого, скорее всего, понадобится встроенный инструмент, такой как Webpack.
Если вы, как и мы, читали эту статью, то, возможно, были впечатлены промисами, связанными с новой библиотекой JavaScript, способной решить все проблемы с DOM (объектной моделью документа); с библиотекой, которая всегда будет проста в применении и никогда не причинит неудобств.
А потом начали возникать вопросы: как можно будет преобразовать этот JSX? Как загрузить данные? Куда девать CSS? Что такое декларативное программирование? В каждом направлении возникало еще больше вопросов о том, как внедрить эту библиотеку в повседневную работу. С каждым разговором появлялась новая терминология, возникали новые технические приемы и все больше вопросов.
Препятствия и трудности
Уделив несколько минут изучению компонентов React, вы откроете для себя новые горизонты осмысления подходов к веб-разработке. Разумеется, не обойдется и без трудностей, которые придется преодолеть, прежде чем приступить к созданию готового к практическому применению кода на основе React.
React как библиотека
Во-первых, стоит заметить, что библиотека невелика по размеру и используется только для одной части всей работы. Она не содержит инструментария, ожидаемого от традиционного фреймворка JavaScript. Основные решения о том, какими средствами экосистемы воспользоваться, принимают разработчики. Кроме того, постоянно появляются новые наборы инструментов, а старые отходят на второй план. При таком количестве библиотек совершенно не удивляет ощущение, что за ними всеми невозможно угнаться.
Новый синтаксис ECMAScript
React вступила в эпоху зрелости в весьма важный, но хаотичный период в истории JavaScript. Раньше Европейская ассоциация производителей компьютеров (ЕСМА) довольно редко выпускала новые спецификации. Иногда на выпуск одной из них уходило до десяти лет. Это значило, что разработчикам не нужно было очень часто осваивать новый синтаксис.
А с 2015 года новые функциональные свойства языка и синтаксические дополнения станут выпускаться каждый год. Номерные выпуски системы (ECMAScript3, ECMAScript 5) будут заменены ежегодными (ECMAScript 2016, ECMAScript 2017). По мере развития языка первопроходцы сообщества React стремятся использовать новый синтаксис. Зачастую это говорит о том, что документация предполагает знание синтаксических новинок ECMAScript. Если вы не знакомы с самой последней спецификацией, то просмотр кода React может вызвать неуверенность в своих силах.
Популярность функционального JavaScript
Помимо изменений, появляющихся на уровне языка, существует также множество подвижек для функционального программирования на JavaScript. Заведомо функциональным языком JavaScript не является, но в его коде могут использоваться функциональные методы. В React придается особое значение приоритету функционального программирования над объектно-ориентированным. Этот сдвиг в мышлении может привести к существенным преимуществам в таких областях, как пригодность к тестированию и повышение производительности. Но при таком количестве материалов по React, предполагающих осмысление парадигмы, усвоить сразу весь объем информации будет нелегко.
Утомительный JavaScript
Разговоры об утомительности JavaScript (https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) превратились уже в некое клише, но такое мнение сложилось только из-за сложности сборки программного продукта. В прошлом файлы JavaScript просто добавлялись к вашей странице. Теперь же они должны пройти процесс сборки, обычно в виде автоматизированного непрерывного процесса поставки программного продукта. Имеется формируемый синтаксис, который нужно транспилировать для работы во всех браузерах. Имеется JSX, подлежащий преобразованию в JavaScript. Имеется SCSS, возможно требующий предварительной обработки. Эти компоненты нуждаются в тестировании, которое они должны успешно пройти. Вам могла бы понравиться React, но теперь еще нужно освоить Webpack, справиться с разбиением кода, его сжатием, тестированием и т. д. и т. п.
Почему React будет не трудно изучить
Цель данной книги — избежать путаницы в процессе обучения; мы даем материал в четкой последовательности, создавая прочную обучающую основу. Начнем с обновления синтаксиса, чтобы познакомить вас с последними свойствами JavaScript, особенно c теми, которые часто используются с React. Затем представим функциональный JavaScript, так что вы сможете сразу же применить эти методы и понять парадигму, породившую React.
Затем мы рассмотрим основополагающие сведения о React, вы сможете создать свои первые компоненты и получить ответы на вопросы, зачем и как нужно транспилировать код. После этого заложим площадку под новое приложение, позволяющее пользователям сохранять и упорядочивать цвета. Оно будет создано с использованием библиотеки React, затем код усовершенствуется благодаря ее новейшим методам. Мы расскажем о библиотеке Redux как о контейнере для данных клиента и завершим разработку приложения, внедрив Jest-тестирование и маршрутизацию с помощью средства React Router. В заключительной главе представим универсальный и структурно однородный код и усовершенствуем органайзер цветов, переведя его на сервер.
Надеемся на то, что ваша работа существенно ускорится благодаря применению экосистемы React наряду с подходом, предусматривающим не только поверхностное изучение, но и приобретение инструментов и навыков, необходимых для создания настоящих React-приложений.
Будущее библиотеки React
React пока не утратила своей новизны. Она дошла до стадии стабильности основных функциональных свойств, но даже они еще могут измениться. В следующие версии библиотеки будет включено средство Fiber — новая реализация основного алгоритма React, целью которого является увеличение скорости выдачи изображения на экран. Выстраивать предположения о том, насколько оно повлияет на React-разработчиков, пока рано, но оно, несомненно, отразится на скорости, с которой приложения выводят на экран изображение и обновляют его.
Многие из этих изменений связаны с целевыми устройствами. В данной книге рассматриваются способы разработки одностраничных веб-приложений с помощью React, но не нужно предполагать, что браузеры являются единственным местом, где могут работать такие приложения. Средство React Native, выпущенное в 2015 году, позволяет пользоваться преимуществами React-приложений в программах, предназначенных для работы под iOS и Android. Хотя об этом еще рано говорить, но уже появился фреймворк React VR для создания интерактивных приложений с поддержкой виртуальной реальности как способ разработки 360-градусных интерфейсов с использованием React и JavaScript. Команда библиотеки React настроит вас на быструю разработку восприятий для широкого диапазона размеров и типов экрана.
Мы надеемся предоставить вам достаточно прочную базу, позволяющую приспосабливаться к изменениям экосистемы и к созданию приложений, способных работать на платформах за пределами браузера.
Нужно идти в ногу со временем
По мере внесения изменений в React и сопутствующие инструменты иногда что-то перестает работать. Фактически некоторые из будущих версий данных утилит могут привести к неработоспособности ряда примеров, приводимых в данной книге. Но вы все равно можете придерживаться этих примеров. Точная информация о версии будет предоставлена в файле package.json, чтобы вы могли установить упомянутые там пакеты с нужной версией.
Кроме этой книги, обо всех последних изменениях можно узнать из новых публикаций в официальном блоге React (https://facebook.github.io/react/blog/). При выпуске новых версий React основная команда разработчиков опубликует там подробную информацию с описанием изменений и нововведений.
Существует также множество популярных React-конференций, которые можно посетить, чтобы получить самую свежую информацию о библиотеке. Если не получается принять в них личное участие, то можно изучить материалы сразу же после проведения конференций, поскольку зачастую они публикуются на YouTube. К их числу относятся:
• React Conf (http://conf.reactjs.org/) — конференция, спонсируемая Facebook, в Санта-Кларе, Калифорния;
• React Rally (http://www.reactrally.com/) — конференция сообщества в Солт-Лейк-Сити;
• ReactiveConf (https://reactiveconf.com/) — конференция сообщества в Братиславе, Словакия;
• React Amsterdam (https://react.amsterdam/) — конференция сообщества в Амстердаме.
Работа с файлами
В данном разделе будут рассмотрены работа с файлами для этой книги и порядок установки некоторых полезных инструментов React.
Файловый репозиторий
GitHub-репозиторий, связанный с настоящей книгой (https://github.com/moonhighway/learning-react), предоставляет все файлы с программным кодом, систематизированные по главам. Репозиторий представлен сочетанием файлов с кодом и JSBin-образцов. JSBin — это интерактивный редактор кода, похожий на CodePen и JSFiddle.
Одно из основных преимуществ использования JSBin заключается в том, что после щелчка на ссылке можно сразу же экспериментировать с файлом. При создании JSBin-файла или в момент его исправления редактор сгенерирует уникальный URL для вашего примера кода, как показано на рис. 1.1.
Рис. 1.1. URL, созданный JSBin
Буквы после jsbin.com представляют собой уникальный ключ URL. После следующего слеша указан номер версии. В последней части URL будет указано одно из двух слов: edit для режима редактирования или quiet для режима предварительного просмотра.
Инструменты React-разработчика
Существует несколько инструментов, которые могут быть установлены в качестве расширений или дополнительных модулей браузера и представлять для вас определенный интерес:
•react-detector (https://chrome.google.com/webstore/detail/react-detector/jaaklebbenondhkanegppccanebkdjlh?hl=en-US) — расширение браузера Chrome, позволяющее узнать, какие сайты используют React, а какие нет;
• show-me-the-react — еще одно средство, доступное для Firefox и Chrome, обнаруживающее React в ходе исследования ресурсов Интернета;
• React Developer Tools (рис. 1.2) (https://github.com/facebook/react-devtools) — дополнительный модуль, который может расширить функциональность инструментов разработчика браузера. Он создает новую вкладку в инструментах разработчика, где можно будет просматривать элементы React.
Если вы предпочитаете браузер Chrome, то этот модуль можно установить как расширение (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi); его можно также установить в качестве дополнения для Firefox (https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).
Рис. 1.2. Просмотр React Developer Tools
Всякий раз, когда вы увидите, что react-detector или show-me-the-react активны, можете открыть инструменты разработчика и получить представление о том, как React используется на сайте.
Установка Node.js
Node.js — JavaScript-язык без браузера. Это среда исполнения, применяемая для создания JavaScript-приложений на стороне как клиента, так и сервера. Node является средством с открытым кодом и может быть установлен на Windows, macOS, Linux и другие платформы. Мы прибегнем к Node в главе 12 при создании сервера Express.
Чтобы пользоваться React, Node не нужен. Но при работе с React для установки зависимостей необходимо будет задействовать диспетчер пакетов Node под названием npm. Он устанавливается автоматически вместе с Node.
Если вы не уверены в том, что на вашей машине установлен Node.js, то можно открыть терминал или окно командной строки и набрать команду:
$ node -v
Output: v7.3.0
В идеале у вас должен быть Node версии 4 или выше. Появившееся после набора команды сообщение об ошибке Command not found (Команда не найдена) означает, что среда не установлена. Установить ее можно непосредственно с сайта Node.js (https://nodejs.org/en/). Просто пройдите по автоматически предлагаемым этапам установки и, когда снова наберете команду node –v, увидите номер версии.
Управление зависимостями с помощью Yarn
Дополнительной альтернативой npm является Yarn. Этот инструмент был выпущен в 2016 году компанией Facebook в сотрудничестве с Exponent, Google и Tilde. Он помогает Facebook и другим компаниям надежнее управлять своими зависимостями; если использовать Yarn для установки пакетов, то можно заметить, что он работает намного быстрее. Производительность работы npm и Yarn можно сравнить на сайте Yarn (https://yarnpkg.com/en/compare).
Если вы знакомы с рабочим циклом npm, то воспользоваться ускорением, предлагаемым Yarn, будет очень просто. Сначала глобально установите Yarn с помощью npm.
npm install -g yarn
И после этого все будет готово к установке пакетов. При установке зависимостей из package.json вместо npm install можно запустить команду yarn.
При установке отдельных пакетов вместо запуска команды npm install –save [имя_пакета] запустите:
yarn add [имя_пакета]
Для удаления зависимости служит уже известная команда:
yarn remove [имя_пакета]
Yarn используется на практике компанией Facebook и включается в такие проекты, как React, ReactNative и create-react-app. Если попадется проект с файлом yarn.lock, значит, в нем задействован Yarn. По аналогии с командой npminstall, все зависимости проекта можно установить, набрав команду yarn installили просто yarn.
Мы настроили среду React-разработки. Теперь можно начинать преодолевать учебные препятствия. В главе 2 мы рассмотрим ECMA и разберемся с самым последним синтаксисом JavaScript, наиболее часто встречающимся в коде React.
