10,99 €
Mehr erfahren.
- Herausgeber: Питер
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Russisch
Хотите создавать эффективные приложения с помощью React? Тогда эта книга написана для вас. Познакомьтесь c лучшими практиками и шаблонами создания современного кода. Вам не потребуются глубокие знания React или функционала JavaScript — достаточно знакомства с принципами работы JavaScript, CSS и HTML. Алекс Бэнкс и Ева Порселло научат вас создавать пользовательские интерфейсы, которые будут динамически отображать изменения без необходимости перезагрузки страницы даже на крупномасштабных сайтах, работающих с огромными массивами данных. В этой книге вы: •Разберетесь с ключевыми аспектами функционального программирования на JavaScript. •Узнаете, как устроена работа React в браузере. •Создадите слои представления приложения с помощью компонентов React. •Научитесь управлять данными и тратить меньше времени на отладку. •Внедрите в проект хуки React для управления состояниями и перехвата данных. •Используете маршрутизатор для полноценной работы с одностраничными приложениями. •Научитесь структурировать приложения React с учетом особенности работы сервера.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 319
Veröffentlichungsjahr: 2023
Ähnliche
Литературный редактор А. Руденко
Художник В. Мостипан
Корректоры С. Беляева, Н. Сидорова
Алекс Бэнкс, Ева Порселло
React: современные шаблоны для разработки приложений 2-е издание. — СПб.: Питер, 2021.
ISBN 978-5-4461-1492-4
© ООО Издательство "Питер", 2021
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Оглавление
Предисловие
Эта книга предназначена для разработчиков, желающих изучить библиотеку React и освоить передовые технологии, внедряемые в язык JavaScript. Сейчас самое время стать JavaScript-разработчиком. Экосистема этого языка стремительно пополняется новыми инструментами, синтаксисом и методиками для решения множества проблем, стоящих перед разработчиками. Целью написания книги стала систематизация новых технологий, позволяющая сразу же приступить к работе с React. Мы рассмотрим библиотеку Redux, маршрутизатор React Router, а также инструменты разработчика и обещаем читателям, что не бросим их на произвол судьбы после того как дадим вводную информацию.
Книга не предполагает наличия у читателей начальных знаний React. Мы познакомим вас со всеми основами React с нуля. Также мы не предполагаем, что вы работали с новейшим синтаксисом JavaScript. О нем мы поговорим в главе 2, заложив тем самым фундамент для остальных глав.
Освоение книги станет для вас легче, если вы уже знакомы с HTML, CSS и JavaScript. Почти всегда лучше освоиться с этой большой тройкой, прежде чем погружаться в работу с библиотекой JavaScript.
В ходе изучения материала можете обращаться к репозиторию GitHub по адресу github.com/moonhighway/learning-react. Там находится весь код, позволяющий освоить практические примеры.
Условные обозначения
В этой книге приняты следующие типографские соглашения:
Курсив
Используется для обозначения новых терминов, адресов URL и электронной почты, имен файлов и расширений имен файлов.
Моноширинный шрифт
Применяется для оформления листингов программ и программных элементов внутри обычного текста, таких как имена переменных и функций, баз данных, типов данных, переменных окружения, инструкций и ключевых слов.
Моноширинный жирный
Обозначает команды или другой текст, который должен вводиться пользователем.
Моноширинный курсив
Обозначает текст, который должен замещаться фактическими значениями, вводимыми пользователем или определяемыми из контекста.
Так обозначаются советы или предложения.
Так обозначаются примечания общего характера.
Так обозначаются предупреждения.
Использование примеров кода
Дополнительные материалы (примеры кода, упражнения и т.д.) можно скачать по ссылке github.com/moonhighway/learning-react.
Если у вас возникнет технический вопрос или проблема с использованием примеров кода, отправьте электронное письмо по адресу [email protected].
Эта книга призвана помочь вам выполнить свою работу. Обычно, если в этой книге предлагается пример кода, вы можете использовать его в своих программах и документации. Вам не нужно связываться с нами для получения разрешения, если вы не воспроизводите слишком значительную часть кода. Например, для написания программы, в которой используется несколько фрагментов кода из этой книги, разрешения не требуется. Продажа или распространение примеров из книг O’Reilly требует разрешения. Чтобы ответить на вопрос, можно сослаться на эту книгу и процитировать пример кода без разрешения. Для включения значительного количества примеров кода из этой книги в документацию по вашему продукту требуется разрешение.
Благодарности
Наше путешествие по React началось случайно. Когда в стенах компании Yahoo мы преподавали полный курс по разработке программ на JavaScript, то использовали для создания учебных материалов библиотеку YUI. А затем в августе 2014 года разработка на YUI прекратилась. Пришлось заменить все файлы нашего курса, но чем? Что теперь предполагалось использовать при разработке внешнего интерфейса? Ответ: React. В него мы влюбились не сразу, понадобилась пара часов на то, чтобы он зацепила нас. Казалось, React потенциально может изменить что угодно. Мы включились в работу с ним на ранней стадии и считаем, что нам очень повезло.
Мы благодарим Анджелу Руфино и Дженнифер Поллок за поддержку в разработке второго издания. Также хотим поблагодарить Элли Макдональд за всю ее помощь в редактировании первого издания. Мы благодарны нашим научным редакторам Скотту Ивако, Адаму Ракису, Брайану Слеттену, Максу Фиртману и Четану Каранде.
Кроме того, эта книга не состоялась бы без Шэрон Адамс и Мэрилин Мессинео. Они сговорились приобрести первый компьютер Алекса — цветной Tandy TRS 80. Также эта книга не возникла бы без любви, поддержки и поощрения Джима и Лорри Порселло, Майка и Шэрон Адамс.
Также хочется поблагодарить кофейню Coffee Connexion из Тахо-Сити, штат Калифорния, за их кофе, такой нужный для завершения этой книги, и владельца кофейни Робина, который дал нам не теряющий актуальности комментарий: «Книга по программированию? Скучища!»
От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу [email protected] (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.
Глава 1. Добро пожаловать в React
Что делает библиотеку JavaScript хорошей? Количество звезд на GitHub? Количество загрузок на npm? Насколько важно количество твитов, которые оставляют ребята из ThoughtLeaders? Как выбрать лучший инструмент для создания лучшего продукта? Как узнать, стоит ли овчинка выделки? Как сделать выбор?
Когда появилась библиотека React, было много разговоров о том, хороша ли она, и многие относились к ней скептически. Она была новой, а новое часто разочаровывает.
В ответ на такую реакцию Пит Хант из команды React написал статью «Почему React?», в которой порекомендовал «дать ей [библиотеке React] пять минут». Он хотел побудить людей сначала поработать с React, а потом оценивать его.
Да, React — это небольшая библиотека, в которой нет всего, что вам может понадобиться для создания приложения. Но дайте ей пять минут.
Да, код на React выглядит как HTML, расположенный прямо в коде JavaScript. И да, эти теги требуют предварительной обработки для запуска в браузере. И для этого вам, вероятно, понадобится такой инструмент сборки, как webpack. Но дайте ей пять минут.
Скоро React отметит десятилетие, и многие команды уже решили, что она хороша, так как в свое время дали ей пять минут. Мы говорим об Uber, Twitter и Airbnb — огромных компаниях, которые попробовали React и поняли, что он может помочь командам быстрее создавать лучшие продукты. В конце концов, разве не для этого мы все здесь? Не для твитов. Не для звезд. Не для загрузок. Мы здесь, чтобы создавать крутые вещи с помощью инструментов, которые нам нравятся. Мы здесь ради славы от создания чего-то, чем мы можем гордиться. Если вам нравится делать такие вещи, вам, вероятно, понравится и React.
Прочный фундамент
Независимо от того, новичок вы в React или ищете в этой книге новейшие функции, мы хотим, чтобы эта книга стала прочной основой для всей вашей будущей работы с этой библиотекой. Цель книги — предотвратить путаницу и расположить материал в определенной последовательности, то есть предоставить дорожную карту обучения React.
Прежде чем углубиться в React, важно знать JavaScript. То есть освоить не весь язык и все его паттерны, но обязательно понимать массивы, объекты и функции.
В следующей главе мы рассмотрим новый синтаксис JavaScript, чтобы познакомить вас с новейшими функциями JavaScript, особенно с теми, которые часто используются с React. Затем мы познакомим вас с функциональным JavaScript, чтобы вы смогли понять парадигму, которая породила React. Хорошим побочным эффектом работы с React является то, что он может сделать вас более сильным разработчиком JavaScript, так как с его помощью вы начнете создавать паттерны, которые удобно читать, повторно использовать и тестировать. Он вас немного воспитает.
Затем мы рассмотрим основы React, чтобы понять, как создать пользовательский интерфейс с помощью компонентов. Научимся составлять эти компоненты и добавлять к ним логику с помощью свойств и состояний. Рассмотрим хуки React, позволяющие повторно использовать логику с отслеживанием состояния между компонентами.
Разобравшись с основами, мы создадим приложение, в котором пользователи смогут добавлять, редактировать и удалять цвета. Мы узнаем, как Hooks и Suspense помогают получить данные. В процессе создания приложения мы изучим множество инструментов из более широкой экосистемы React, которые используются для решения общих задач, таких как маршрутизация, тестирование и рендеринг (или отображение, глава 7) на стороне сервера.
Мы надеемся, что вы быстрее освоите экосистему React с использованием нашего подхода, так как мы не только проведем поверхностный обзор тем, но и вооружим вас инструментами и навыками, необходимыми для создания реальных приложений React.
Прошлое и будущее React
Библиотека React была создана Джорданом Уолком, инженером-программистом Facebook. Она попала в новостную ленту Facebook в 2011 году, а затем в Instagram, приобретенный Facebook в 2012 году. На JSConf 2013 React была представлена как система с открытым исходным кодом и присоединилась к обширной категории UI-библиотек, таких как jQuery, Angular, Dojo, Meteor и другие. В то время React называли «V в MVC». Другими словами, компоненты React выступали в качестве уровня представления или пользовательского интерфейса для приложений JavaScript.
С этого момента React начали принимать в сообществе. В январе 2015 года компания Netflix объявила, что использует React для разработки пользовательского интерфейса. В том же месяце была выпущена React Native — библиотека для создания мобильных приложений с использованием React. Facebook также выпустил ReactVR — еще один инструмент, решавший с помощью React широкий круг задач рендеринга. В 2015 и 2016 годах появилось огромное количество популярных инструментов, таких как React Router, Redux и Mobx, для обработки маршрутизации и управления состоянием. В конце концов, React стала позиционироваться как библиотека, поскольку она была связана с реализацией определенного набора функций, а не являлась инструментом для решения отдельных задач.
Еще одной серьезной вехой в развитии React стал выпуск React Fiber в 2017 году. Fiber — это волшебным образом переписанный алгоритм рендеринга React. Полная переработка части React, которая практически ничего не изменила в общедоступном API, позволила сделать React более современной и производительной, не затрагивая пользователей.
Совсем недавно, в 2019 году, вышел Hooks — новый способ добавления и совместного использования логики с отслеживанием состояния между компонентами. Мы также застали выпуск Suspense — способа оптимизации асинхронного рендеринга с помощью React.
В будущем мы обязательно увидим еще больше изменений, но одной из причин успеха React является сильная команда, которая работала над проектом на протяжении многих лет. Эта команда амбициозна, но осторожна, продвигает дальновидные оптимизации, постоянно учитывая влияние любых изменений на библиотеку, которые будут каскадно распространяться по сообществу.
В React и связанные с ним инструменты могут быть внесены критические изменения. Поэтому будущие версии этих инструментов могут нарушить работоспособность некоторых примеров кода в этой книге. Но вы все равно сможете ознакомиться с этими примерами. Мы предоставим точную информацию о версии в файле package.json, чтобы вы могли установить пакеты.
Также вы можете следить за изменениями в официальном блоге React по адресу facebook.github.io/react/blog. О выпуске новых версий React чтайте в блоге основной команды ее разработчиков и журналах изменений. Блог переводится на все большее число языков, локальные версии документов находятся на странице сайта документации по адресу reactjs.org/languages.
Изменения во втором издании книги
Это второе издание книги. Мы сочли важным обновить книгу, потому что React значительно изменился за последние несколько лет. Мы сосредоточимся на передовых методах, которые отстаивает команда React, но упомянем и устаревшие функции. Код, написанный на React много лет назад с использованием старых стилей, все еще хорошо работает и должен поддерживаться. Мы будем отмечать устаревшие функции на боковой панели.
Работа с файлами
В этом разделе мы обсудим, как работать с файлами для этой книги и как установить некоторые полезные инструменты React.
Файловый репозиторий
В репозитории GitHub для этой книги (github.com/moonhighway/learning-react) приведены все файлы кода, систематизированные по главам.
React Developer Tools
Мы настоятельно рекомендуем установить React Developer Tools для работы с React. Эти инструменты доступны как расширение браузера для Chrome и Firefox и как отдельное приложение для использования с Safari, IE и React Native. После установки инструментов разработчика вы сможете просматривать дерево компонентов React, их свойства, сведения об их состоянии и даже сайты, используемые React в настоящее время в производственной среде. Это по-настоящему полезно при отладке и изучении проектов на основе React.
Чтобы установить эти инструменты, перейдите на репозиторий GitHub (oreil.ly/5tizT). Там вы найдете ссылки на расширения для Chrome (oreil.ly/Or3pH) и Firefox (oreil.ly/uw3uv).
После установки React Developer Tools вы увидите, какие сайты используют React, с помощью загорающегося значка на панели инструментов браузера (рис. 1.1).
Рис. 1.1. Просмотр React Developer Tools в Chrome
Когда вы откроете React Developer Tools, появится новая вкладка под названием React (рис. 1.2). Нажав на нее, вы увидите компоненты, составляющие просматриваемую страницу.
Рис. 1.2. Проверка DOM с помощью React Developer Tools
Установка Node.js
Node.js — это среда выполнения JavaScript, используемая для создания полнофункциональных приложений. У Node открытый исходный код, и ее можно установить на Windows, macOS, Linux и другие платформы. Мы будем использовать Node в главе 12 при сборке сервера.
У вас должен быть установлен Node, но вам не обязательно быть экспертом по Node, чтобы использовать React. Если вы не уверены, что на вашем компьютере установлен Node.js, откройте окно терминала или командной строки и введите команду:
node -v
После запуска этой команды вы должны увидеть номер версии Node, желательно 8.6.2 или выше. Если вы увидите сообщение об ошибке Command not found, значит, Node.js не установлен. Это легко исправить, установив Node.js с сайта проекта (nodejs.org). Просто выполните указания по установке, и, когда вы снова введете команду node -v, то увидите номер версии.
npm
Вместе с Node.js автоматически установится npm — менеджер пакетов Node. В сообществе JavaScript инженеры совместно используют проекты с открытым исходным кодом, чтобы избежать необходимости самостоятельно переписывать фреймворки, библиотеки или вспомогательные функции. Сам React — это пример прикладной библиотеки npm. В этой книге мы будем использовать npm для установки множества пакетов.
Большинство проектов JavaScript, которые можно встретить сегодня, содержат множество файлов и, в числе прочего, файл package.json. В нем описан проект и его зависимости. Если вы запустите команду npm install в папке, содержащей файл package.json, npm установит все пакеты, перечисленные в проекте.
Если вы начинаете собственный проект с нуля и хотите включить зависимости, просто выполните команду:
npm init -y
Эта команда инициализирует проект и создаст файл package.json. После этого вы сможете установить свои зависимости с помощью npm. Чтобы установить пакет с помощью npm, запустите команду:
npm install имя-пакета
Чтобы удалить пакет с помощью npm, запустите команду:
npm remove имя-пакета
Yarn
Альтернативой npm является Yarn. Этот менеджер пакетов был выпущен в 2016 году Facebook в сотрудничестве с Exponent, Google и Tilde. Он помогает Facebook и другим компаниям надежно управлять своими зависимостями. Если вы знакомы с рабочим процессом npm, разобраться с Yarn не составит для вас труда. Сначала установите Yarn глобально с помощью npm:
npm install -g yarn
После этого вы будете готовы к установке пакетов. При установке зависимостей из pack.json вместо команды npm install вы можете запустить команду run yarn.
Чтобы установить конкретный пакет с помощью Yarn, запустите команду:
yarn add имя-пакета
Для удаления зависимости используйте соответствующую команду:
yarn remove имя-пакета
Yarn используется в рабочем процессе Facebook и входит в такие проекты, как React, React Native и Create React App. В проекте, использующем Yarn, есть файл yarn.lock. Чтобы установить все зависимости такого проекта, вместо npm install наберите yarn.
Теперь, когда ваша среда для разработки React настроена, вы готовы приступить к изучению React. В главе 2 мы познакомимся с новейшим синтаксисом JavaScript, который чаще всего встречается в коде React.
