Erhalten Sie Zugang zu diesem und mehr als 300000 Büchern ab EUR 5,99 monatlich.
- Herausgeber: Питер
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Russisch
- Veröffentlichungsjahr: 2024
React предельно упрощает создание привлекательных и надежных интерфейсов для веб-приложений. Эта великолепная библиотека JavaScript имеет модульную архитектуру, что позволяет легко создавать, объединять и тестировать компоненты. React идеально подходит для небольших прототипов, корпоративных сайтов и других подобных решений. «React быстро. 2-е издание» предлагает уникальный подход к освоению фреймворка React. Более 80 компактных примеров проведут читателя от изучения основ работы к созданию довольно сложных приложений. В книге подробно описаны многие функциональные компоненты, хуки React и средства доступности веб-приложений, а также представлены интересные проекты для отработки новых навыков. Книга предназначена для разработчиков, имеющих опыт создания веб-приложений на базе JavaScript.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 426
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Ähnliche
Переводчики Е. Матвеев, Е. Матвеев
Азат Мардан, Мортен Барклунд
React быстро. 2-е межд. изд.. — СПб.: Питер, 2024.
ISBN 978-5-4461-2220-2
© ООО Издательство "Питер", 2024
Оглавление
Отзывы о первом издании
«Единое окно» для всех, кому нужно пошаговое руководство не только по React, но и по экосистеме сопутствующих средств, концепций и библиотек.
— Питер Купер (Peter Cooper), редактор JavaScript Weekly
Идеально подходит как для новичков React, так и для самых опытных специалистов.
— Мэтью Хек (Matthew Heck), TechChange
Захватывающая книга, в которой теория соседствует с практикой!
— Дейн Балиа (Dane Balia), Entelect
Отличное руководство, чтобы начать работать с React… быстро!
— Арт Бергквист (Art Bergquist), Cognetic Technologies
Книгу легко читать. Она написана простым языком, помогающим шаг за шагом разбираться в каждой концепции.
— Израэл Моралес (Israel Morales), SavvyCard
Наконец-то я понял, как работать с React, и это потрясающе.
— Питер Хэмптон (Peter Hampton), Университет Ольстера
«React быстро» — отличный ресурс для тех, кто хочет побыстрее включиться в работу с React. Очень основательный и актуальный материал. Обращусь к нему, когда начну работать над следующим приложением.
— Натан Бэйли (Nathan Bailey), SpringboardAuto.com
Если вы только начинаете работать с библиотекой React и действительно хотите ее освоить, эта книга — именно то, что вам нужно.
— Ричард Хо (Richard Kho), Capital One
Моей жене и сыну — они мотивируют меня становиться лучше и лучше как человек и как писатель. Как сказал Майкл Дж. Фокс, «семья — это не главное. Это всё».
— Мортен Барклунд
Посвящаю своему деду Халиту Хамитову. Спасибо за твою доброту и честность. Ты навсегда останешься в моей памяти — как все, чему ты меня научил, как наши поездки на дачу и наши сражения в шахматы.
— Азат Мардан
Предисловие
Перед вами — настоящая история любви! Мальчик знакомится с библиотекой и пропадает в ней! Это любовь с первого взгляда, и библиотека отвечает взаимностью. Они будут жить долго и счастливо, жизнеутверждающая музыка, хэппи-энд.
Я занимаюсь разработкой веб-приложений более десяти лет, но мне всегда как будто чего-то не хватало. Я работал с JavaScript, jQuery и даже Angular 1.0, но они не заполнили пробелов. Будем честны: кому захочется писать спагетти-код, который развалится уже через полгода?
Но однажды я наткнулся на React, и все тут же встало на свои места. Это было мгновенное притяжение, которому я не мог сопротивляться. Как только я впервые увидел эту библиотеку, я уже знал, что мы созданы друг для друга.
Внезапно все обрело смысл. Работа с компонентами и управление потоками данных в React стали именно тем, чего я искал. Кто знал, что писать код может быть так интересно? Я ринулся изучать все, что только можно узнать о React. Я читал документацию, смотрел обучающие ролики и делал проекты с таким азартом, что стирал пальцы о клавиатуру. Ладно, это небольшое преувеличение, но вы поняли, о чем я.
Я просто не мог оторваться от новой парадигмы. Мне хотелось переписать весь код, который я раньше писал. Когда же я стал глубже погружаться в философию разработки, лежащую в основе библиотеки, мое влечение только усилилось и переросло в отношения всей жизни.
Так случилось, что спустя несколько лет после перехода на React я познакомился с обаятельным Азатом — родственной душой с неукротимой страстью к этой замечательной библиотеке. Представьте мой восторг, когда я узнал, что Азат воплотил свою любовь к React в большой книге — первом издании «React быстро».
Это издание запало мне в душу. Его практические примеры, четкая структура и стиль изложения, рассчитанный на начинающих, идеально подходили для любого энтузиаста React. Сообщество не скупилось на похвалы автору, и вполне заслуженно.
Но React, как и любое юное дарование, продолжал развиваться и взрослеть. И в один знаменательный день 2019 года в него были добавлены хуки, принятые разработчиками с энтузиазмом и ставшие настоящей инновацией. Это был поворотный момент, который произвел революцию в разработке приложений.
Тогда мы с Азатом решили объединиться и перенести книгу в новую эпоху, сохранив ее актуальность и популярность. Мы поставили перед собой задачу подготовить второе издание, отражающее все современные возможности React. Структура и дух первого издания не изменились, но мы обновили его, чтобы оно шло в ногу со временем. И теперь мы рады поделиться с миром своей любовью к React!
– Мортен Барклунд
Благодарности
Выражаем глубочайшую благодарность команде издательства, которая помогла воплотить эту книгу в реальность. Прежде всего это наш главный редактор Фрэнсис Лефковиц (Frances Lefkowitz), неустанно помогавшая придать форму материалу и отшлифовать текст, чтобы он был полезен читателям всех уровней. Ее бесценные наблюдения и подсказки сыграли важнейшую роль в подготовке книги, которой мы действительно гордимся.
Также хотим выразить особую благодарность ведущему редактору издательства Энди Уолдрону (Andy Waldron); он верил в этот проект с самого начала и помог нам ориентироваться в сложном мире издательского дела.
Отдельное спасибо нашему научному редактору Нинославу Черкезу (Ninoslav Cěrkez); он представил подробную техническую обратную связь и помог проследить, чтобы примеры кода и объяснения были точными и актуальными. Спасибо корректору Крису Виллануэве (Chris Villanueva) за внимательность, благодаря которой он обнаружил множество ошибок и неточностей.
Не можем не упомянуть литературного редактора Джули Макнами (Julie McNamee) за ее бесподобную работу над рукописью. Она не эксперт по грамматике, а настоящий мастер языка, которая позаботилась, чтобы в тексте не осталось лишних слов и он стал более лаконичным и выразительным. Спасибо, Джули!
Спасибо вам, наши рецензенты: Эмит Ламба (Amit Lamba), Андрес Саку (Andres Sacoo), Бернар Фуэнтес (Bernard Fuentes), Брендан О’Хара (Brendan O’Hara), Брент Бойлан (Brent Boylan), Крис Виллануэва (Chris Villanueva), Данило Зекович (Danilo Zekovic´), Дерик Хичкок (Derick Hitchcock), Фернандо Бернардино (Fernando Bernardino), Франсиско Ривас (Francisco Rivas), Ганеш Сваминатан (Ganesh Swaminathan), Харш Равал (Harsh Raval), Джеймс (James Bishop), Джейсон Хейлз (Jason Hales), Джефф Смит (Jeff Smith), Джон Пантоя (John Pantoja), Картикеяраджан Раджендран (Karthikeyarajan Rajendran), Келум Прабат Сенанаяке (Kelum Prabath Senanayake), Кент Спиллнер (Kent Spillner), Ларри Кай (Larry Cai), Мэтт Деймел (Matt Deimel), Маттео Баттиста (Matteo Battista), Мишель Уильямсон (Michelle Williamson), Мик Уилсон (Mick Wilson), Миранда Вурр (Miranda Whurr), Нитендра Бхосле (Nitendra Bhosle), Нуран Махмуд (Nouran Mahmoud), Патрис Мальдаг (Patrice Maldague), Питер Гиселинк (Pieter Gyselinck), Ричард Харриман (Richard Harriman), Ричард Тобиас (Richard Tobias), Родни Вайс (Rodney Weis), Роман Жужа (Roman Zhuzha), Сайоа Пикадо Фернандес (Saioa Picado Fernández), Сантош Джозеф (Santosh Joseph), Тефанис Деспудис (Thefanis Despoudis) и Ив Дорфсман (Yves Dorfsman) — ваши рекомендации помогли сделать эту книгу лучше.
Спасибо всем за вашу преданность, усердную работу и практический опыт. Без вас мы бы не справились.
О книге
Эта книга призвана помочь начинающему разработчику React стать опытным мастером. В ней подробно описываются основы React, и материал построен так, чтобы и начинающие, и опытные разработчики могли освоить базовые концепции популярной библиотеки, такие как JavaScript XML (JSX), компоненты, состояние, хуки, события и элементы форм.
Книга будет чрезвычайно полезна любому, кто хочет создавать приложения React, независимо от его уровня знаний. Она понятно и подробно рассказывает о базовых концепциях React и поможет разработчику писать чистый код, который легко обслуживать, понимать и расширять.
Второе издание «React быстро» научит всем фундаментальным принципам, необходимым для проектирования понятных, эффективных, легко обновляемых веб-приложений с использованием React. Как вы увидите, в React сложилась огромная экосистема средств и библиотек. После чтения книги и проработки примеров вы можете решить продолжить совершенствовать свои навыки с прицелом на карьерный рост. В таком случае вам может пригодиться книга «Job-Ready React» Мортена Барклунда (Manning, 2024), которая расширяет навыки и методологии, описанные здесь. Она подготовит вас к будущей работе и познакомит с библиотеками более высокого уровня, а также с приемами и средствами из арсенала профессиональных разработчиков React.
Для кого эта книга
Новички найдут в книге практические примеры и упражнения, которые помогут им разработать первые приложения React, а также как следует разобраться в принципах работы React. В книге приводится пошаговое руководство по созданию приложений React с нуля, с практическими примерами и упражнениями, подкрепляющими теорию.
Для опытных разработчиков книга станет полезным справочником и напомнит фундаментальные концепции React. Она будет особенно полезна тем, кто изучал React без системы или хочет углубить свои знания лучших практик React.
Чтобы извлечь максимум пользы из книги, желательно иметь опыт работы с HTML, CSS и JavaScript, но быть экспертом в этих областях не обязательно. Что еще важнее, вам не понадобится знание React — мы начнем с самого начала и дойдем до того момента, когда вы станете уверенно строить сложные приложения!
Структура книги
Книга включает десять глав, посвященных отдельным темам; за ними следуют три главы проектов. Первые десять глав расположены в естественной последовательности. Читателям без опыта работы с React мы рекомендуем знакомиться с ними по порядку, чтобы обучение было наиболее эффективным.
Если у вас уже есть опыт работы с React, вы можете сразу переходить к интересующей вас главе. В главах с 1-й по 4-ю читатель знакомится с React и ее основными концепциями: структурой компонентов, JSX и функциональными компонентами. Если эти темы вам уже знакомы, эти главы можно пропустить.
В главах с 5-й по 7-ю описаны различные хуки, включая базовые хуки состояния (глава 5), хуки эффектов (глава 6) и прочие (глава 7). В главах 8 и 9 рассматриваются события и формы соответственно. Чтобы освоить приемы работы с полями ввода в формах, просто необходимо отлично разбираться в событиях.
Глава 10 обобщает все рассмотренные концепции. В ней разбираются некоторые нетривиальные компоненты и логические паттерны, которые могут встретиться в более сложных приложениях.
Наконец, в главах с 11-й по 13-ю вы можете проверить новые знания на трех проектах с возрастающей сложностью. Мы создадим интерактивное меню для сайта, таймер и менеджер задач с расширенной функциональностью. Если вы уже знакомы с React, попробуйте самостоятельно реализовать эти проекты, чтобы понять пробелы в своих знаниях.
Исходный код
Весь исходный код, использованный в книге, доступен на GiHub, а также на справочном сайте книги. На нем же доступна система, которая позволяет не только просмотреть и загрузить исходный код для каждого примера, но и запустить полученное приложение прямо в браузере без загрузки каких-либо компонентов. Репозиторий GitHub находится по адресу https://github.com/rq2e/rq2e, а программа просмотра исходного кода — по адресу https://reactquickly.dev/browse.
Исполняемые фрагменты кода можно загрузить с электронной версии этой книги (liveBook) по адресу https://livebook.manning.com/book/react-quickly-second-edition. Полный код примеров из книги также доступен для загрузки на веб-сайте Manning по адресу www.manning.com/books/react-quickly-second-edition.
Книга содержит множество примеров исходного кода как в виде нумерованных листингов, так и встроенных в обычный текст. В обоих случаях исходный код оформляется моношириннымшрифтом, чтобы он отличался от исходного текста.
Во многих случаях исходный код отформатирован; мы добавили разрывы строк и изменили отступы, чтобы листинги помещались на странице. Впрочем, иногда даже этого оказывалось недостаточно, и в листинги пришлось включать маркеры продолжения строк (➥). Многие листинги снабжены выносками, поясняющими моменты, на которые следует обратить внимание.
Программные требования
Чтобы использовать и запускать примеры и проекты в этой книге, вам понадобятся:
• среда командной строки с установленной последней версией Node.js и npm;
• текстовый редактор.
Вот и все! А теперь мы покажем, как быстро настроить среду командной строки и выбрать текстовый редактор, чтобы подготовиться к первому упражнению главы 1.
Среда командной строки с Node.js и npm
Сначала необходимо убедиться, что у вас установлены совместимые версии Node.js и npm. Для запуска примеров из книги понадобится Node.js версии 12 и выше.
Для Windows:
• Откройте окно командной строки или PowerShell, нажав Windows + R, затем введите команду cmd или powershell в диалоговом окне Открыть.
• Введите в командной строке node-v и нажмите Enter.
• Если у вас установлена библиотека Node.js, команда выведет номер версии.
Для macOS и Unix:
• Откройте приложение Терминал.
• Введите в терминале node-v и нажмите Enter.
• Если у вас установлена библиотека Node.js, команда выведет номер версии.
Если библиотека Node.js не установлена или ее версия старше версии 12, перейдите по адресу https://nodejs.org/en/download, загрузите пакет для своей операционной системы и выполните инструкции по установке.
Опытные пользователи могут работать с любым другим менеджером пакетов для установки Node.js. Важно установить версию не ниже 12.
Текстовый редактор
Скорее всего, вы уже умеете работать с текстовым редактором и используете его — с учетом знаний JavaScript, HTML и CSS, необходимых для того, чтобы извлечь максимум пользы из книги. Впрочем, если он у вас не установлен, воспользуйтесь одним из популярных вариантов, совместимых с большинством платформ:
• Sublime Text: www.sublimetext.com/download (бесплатная пробная версия).
• Brackets: https://brackets.io/ (с открытым исходным кодом, бесплатный).
• Visual Studio Code: https://code.visualstudio.com/ (бесплатный).
Форум liveBook
Приобретая книгу «React быстро», 2-е изд., вы получаете бесплатный доступ к веб-форуму издательства Manning (на английском языке), на котором можно оставлять комментарии о книге, задавать технические вопросы и получать помощь от автора и других пользователей. Чтобы получить доступ к форуму, откройте страницу https://livebook.manning.com/book/react-quickly-second-edition/discussion. Информацию о форумах Manning и правилах поведения на них см. на https://livebook.manning.com/discussion.
В рамках своих обязательств перед читателями издательство Manning предоставляет ресурс для содержательного общения читателей и авторов. Эти обязательства не подразумевают конкретную степень участия автора, которое остается добровольным (и неоплачиваемым). Задавайте автору хорошие вопросы, чтобы он не терял интереса к происходящему! Форум и архивы обсуждений доступны на веб-сайте издательства, пока книга продолжает издаваться.
Об авторах
Мортен Барклунд, независимый разработчик, выступавший в качестве ведущего в разных проектах, в том числе в проекте React с открытым кодом, финансируемом Google. Мортен имеет ученую степень в computer science, полученную в Техническом университете Дании; уже более двух десятков лет он активно участвует в жизни сообщества веб-разработчиков и успел поработать над сотнями проектов.
Азат Мардан — автор таких бестселлеров о JavaScript, React и Node.js, как «React быстро», 1-е изд.; «Practical Node.js»; «Pro Express.js», «Full Stack JavaScript» и «TypeScript Mistakes». Он является приглашенным профессором Технологического университета, ментором стартапов и разработчиком или ведущим разработчиком проектов с опытом работы в стартапах и крупных корпорациях, включая YouTube, Google, Capital One, Indeed и DocuSign. Азат преподавал на многих семинарах и курсах, включая курс по edX, который прослушали более 40 000 студентов по всему миру. Азат — лауреат премии Microsoft MVP (Most Valuable Professional) в области технологий разработки и занял 239-е место по активности участия на GitHub в мире. Он выступал с докладами более чем на 30 международных конференциях, в том числе совместно с такими известными технологическими специалистами, как Дуглас Крокфорд (Douglas Crockford), Джефф Этвуд (Jeff Atwood) (один из создателей Stack Overflow), Джим Ягельски (Jim Jagielski) (создатель Apache), Скотт Хансельман (Scott Hanselman) и Дениз Купер (Danese Cooper).
Иллюстрация на обложке
Иллюстрация под названием Homme Baschkir («Башкир»), помещенная на обложку, взята из вышедшего в 1788 году каталога национальных костюмов, составленного Жаком Грассе де Сен-Совером (Jacques Grasset de Saint-Sauveur). Каждая иллюстрация этого каталога тщательно прорисована и раскрашена от руки.
В прежние времена по одежде человека можно было легко определить, где он живет и какова его профессия или положение в обществе. Manning отдает дань изобретательности и инициативности компьютерных технологий, используя для своих изданий обложки, демонстрирующие богатое вековое разнообразие региональных культур, оживающее на изображениях из собраний, подобных этому.
От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу [email protected] (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.
1. Знакомство с React
В ЭТОЙ ГЛАВЕ
• Что такое React?
• React для решения задач
• Интеграция React в веб-приложения
• Пишем первое приложение React: Hello World
React — воистину революционный инструмент. Многие разработчики даже не знают о том, что он им необходим, но стоит один раз попробовать, и они уже не могут с ним расстаться. Именно так случилось с авторами этой книги и многими другими энтузиастами веб-разработки. React пользуется невероятной популярностью — и на то есть веские причины.
Чтобы заниматься веб-разработкой в начале 2000-х, все, что было нужно, — HTML и серверный язык (такой, как Perl или PHP). Старые добрые времена, когда для обычной отладки кода на фронтенд приходилось набивать его вызовами alert()! Время шло, интернет-технологии развивались, и сложность сайтов возросла в разы. Сайты превратились в веб-приложения со сложными интерфейсами, бизнес-логикой и уровнями данных, которые требовали постоянных изменений и обновлений, часто в реальном времени.
Для решения проблем с построением сложных пользовательских интерфейсов (UI, User Interface) было написано много библиотек шаблонов JavaScript. Однако все они требовали, чтобы разработчики придерживались классического разделения обязанностей, то есть разделения стилей (CSS), данных и структуры (HTML) и динамических взаимодействий (JavaScript), и не удовлетворяли современных потребностей. (Помните DHTML?)
React же предлагает новый подход, при правильном применении упрощающий разработку клиентской части. React — мощная библиотека пользовательского интерфейса — предоставляет альтернативу, принятую многими крупными компаниями, такими как Facebook, Netflix и Airbnb, которые сочли ее перспективной. Вместо создания одноразовых шаблонов для пользовательских интерфейсов React позволяет создавать на JavaScript UI-компоненты, которые можно снова и снова использовать на сайтах.
Вам нужен элемент для вывода капчи или выбора даты? Определите в React компонент <Captcha/> или <DatePicker/>, который можно добавить к форме: простой подключаемый компонент, содержащий всю функциональность и логику для взаимодействия с бэкендом. Понадобилось поле с автозаполнением, которое обращается с асинхронным запросом к базе данных после того, как пользователь введет четыре буквы или больше? Определите компонент <AutocompletecharNum="4"/> для асинхронного запроса. Вы даже можете выбрать, будет ли такое поле иметь интерфейс текстового поля или же вместо него будет использоваться другой нестандартный элемент формы, возможно, <Autocompletetextbox="..."/>.
Такой подход не нов. Идея построения пользовательских интерфейсов из компонентов появилась давно, но React стал первым, кто предоставил такую возможность с использованием чистого JavaScript без шаблонов. И такой метод оказалось проще обслуживать, повторно использовать и расширять.
React — превосходная библиотека для создания пользовательских интерфейсов, и ее просто необходимо включить в свой веб-инструментарий. Тем не менее она не решает всех задач фронтенд-разработки. В этой главе рассматриваются плюсы и минусы использования React в приложениях и возможность интеграции React в существующий стек веб-разработки.
В этой книге разбираются лишь основы React. Мы хотим, чтобы читатель прочно усвоил базовые концепции и принципы библиотеки React, не углубляясь в изучение сопутствующих или более сложных тем. Сосредоточившись исключительно на React, читатели смогут как следует разобраться в возможностях библиотеки и будут готовы применить полученные знания в разработке разнообразных веб-проектов.
1.1. Преимущества React
Создатели каждой новой библиотеки или фреймворка утверждают, что их детище по определенным параметрам превосходит своих предшественников. Вначале была библиотека jQuery, и она стала огромным шагом вперед, позволив писать межбраузерный код на чистом JavaScript. Если вам доводилось работать с JavaScript на заре веб-программирования, вы знаете, что один вызов AJAX мог занимать много строк кода, так как разработчику приходилось учитывать специфику Internet Explorer и WebKit-браузеров. С jQuery же стало достаточно одного-единственного вызова: $.ajax(). В те дни jQuery иногда даже называли фреймворком — но не сейчас! Теперь под фреймворком понимают что-то более масштабное и мощное.
Точно так же дело обстояло с Backbone, а затем и с Angular; каждое новое поколение фреймворков JavaScript приносило что-то новое. В этом React не уникален. Новое в нем то, что React переосмысливает некоторые базовые концепции, используемые многими популярными фреймворками: например, идею о необходимости шаблонов.
Ниже перечислены некоторые преимущества React перед другими библиотеками и фреймворками, существовавшими на момент появления React:
• Простые приложения — React использует компонентную архитектуру с чистым JavaScript, декларативный стиль программирования и мощные, удобные для разработчика абстракции DOM (и не только DOM, но и iOS, Android и т.д.).
• Быстрый пользовательский интерфейс — React обеспечивает выдающуюся производительность благодаря своей виртуальной модели DOM и алгоритму интеллектуального согласования (smart-reconciliation algorithm). Одно из дополнительных преимуществ — возможность тестирования без запуска браузера с отсутствующим графическим интерфейсом.
• Сокращение объема кода — огромное сообщество React и гигантская экосистема компонентов предоставляют в распоряжение разработчика множество разнообразных библиотек и компонентов. Это важный момент при выборе фреймворка, используемого для разработки.
Благодаря целому ряду особенностей React был проще в использовании по сравнению с другими фреймворками для фронтенда, доступными на первых порах его существования. Однако с момента выхода React появилось много новых фреймворков. Отчасти из-за популярности React разработчики некоторых из них руководствовались аналогичными концепциями или стремились реализовать те же преимущества, слегка изменяя их параметры. Одни фреймворки были вдохновлены той же идеей, но работали совершенно иначе, тогда как другие были очень похожи на React, но обладали более узкой функциональностью и иногда требовали написания дополнительного кода, но в других случаях заметно сокращали объем кода приложения.
Разберем, что сделало React таким популярным. Это особенности, которые были уникальны для этого фреймворка на момент его выхода, а сейчас появились и у других современных фреймворков. Разберем их подробнее, один за другим. Начнем с невероятной простоты использования.
1.1.1. Простота
Концепция простоты в компьютерных технологиях высоко ценится как разработчиками, так и пользователями. Тем не менее она подразумевает не только простоту использования. Простое решение может быть более сложным в реализации, но в конечном итоге оно оказывается более элегантным и эффективным, а кажущееся на первый взгляд простым нередко оказывается сложным. Простота тесно связана с принципом KISS (Keep It Simple, Stupid, то есть «не усложняй»1). Суть в том, что простые системы лучше работают.
Подход React позволяет строить более простые решения с применением кардинально улучшенного процесса веб-разработки. Когда мы начинали работать с React, это стало для нас масштабным сдвигом, который можно было сравнить с переходом от простого JavaScript без фреймворков на jQuery.
В React эта простота достигается благодаря следующим особенностям:
• Декларативный стиль (в отличие от императивного) — React отдает предпочтение декларативному стилю вместо императивного, автоматически обновляя представления.
• Компонентная архитектура, использующая чистый JavaScript, — React не использует для своих компонентов предметно-ориентированные языки (DSL, Domain-Specific Languages), только чистый JavaScript. Кроме того, отсутствует искусственное разделение работы над одной функциональностью.
• Мощные абстракции — в React существует упрощенный механизм взаимодействия с DOM, который позволяет нормализовать обработку событий и другие интерфейсы, работающие одинаково в разных браузерах.
Рассмотрим все эти особенности по очереди.
Декларативный стиль
Декларативный стиль означает, что разработчик определяет, чтодолжно получиться, а не как это делать шаг за шагом (как в императивном стиле). Но почему декларативный стиль лучше? Его главное преимущество — уменьшение сложности, упрощение чтения и понимания кода.
Различия между императивным и декларативным стилем программирования быстро переходят в область чистой теории. Декларативное программирование, в своем максимальном проявлении, становится слишком сложным для понимания без знания таких сложных абстрактных концепций, как монады и функторы. Вот несколько возможных различий между двумя стилями:
• Выражения вместо команд — программирование в императивном стиле часто работает с независимыми командами, которые сами по себе изменяют состояние программы, тогда как в декларативном программировании используются выражения, которые в сочетании друг с другом направляют логику выполнения.
• Зарезервированные слова — в императивном стиле программирования часто используются многочисленные зарезервированные слова (for, while, switch, if, else и т.д.), тогда как в декларативном программировании для достижения тех же результатов используются методы массивов, стрелочные функции, обращения к объектам, булевы выражения и тернарные операторы.
• Композиция функций — в императивном стиле программирования часто используются независимые вызовы функций и методов, тогда как программирование в декларативном стиле использует композицию функций для определения новых выражений на базе существующих и создания небольших обобщенных логических блоков, композиция которых приводит к нужному результату.
• Изменяемость — в императивном программировании часто используются изменяемые объекты и операции с существующими структурами, тогда как в декларативном программировании используются неизменяемые данные, а новые структуры создаются на базе уже существующих (вместо их модификации).
Продемонстрируем различия между стилями на простом примере. Требуется создать функцию countGoodPasswords, которая для заданного списка паролей возвращает количество «хороших» (сильных) паролей. Хорошим будем считать пароль длиной не менее 9 символов.
Это очень простая задача, которую можно решить на любом языке программирования несколькими разными способами. Для некоторых языков естественнее и удобнее какой-то определенный стиль, но JavaScript занимает особое место, так как он принадлежит обоим мирам. В нем задача может решаться как императивно, так и декларативно.
Начнем с (очень) наивного императивного решения:
Конечно, этот пример немного искусственный, и даже в полностью императивной парадигме программирования программа может быть намного короче.
Реализуем тот же пример в парадигме декларативного программирования:
function countGoodPasswords(passwords) {
return passwords.filter(p => p.length >= 9).length;
}
Мы приходим прямо к цели всего одной командой, которая манипулирует с объектом за несколько шагов, применяя композицию функций для достижения нужного результата. Исходный массив фильтруется с переходом к временному значению — массиву, содержащему только хорошие пароли. Однако этот массив нигде не сохраняется; мы переходим сразу к следующему шагу, на котором определяется длина полученного массива.
Впрочем, это был довольно типичный код JavaScript. А как насчет React? React применяет тот же декларативный подход при построении пользовательских интерфейсов. Сначала разработчик описывает элементы интерфейса в декларативном стиле. А если в представлениях, генерируемых этими элементами, произойдут изменения, React позаботится об обновлении. Вот так!
Удобство декларативного стиля React в полной мере проявляется при необходимости вносить изменения в представление. Они называются изменениями внутреннего состояния. При изменении состояния React соответствующим образом обновляет представление.
ПРИМЕЧАНИЕ О том, как работают состояния, говорится в главе 4.
Компонентная архитектура с использованием чистого JavaScript
Компонентная архитектура (CBA, component-based architecture) существовала еще до появления React. Разделение обязанностей, слабая связанность (coupling) и повторное использование кода лежат в основе этого подхода, имеющего массу преимуществ: разработчики, в том числе веб-разработчики, обожают компонентную архитектуру. Структурным элементом CBA в React является класс компонента. Как и другие CBA, он обладает многими преимуществами, главное из которых — повторное использование (ведь так вы пишете меньше кода!).
Главное, чего не хватало до появления React, — реализации этой архитектуры на чистом JavaScript. Работая с Angular, Backbone, Ember и большинством других MVC-подобных фреймворков для фронтенда, вы используете один файл для JavaScript, а другой файл для шаблона (в Angular употребляется термин директивы для компонентов).
Использование двух языков (и двух и более файлов) для одного компонента создает ряд проблем. Разделение HTML и JavaScript хорошо работает, если разметка HTML рендерится на сервере, а JavaScript используется только для эффектов типа мигающего текста. Теперь одностраничные приложения (SPA, Single Page Applications) обрабатывают сложный пользовательский ввод и выполняют рендер в браузере. Это означает, что HTML и JavaScript жестко связываются в функциональном отношении. Для разработчиков было бы удобнее не разделять HTML и JavaScript в ходе работы над частью проекта (компонентом).
Во внутренней реализации React использует виртуальную модель DOM для определения различий (дельты) между текущим содержимым браузера и новым представлением. Этот процесс называется сравнением (diffing) в DOM или соотнесением состоянияс представлением (когда они перестают различаться). Это означает, что разработчикам не нужно явно изменять представление; им достаточно обновить состояние, а представление будет обновляться автоматически по мере надобности. Вы увидите, как эта концепция снова и снова неявно используется в книге. Мы никогда не манипулируем DOM напрямую, а поручаем React выполнять эту работу за нас.
И наоборот, с jQuery обновления приходится реализовывать в императивном стиле. Манипулируя DOM, разработчик может на программном уровне изменять веб-страницу или ее отдельные части (более вероятный сценарий) без повторной перерисовки всей страницы. Собственно, при вызове методов jQuery происходят именно операции с DOM.
Чтобы оценить, какую поддержку обеспечивает используемый фреймворк, взгляните на рис. 1.1. На одном конце шкалы находится «фреймворк», который вообще вам не помогает. Напишите свое приложение на простом JavaScript, и вы окажетесь в этой точке. Использование jQuery несколько упрощает манипуляции с DOM, но при обновлениях вы все равно не получите никакой поддержки от фреймворка. Вам придется вручную обновлять представления jQuery при обновлении данных jQuery.
Рис. 1.1. Какую помощь оказывает фреймворк? jQuery не делает ничего; Angular делает все. Для некоторых разработчиков React занимает золотую середину между этими крайностями
На другом конце шкалы находятся такие фреймворки, как Angular, — еще один очень популярный фреймворк, сравнимый с React во всех отношениях. Однако Angular работает по совершенно иному принципу, а за кулисами происходит гораздо больше «волшебства». Часто вы просто описываете, как компоненты взаимодействуют друг с другом, а Angular пытается правильно связать их. Проблема в том, что если что-то работает не так, вы часто теряете возможность точного управления. Вы многого не видите, и это приводит к излишнему усложнению.
React находит ту «золотую середину», в которой фреймворк берет на себя большую часть рутинной работы по связыванию компонентов, но не лишает вас возможности точного управления, необходимого для создания сложных веб-приложений. Разумеется, это мнение субъективно, но его разделяют многие разработчики.
Мощные абстракции
React предоставляет ряд замечательных абстракций, которые значительно упрощают жизнь разработчика:
• Синтетические события, абстрагирующие браузерные различия в платформенных событиях.
• JavaScript XML (JSX) абстрагирует JS DOM.
• Независимость от браузера обеспечивает возможность рендера в небраузерных средах (например, на сервере).
В React реализована мощная абстракция модели событий браузера. Иначе говоря, React скрывает нижележащие интерфейсы и предоставляет нормализованные/синтезированные методы и свойства. Например, при создании события onClick в React обработчик события получает не платформенный объект события для конкретного браузера, а синтетический объект события, который является оберткой для платформенных объектов событий. Вы можете рассчитывать на одинаковое поведение синтетических событий независимо от того, в каком браузере будет выполняться код. React также содержит набор синтетических событий для событий касания, которые отлично подходят для построения веб-приложений для мобильных устройств.
JSX — один из неоднозначных элементов React. Для некоторых разработчиков абстракция JSX — сильный аргумент в пользу React, тогда как для других она становится препятствием, иногда даже непреодолимым.
Если вы знакомы с Angular, значит, вам уже доводилось писать большой объем кода JavaScript в коде шаблона, потому что в современной веб-разработке простая разметка HTML слишком статична и вряд ли будет применяться на практике сама по себе. Мы рекомендуем дать React шанс и протестировать JSX на практике.
JSX представляет собой синтаксический сахар на базе JavaScript, позволяющий записывать элементы React на JavaScript в HTML-подобной записи с <>. React хорошо сочетается с JSX, поскольку разработчикам становится проще реализовать и прочитать код. JSX можно считать своего рода мини-языком, который компилируется в платформенный JavaScript. Таким образом, JSX не выполняется в браузере, а используется как исходный код для компиляции. Рассмотрим компактный фрагмент, написанный на JSX:
if (user.session) {
return <a href="/logout">Logout</a>;
} else {
return <a href="/login">Login</a>;
}
Даже если вы загрузите файл JSX в браузере при помощи библиотеки среды выполнения, которая сразу компилирует JSX в платформенный JavaScript, вы все равно выполняете не JSX, а JavaScript. В этом смысле JSX напоминает CoffeeScript. Эти языки компилируются в платформенный JavaScript с улучшенным синтаксисом и функциональностью по сравнению с обычным JavaScript.
Мы понимаем, что для кого-то сама идея чередования HTML с кодом JavaScript выглядит странно. Всем новичкам React (как и нам когда-то) требуется время, чтобы свыкнуться с этой идеей, потому что они подсознательно ожидают увидеть лавину сообщений о синтаксических ошибках. Да, использовать JSX не обязательно. По этим двум причинам мы не рассматриваем JSX до главы 3. Однако поверьте на слово: это очень мощный язык. Стоит к нему привыкнуть, и вам будет трудно с ним расстаться.
Другой пример абстракции DOM в React — возможность рендера элементов React на сервере. Она может пригодиться для улучшения поисковой оптимизации (SEO) и/или производительности.
При рендере компонентов React на сервере варианты не ограничиваются DOM или строками HTML. Возможны гибридные решения, в которых шаблоны с контентом проходят рендер на сервере, после чего заново заполняются живыми данными в браузере. Эта опция более подробно рассматривается в разделе 1.3. И если говорить о DOM, одним из самых заманчивых преимуществ React является превосходная производительность.
1.1.2. Скорость и удобство тестирования
Помимо необходимых обновлений DOM, фреймворк может выполнить ненужные обновления, которые только снижают производительность сложных пользовательских интерфейсов. Этот эффект особенно заметен и неприятен для пользователя при большом количестве динамических UI-элементов на веб-странице.
С другой стороны, виртуальная модель DOM React существует только в памяти JavaScript. Каждый раз, когда происходит изменение в данных, React сначала сравнивает различия по своей виртуальной модели DOM; только когда библиотека знает, что в рендере произошли изменения, она обновляет фактическую модель DOM. На рис. 1.2 изображена высокоуровневая схема работы виртуальной модели DOM React при изменении данных.
В конечном итоге React обновляет только те части, для которых это абсолютно необходимо, чтобы внутреннее состояние (виртуальная модель DOM) и представление (реальная модель DOM) не отличались. Например, если присутствует элемент <p> и текст дополняется состоянием компонента, то обновлен будет только текст (то есть innerHTML), а не сам элемент. Таким образом обеспечивается повышение производительности по сравнению с повторным рендерингом целых наборов элементов или даже целых страниц (рендеринг на стороне сервера).
Рис. 1.2. После того как рендеринг компонента завершен, при изменении состояния он сравнивается с виртуальной моделью DOM, находящейся в памяти, и в случае необходимости рендерится заново
ПРИМЕЧАНИЕ
Если вас интересует техническая сторона алгоритмов и нотация «О-большое», следующие две статьи отлично объясняют, как команде React удалось превратить задачу O(n3) в задачу O(n):
• Reconciliation на сайте React (http://mng.bz/PQ9X);
• React’s Diff Algorithm Кристофера Шедо (Christopher Chedeau) (http://mng.bz/68L4).
Еще одно преимущество виртуальной модели DOM — возможность проведения модульного тестирования без браузеров, не имеющих графического интерфейса, например PhantomJS (http://phantomjs.org). Существует ряд библиотек, включая Jest и React Testing Library, которые позволяют тестировать компоненты React прямо из командной строки! Модульное тестирование компонентов React более подробно рассматривается в следующих главах.
1.1.3. Экосистема и сообщество
Наконец, React поддерживается разработчиками такого гиганта, как Facebook, а также их коллегами из Instagram. Как и в случае с Angular и некоторыми другими библиотеками, поддержка технологии крупной компанией обеспечивает превосходные условия для тестирования (так как приложение открывается в миллионах браузеров), создает уверенность в будущем и повышает скорость, с которой участники сообщества добавляют новый контент. Конечно, существует риск того, что, если Facebook внезапно захочет двигаться в ином направлении, которое вам не понравится, вы окажетесь в тупике, так что тщательно продумайте свой выбор.
Для React существует огромный объем качественного контента. Если вам понадобится какой-то компонент или интерфейс, достаточно вбить в поиске интернета запрос «react [имя_компонента]», и более чем в 95 % случаев вы найдете что-нибудь, заслуживающее внимания.
История ПО с открытым исходным кодом показывает, что маркетинг подобных проектов не менее важен для их успеха, чем сам код. Если у проекта убогий сайт, не хватает документации и примеров, а логотип выглядит уродливо, большинство разработчиков проигнорируют его, особенно сейчас, когда библиотек JavaScript развелось как грибов после дождя. Разработчики привередливы и не станут выбирать кота в мешке.
«Нельзя судить о книге по ее обложке», — скажете вы. На первый взгляд эта истина опровергает сказанное выше. Но к сожалению, большинство людей — и разработчики не исключение — склонны к предубеждениям, особенно когда это касается позиционирования продукта. К счастью, у React за спиной отличная техническая репутация. И раз уж речь зашла о книгах и обложках — надеемся, вы купили эту книгу не из-за обложки!
1.2. Недостатки React
Конечно, почти все на свете имеет недостатки. В том числе и React, но их список для каждого свой. Некоторые особенности, например декларативный стиль в отличие от императивного, в высшей степени субъективны. Для кого-то это достоинство, а для кого-то недостаток. Ниже приведен наш список недостатков React (как и любые списки такого рода, он необъективен):
• React не является полноценным фреймворком на все случаи жизни (как швейцарский нож). Разработчикам приходится использовать React с такими библиотеками, как Redux или XState, чтобы добиться функциональности, сравнимой с Angular или Ember. Это может стать преимуществом, если вам нужна минималистская UI-библиотека для интеграции с существующим стеком.
• Стеки React требуют сопровождения и непрерывного управления пакетами. Так как вы никогда не работаете с React в отдельности, а почти всегда объединяете ее с другими пакетами, вам придется постоянно следить за зависимостями и использованием нужных версий пакетов. В крупных проектах это может добавить немало лишней работы.
• React использует нетрадиционный подход к веб-разработке, а JSX и функциональное программирование могут отпугнуть новичков. Особенно на первых порах React и похожим фреймворкам не хватало практических приемов, хороших книг, обучающих курсов и источников информации. Подробнее о JSX мы поговорим в главе 3.
• React поддерживает только одностороннее связывание. Хотя одностороннее связывание лучше для сложных приложений, поскольку оно устраняет основную сложность, некоторые разработчики (особенно Angular-разработчики), привыкшие к двустороннему связыванию, увидят, что им приходится писать чуть больше кода. Мы объясним, как работает одностороннее связывание по сравнению с двусторонним связыванием Angular, в главе 9, при рассмотрении работы с данными форм.
• React в чистом виде не является реактивным (в смысле реактивного программирования и архитектур, которые в большей степени управляются событиями, более гибкие и отзывчивые). Разработчикам приходится использовать другие инструменты, такие как библиотека React Query, для обеспечения бесшовной интеграции с внешним контентом и быстрого времени отклика. Также разработчикам приходится слегка менять подход к созданию приложений React; в противном случае попытки «затолкать круглый React в квадратную архитектуру» приводят к появлению плохо написанных приложений.
Продолжая введение в React, посмотрим, как React интегрируется в веб-приложение.
1.3. Как React интегрируется в веб-приложение
Вариантов сайтов существует множество, и React можно использовать для создания интерактивного контента во многих из них — либо как замену существующих технологий, либо как механизм добавления новой функциональности на сайт. React можно использовать как на «классических» сайтах, которые в основном рендерятся на сервере, так и в клиентских веб-приложениях, также называемых одностраничными приложениями (SPA), о которых мы уже упоминали.
Базовая библиотека React в первую очередь является UI-библиотекой. Базовая библиотека совместима с другими UI-библиотеками, но несовместима напрямую с более полнофункциональными фреймворками веб-приложений (такими, как Angular). Впрочем, в сочетании с другими библиотеками, разработанными командой React или сторонними поставщиками (например, React Router и Redux), React может стать полноценным конкурентом для любого фреймворка веб-приложений.
Если вы используете другой фреймворк SPA (Angular, Vue, Ember, Backbone и т.д.) для рендеринга веб-приложения, вероятно, вам придется полностью заменить его стеком на базе React. Очень трудно, практически невозможно, создать гибридное SPA-приложение, у которого, например, одни части генерируются средствами Angular, а другие — средствами React.
Можно использовать React только для части пользовательского интерфейса, если на сайте присутствуют небольшие интерактивные UI-элементы (виджеты). В таком случае можно постепенно заменять виджеты небольшими приложениями React, не внося других изменений. Существующие виджеты могут быть написаны на простом JavaScript, на базе jQuery и даже Angular или сходного фреймворка. В процессе преобразования виджетов на React вы сможете оценить разные варианты и поймете, какой из них лучше вам подходит.
Разработка фронтенда на React не зависит от части бэкенда. Другими словами, чтобы использовать React, вам не придется зависеть от бэкенда на базе JavaScript (Node или Deno). Ничто не мешает использовать React с другими технологиями бэкенда, такими как Java, Ruby, Go или Python. В конце концов, React — UI-библиотека. Ее можно интегрировать с любым бэкендом и любой библиотекой данных фронтенда (Backbone, Angular, Meteor и т.д.).
Другой популярный сценарий применения React — генераторы статических сайтов. В такой конфигурации React используется для локального определения веб-сайта в заданной среде, а затем при развертывании на живом сервере выполняется рендеринг в веб-сайт на базе простого HTML, где JavaScript используется по минимуму, только для добавления интерактивности. Все шаблоны и т.п. будут преобразованы. Изначально такое решение было популярно для небольших и относительно нечасто обновляемых сайтов, например блогов.
Недавние достижения в рендеринге React на стороне сервера повысили популярность решений с предварительным рендерингом даже для больших SPA-приложений с частыми обновлениями. В таких случаях подойдут популярные фреймворки на базе React, такие как Next.js или Remix. Подобные решения относятся к категории веб-приложений с частичным рендерингом на стороне сервера, в которых код React выполняется как на сервере, так и в клиенте. Например, можно выполнить частичный рендер списка на сервере и добавить поддержку интерактивной фильтрации и сортировки на стороне клиента. Возможно, кого-то такое описание напугает, но с новыми фреймворками, такими как Next.js и Remix, такие задачи решаются относительно просто.
Подытожим, как React может интегрироваться в веб-приложения. React чаще всего используется в следующих случаях:
• Как UI-библиотека в одностраничных приложениях на базе стека, связанного с React, например React+React Router+Redux.
• Как подключаемый виджет в любом стеке фронтенда (например, как компонент ввода с автозаполнением на сайте, созданном с использованием комбинации технологий).
• Как статический веб-сайт, рендеринг которого осуществляется при развертывании для предоставления редко обновляемого контента.
• Как веб-сайт с частичным рендерингом на стороне сервера или одностраничное приложение, построенное на базе более мощного фреймворка, которое теоретически может получать контент от внешней CMS (например, WordPress или Contentful).
• Как UI-библиотека в мобильных приложениях с использованием React Native или десктопных приложениях с использованием Electron.
React хорошо сочетается с другими фронтенд-технологиями, но в основном используется как часть одностраничной архитектуры (SPA). О том, какое место React занимает в SPA, расскажем в следующем разделе.
1.3.1. Одностраничные приложения и React
Одностраничные приложения (SPA) — это особый тип веб-сайтов. Сайт относится к категории SPA, если значительная часть его функциональности (не только вывод информации) доступна непосредственно в браузере. Примеры: Facebook, Google Docs, Gmail и т.д.
SPA-приложения строятся с применением многих технологий, и React лишь одна из возможных частей стека. Более того, одной React недостаточно; чтобы React-приложение могло работать автономно, понадобится как минимум несколько других технологий. В этом разделе мы разберемся, что собой представляет SPA в целом, а затем покажем, какое место React занимает в этой структуре.
Другое название для архитектуры SPA — толстый клиент; браузер, выступая в роли клиента, содержит основную логику и выполняет такие функции, как рендеринг HTML, проверка данных, изменения пользовательского интерфейса и т.д. Сравните с «тонким клиентом», в котором браузер используется только для отображения информации, заранее сгенерированной сервером. В тонком клиенте браузер выполняет минимальный объем работы.
На рис. 1.3 показано общее представление типичной архитектуры SPA независимо от используемой технологии. На диаграмме изображена высокоуровневая архитектура с пользователем, браузером и сервером. Пользователь формулирует запрос, а также выполняет действия ввода, такие как нажатие кнопок, перетаскивание, наведение указателя мыши и т.д.
Рис. 1.3. Обобщенная архитектура SPA
Рассмотрим типичный процесс от начала до конца, следуя по порядку шагов, представленному на рис. 1.3:
1. Пользователь вводит URL-адрес в браузере, чтобы открыть новую страницу.
2. Браузер отправляет URL-запрос серверу.
3. Сервер отвечает статическими ассетами — HTML, CSS и JavaScript. В большинстве случаев разметка HTML минимальна, то есть это всего лишь заготовка веб-страницы. Обычно в это время на экране появляется сообщение «Loading…» («Загрузка…») и/или GIF-изображение спиннера.
4. Статические ассеты включают код JavaScript для SPA. При загрузке этот код отправляет дополнительные запросы данных.
5. Данные возвращаются в JSON, XML или любом другом формате.
6. После того как одностраничное приложение получит данные, оно выполняет рендеринг отсутствующей разметки HTML (блок «Пользовательский интерфейс» на рисунке). Другими словами, рендер UI осуществляется в браузере средствами SPA-приложения, наполняющего шаблоны данными. Этот процесс называется гидратацией (hydration).
7. По завершении рендера браузер обновляет контент, и пользователь может работать со страницей.
8. Пользователь видит красивую веб-страницу. Он может взаимодействовать со страницей («Ввод» на рисунке), инициируя новые запросы от SPA к серверу, и цикл шагов 2–6 продолжается. На этой стадии возможна маршрутизация в браузере, если SPA реализует ее; это означает, что навигация по новому URL-адресу инициирует не загрузку новой страницы с сервера, а повторный рендер SPA в браузере.
Подведем итог: в SPA большая часть рендера UI происходит в браузере. От браузера и к нему передаются только данные. Сравните с «классическим» веб-сайтом (то есть не SPA), при котором весь рендер, или прорисовка, выполняется на сервере. React интегрируется в архитектуру SPA на шагах 6 и 8, где выполняется рендеринг контента, основанный на данных, а также обработка пользовательского ввода и обновление контента на основании обновленных данных.
1.3.2. Стек React
React не является полноценным фреймворком JavaScript для фронтенда. Библиотеку React можно назвать минималистской в том смысле, что она решает только одну задачу (рендеринг реактивных UI) и старается делать это очень хорошо. React не привязывает выполнение таких операций, как моделирование данных, стилевое оформление или маршрутизация, к определенной схеме (то есть не является категоричным). По этой причине разработчикам приходится использовать React в паре с библиотекой маршрутизации и/или моделирования.
Хотя React можно применять как меньшую часть стека, разработчики чаще выбирают использование React-центричного стека, который состоит как из ядра React, так и из библиотек данных, маршрутизации и стилей, созданных специально для использования с React, включая следующие:
• Библиотеки моделей данных и бэкенда, такие как TanStack Query (https://tanstack.com/query/latest), Redux (http://redux.js.org), Recoil.js (https://recoiljs.org/), XState (https://xstate.js.org/) и Apollo (www.apollographql.com/).
• Библиотека маршрутизации — часто используется React Router (https://github.com/reactjs/react-router) или аналогичный маршрутизатор, реализованный во многих фреймворках.
• Библиотеки стилей — либо заранее определенный набор компонентов с примененными стилями, такими как Material UI (https://mui.com/) или Bootstrap (https://react-bootstrap.github.io/), либо библиотека, обеспечивающая удобство работы с CSS внутри компонентов React, например Styled-Components (https://styled-components.com/), Vanilla Extract (https://vanilla-extract.style/) или даже Tailwind CSS (https://tailwindcss.com/).
Фреймворки React для веб-сайтов
Другую категорию фреймворков React составляют полноценные серверные фреймворки, которые берут на себя многие задачи. Такие фреймворки делятся на две категории, но иногда фреймворк может относиться к обеим из них:
• Генераторы статических сайтов (SSG).
• Динамический React, генерируемый на сервере (SSR).
SSG представляют собой фреймворки, которые генерируют полностью статический веб-сайт, готовый к развертыванию на любом хосте для статических сайтов, что требует минимальных усилий и затрат на хостинг. Такое решение особенно популярно для небольших личных сайтов (например, блогов), но оно применяется и для сайтов небольших компаний и даже интернет-магазинов (которые не обязательно часто обновлять).
Фреймворки SSR более сложны. Они обеспечивают предварительный рендеринг приложения React на сервере перед передачей разметки HTML по каналу связи в браузеры посетителей. Это означает, что они хорошо подходят для SEO, обеспечивают хорошую совместную используемость и обладают множеством других преимуществ. Ниже названы три таких фреймворка:
• Gatsby — очень популярный фреймворк для блогеров, который также может подойти для разных видов статических веб-сайтов.
• Next.js — вероятно, самый популярный фреймворк React для веб-сайтов. Пригодится как для небольших статических сайтов, так и для огромных динамических сайтов.
• Remix — относительно новый представитель этого семейства, очень быстро набирает популярность на сверхбыстрых динамических сайтах React.
Все эти фреймворки — и многие, многие другие — являются разными расширениями React, каждое из которых функционирует в своих парадигмах. Они добавляют новую функциональность на базе React и иногда поставляются вместе с наборами компонентов React, которые помогут создать сайт, раскрывающий весь потенциал фреймворка.
Экосистема библиотек React растет с каждым днем. Кроме того, способность React описывать компоненты (автономные фрагменты пользовательского интерфейса) обеспечивает возможность повторного использования кода. Множество компонентов упаковываются в виде npm-модулей.
Отличный (и тщательно отобранный) список компонентов React для разных целей можно найти на странице https://github.com/brillout/awesome-react-components. В этом списке есть все, от UI-компонентов (включая множество элементов форм) до полных UI-фреймворков или вспомогательных средств разработки и инструментов тестирования.
Итак, вы узнали, что такое React, стек React и какое место эта библиотека занимает в высокоуровневых SPA-приложениях. Теперь можно использовать инструменты, построенные на базе React, для генерирования сложных веб-сайтов. Пора взяться за дело и написать первый код React.
1.4. Первый код React: Hello world
Рассмотрим первый код React: типичнейший пример, встречающийся при изучении языков программирования, — приложение Hello world. (Если этого не сделать, боги программирования нас покарают!)
Рис. 1.4. Процесс создания первого приложения React включает всего три простых шага
Чтобы взяться за работу, вам кое-что понадобится. К счастью, так как мы разрабатываем приложение, которое выполняется в браузере, можно обойтись без разных компиляторов или библиотек. Вот краткий список того, что вам понадобится для работы:
• Текстовый редактор.
• Умение пользоваться системным терминалом.
• Установленная копия npm версии 5.2 и выше (если учесть, что версия 5.2 появилась в июле 2017 года, скорее всего, ваша копия npm подойдет, — конечно, если она у вас есть).
• Установленный современный браузер (подойдет любая новая версия Edge, Firefox, Chrome или Safari).
Если у вас есть все вышеперечисленное, можно переходить к первому примеру. При работе над другими примерами в дальнейшем вам также, скорее всего, не понадобится ничего, что выходило бы за рамки этого списка.
1.4.1. Результат
Проект будет выводить текст «Hello world!!!» (<h1>) на веб-странице. На рис. 1.5 показан результат (хотя, возможно, вы не испытываете большого энтузиазма и ограничитесь одним восклицательным знаком).
Рис. 1.5. Приложение «Hello World»
JSX в примере еще не используется, только простой код JavaScript. (Более того, JSX будет использоваться, начиная лишь с главы 3.)
ИЗУЧАЕМ REACT БЕЗ JSX
Хотя все разработчики React пишут на JSX, в браузерах выполняется только стандартный код JavaScript; код JSX непонятен браузеру. Вот почему полезно начинать знакомство с кода React на стандартном JavaScript. Другая причина, по которой мы начинаем со стандартного JS, — показать, что JSX является необязательным, хотя, по сути, и стандартным языком React. Наконец, предварительная обработка JSX требует некоторого инструментария, но она упростит всю настройку, потому что вы будете меньше обращать внимание на то, что происходит под капотом, и займетесь более интересным делом — написанием отличных компонентов React.
Мы хотим, чтобы вы как можно быстрее начали работать с React, не тратя слишком много времени на подготовку в этой главе. В главе 2 вы узнаете, с чего начинается работа над новым приложением, а в главе 3 мы добавим JSX.
1.4.2. Написание приложения
Проект настолько прост, что он состоит из единственного файла HTML. Этот файл будет включать ссылки на новейшие версии React 18 (самая стабильная версия на момент написания книги) библиотек React Core и ReactDOM. Конечно, в него также включен небольшой фрагмент кода JavaScript для прорисовки очень простого приложения, которое мы строим.
Разметка index.html очень проста. Она начинается с включения библиотек в <head>. В элементе <body> создается контейнер <div> с идентификатором root и элементом <script> (в котором позднее будет размещен код приложения), как показано в листинге 1.1.
Листинг 1.1. Загрузка библиотек и кода React
Просто введите этот код в текстовом редакторе и сохраните его в файле с именем index.html где-нибудь на компьютере.
Зачем создавать узел <div>, почему бы не выполнить рендер элемента React прямо в элементе <body>? Потому что это может создать конфликт с другими библиотеками и браузерными расширениями, которые манипулируют с телом документа. Более того, попытавшись присоединить элемент непосредственно к телу документа, вы получите предупреждение:
Warning: createRoot(): Creating roots directly with document.body is
➥ discouraged, ....
Вот еще одна сильная сторона React: полезные предупреждения и сообщения об ошибках!
ПРИМЕЧАНИЕ Предупреждения и сообщения об ошибках React не включаются в итоговую сборку в целях сокращения информационного шума, повышения безопасности и уменьшения размера дистрибутива. Итоговая сборка представляет собой минифицированный файл из библиотеки React Core, например react.min.js. Версия для разработки с предупреждениями и сообщениями об ошибках не минифицирована (например, react.development.js), как в этом примере.
Включая библиотеки в файл HTML, вы получаете доступ к глобальным объектам React и ReactDOM: window.React и window.ReactDOM. Вам понадобятся два метода этих объектов: для создания элемента (React) и для рендера его в контейнере <div> (ReactDOM), как показано в листинге 1.2. Чтобы создать элемент React, достаточно вызвать React.createElement(elementName,data,children) с тремя аргументами:
• elementName — тег HTML в виде строки (например, 'h1') или класс нестандартного компонента в виде объекта. Нестандартные компоненты в книге еще не рассматривались, мы начнем создавать их в главе 2.
• data — данные в форме атрибутов и свойств элемента. Пока свойства не нужны, поэтому в этом аргументе передается null. Мы вернемся к использованию свойств в главе 2.
• children — дочерние элементы или внутренний контент HTML/text (например, Helloworld!!!).
Листинг 1.2. Создание и прорисовка элемента h1
Код в листинге 1.2 заключается в тег <script> в файле HTML, созданном ранее, вместо многоточия, которое изначально было помещено в этот тег в качестве заполнителя. В этом листинге программа получает элемент React и сохраняет ссылку на этот объект в переменной reactElement. Переменная reactElement не содержит реальный узел DOM, это экземпляр компонента React h1 (элемент). Ему можно присвоить любое имя, например helloWorldHeading. Иначе говоря, React предоставляет абстракцию над DOM.
После того как элемент будет создан и сохранен в переменной, создается контейнер приложения React (с именем root) на основе элемента DOM при помощи метода ReactDOM.createRoot(). Наконец, элемент React рендерится в корне при помощи метода root.render(), как показано в листинге 1.2.
При желании все эти этапы можно объединить в один вызов. Результат будет тем же, но в этом случае не используются три лишние переменные, как показано в листинге 1.3.
Листинг 1.3. Реализация с одной командой
ReactDOM
.createRoot(document.getElementById('root'))
.render(React.createElement('h1', null, 'Hello world!'));
Мы будем использовать развернутую форму из листинга 1.2, и полный файл HTML должен выглядеть, как показано в листинге 1.4.
Листинг 1.4. Создание и рендеринг элемента h1
<!DOCTYPE html>
<html>
<head>
<title>My First React Application</title>
<script src="//unpkg.com/react@18/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom@18/umd/react-
➥ dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
Когда файл HTML будет готов, необходимо отправить контент в браузер, чтобы увидеть его работу.
1.4.3. Установка и запуск веб-сервера
На следующем шаге страница HTML передается браузеру. Что для этого понадобится? Нельзя ли просто открыть файл HTML в браузере? Из-за ограничений использования разных источников открыть в браузере файл, находящийся на жестком диске, чтобы он мог обращаться к контенту в других доменах (например, библиотекам React, загруженным из https://unpkg.com), не получится. Браузеры просто не позволяют это сделать. Вы можете попытаться открыть файл в браузере двойным щелчком, но откроется пустая страница.
В связи с этим контент придется отправлять при помощи локального веб-сервера разработки. Звучит страшно, но в наши дни это на удивление простая операция.
Если вы настроили узел так, как рекомендовалось во введении, этого будет достаточно для продолжения работы. Просто введите следующую команду в папке, в которой сохранен файл index.html:
$ npx serve
Вот и все. Возможно, вам будет предложено установить пакет (если вы еще этого не делали, просто подтвердите установку нажатием Enter), но через несколько секунд программа сообщит, что все готово и веб-сервер работает.
ЛОКАЛЬНЫЙ ВЕБ-СЕРВЕР РАЗРАБОТКИ
К сожалению, в самом первом примере вам придется настроить собственный локальный веб-сервер. Хотя эта задача очень проста, необходимость решать ее сейчас немного раздражает.
Если по какой-то причине приведенная команда не работает, можно использовать один из других способов настройки локального веб-сервера из текущей папки.
Если у вас установлен Node, попробуйте использовать следующую команду:
$ npx http-server -p 3000
Или, если на компьютере имеется Python 2, введите следующую команду:
$ python -m SimpleHTTPServer 3000
А если у вас установлен Python 3, команда будет выглядеть так (возможно, придется ввести python3 вместо python — это зависит от конфигурации):
$ python -m http.server 3000
Наконец, если у вас имеется локальная рабочая конфигурация PHP, попробуйте выполнить следующую команду:
$ php -S localhost:3000
Каждая из этих команд запускает на компьютере локальный веб-сервер в той папке, в которой была выполнена команда. В результате файл HTML будет доступен по адресу http://localhost:3000.
1.4.4. Переход на локальный веб-сайт
Когда веб-сервер заработает, вы сможете перейти в браузере на сайт по следующему адресу:
http://localhost:3000
Теперь вы видите, как работает приложение, и это должно быть похоже на рис. 1.5 в начале этого раздела.
На рис. 1.6 изображена вкладка Elements в инструментах разработчика в браузере с выбранным элементом <h1>. Вы понимаете, что React что-то изменил, потому что в исходном файле HTML в корневом узле не было элемента <h1> — он был пустым.
Поздравляем! Вы только что реализовали свое первое приложение React!
Начиная со следующей главы, мы не будем создавать свои приложения React таким способом. Вместо этого мы будем использовать небольшой инструмент, который быстро сгенерирует и настроит основную структуру приложений React за нас, что намного упростит процесс. Кроме того, это решит проблему доставки контента, чтобы больше не приходилось беспокоиться о веб-серверах.
Рис. 1.6. Анализ веб-приложения Hello World, сгенерированного React
Отдельный файл JavaScript
