Введение
Сегодня фронтенд-фреймворки и библиотеки становятся неотъемлемой частью современного стека веб-разработки. React.js — это фронтенд-библиотека, которая постепенно стала основным фреймворком для современной веб-разработки в сообществе JavaScript.
Что такое React.js?
React.js — это библиотека JavaScript с открытым исходным кодом, тщательно разработанная Facebook, призванная упростить сложный процесс создания интерактивных пользовательских интерфейсов. Представьте себе пользовательский интерфейс, созданный с помощью React, как набор компонентов, каждый из которых отвечает за вывод небольшого фрагмента HTML-кода, пригодного для повторного использования.
В React вы разрабатываете свои приложения, создавая повторно используемые компоненты, которые можно представить как независимые блоки Lego. Эти компоненты представляют собой отдельные элементы готового интерфейса, которые в сборе формируют весь пользовательский интерфейс вашего приложения.
Основная роль React в приложении — управление уровнем представления этого приложения, предоставляя наилучшую и наиболее эффективную реализацию рендеринга, во многом похожую на V в шаблоне «Модель-Представление-Контроллер» (MVC). Вместо того, чтобы рассматривать весь пользовательский интерфейс как единое целое, React.js побуждает разработчиков разбивать эти сложные пользовательские интерфейсы на отдельные повторно используемые компоненты, которые формируют строительные блоки всего пользовательского интерфейса. Таким образом, фреймворк ReactJS сочетает в себе скорость и эффективность JavaScript с более эффективным способом управления DOM для ускорения рендеринга веб-страниц и создания динамичных и адаптивных веб-приложений.
Краткая история React.js
В 2011 году Facebook, имея большую базу пользователей, столкнулся со сложной задачей. Компания хотела предоставить пользователям более богатый пользовательский опыт, создав более динамичный и отзывчивый интерфейс, который был бы быстрее и эффективнее.
Джордан Уок, инженер-программист из Facebook, создал React именно для этого. React упростил процесс разработки, предоставив более организованный и структурированный способ создания динамических интерактивных пользовательских интерфейсов с повторно используемыми компонентами.
Новостная лента Facebook стала первой, где он был использован. Благодаря революционному подходу к работе с DOM и пользовательскими интерфейсами, React кардинально изменил подход Facebook к веб-разработке и быстро завоевал популярность в экосистеме JavaScript после выхода в сообщество разработчиков с открытым исходным кодом.
Что делает React.js?
Обычно вы запрашиваете веб-страницу, вводя её URL в адресную строку браузера. Затем браузер отправляет запрос на эту веб-страницу, который затем обрабатывается. Если вы нажимаете на ссылку на этой веб-странице, чтобы перейти на другую страницу сайта, на сервер отправляется новый запрос для получения этой новой страницы.
Этот цикл загрузки между вашим браузером (клиентом) и сервером продолжается при каждой попытке доступа к новой странице или ресурсу на веб-сайте. Этот типичный подход к загрузке веб-сайтов работает хорошо, но представьте себе сайт с очень большим объёмом данных. Перезагрузка всей веб-страницы туда и обратно будет излишней и создаст неприятный пользовательский опыт.
Более того, при изменении данных в традиционном JavaScript-приложении требуется ручная обработка DOM для отражения этих изменений. Необходимо определить, какие данные изменились, и обновить DOM для их отражения, что приводит к перезагрузке страницы.
React использует другой подход, позволяя создавать так называемые одностраничные приложения (SPA). Одностраничное приложение загружает один HTML-документ по первому запросу. Затем оно обновляет нужный раздел, контент или тело веб-страницы с помощью JavaScript.
Этот шаблон известен как клиентская маршрутизация, поскольку клиенту не приходится перезагружать всю веб-страницу каждый раз, когда пользователь делает новый запрос на новую страницу. Вместо этого React разбивает запрос и извлекает только те части, которые необходимо изменить, внося изменения без необходимости перезагрузки всей страницы. Такой подход обеспечивает более высокую производительность и более динамичный пользовательский опыт.
React использует виртуальный DOM, который является копией реального DOM. Виртуальный DOM React немедленно перезагружается, чтобы отразить новые изменения при каждом изменении состояния данных. Затем React сравнивает виртуальный DOM с реальным DOM, чтобы определить, что именно изменилось.
Затем React находит наименее затратный способ применить это обновление к DOM-объекту, не выполняя его рендеринг. В результате компоненты и пользовательские интерфейсы React быстро отражают изменения, поскольку вам не приходится перезагружать всю страницу каждый раз при обновлении.
Как использовать React.js
В отличие от других фреймворков, таких как Angular, React не накладывает строгих правил на соглашения о написании кода или организацию файлов. Это означает, что разработчики и команды могут свободно устанавливать наиболее подходящие для них соглашения и реализовывать React так, как им удобно. Благодаря гибкости React вы можете использовать его столько, сколько вам нужно.
Используя React, вы можете создать кнопку, несколько элементов интерфейса или весь пользовательский интерфейс вашего приложения. Вы можете постепенно внедрять его и интегрировать в существующее приложение, добавляя интерактивности, или, что ещё лучше, использовать его для создания мощных React-приложений с нуля, в зависимости от ваших потребностей.
Интеграция React в существующий веб-сайт
Если вы хотите добавить динамическую интерактивность на свой сайт, React — отличный выбор. Интеграция React позволит вам создавать многоразовые интерактивные компоненты, которые можно разместить в любом месте сайта, например, в боковых панелях или виджетах. Вот простое описание шагов для достижения этой цели.
Шаг 1: Добавьте скрипты CDN в HTML
- Начните с добавления API основной библиотеки React из CDN в индексный файл HTML вашего веб-сайта.
- Затем импортируйте React DOM из CDN. Это необходимо для рендеринга компонентов в объектную модель документа (DOM).
- Затем добавьте Babel из CDN, который транслирует код React для обеспечения совместимости между браузерами. Также не забудьте загрузить файл компонента React.
Первый шаг — добавить два основных скрипта CDN в индексный HTML-файл вашего сайта. Эти скрипты понадобятся вам для загрузки React в ваше приложение через службу CDN.
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src='https://unpkg.com/[email protected]/babel.js'></script>
<script type="text/babel" src="like_widget.js"></script>
Шаг 2: Отметьте место рендеринга на вашем сайте.
Определите место в HTML-коде, где будет отображаться компонент React. Это можно сделать, добавив элемент <div> Это было сделано с помощью уникального идентификатора, на который мы будем ссылаться в нашем коде React.
<!-- ... Your existing HTML markup ... -->
<div id="like_widget_container"></div>
<!-- ... Your existing HTML markup ... -->
Шаг 3: Создание компонента React
- В данном случае создайте компонент React под названием like_widget.js.
- Этот компонент будет иметь простую функцию, которая возвращает оператор JSX, выводящий сообщение “Hello World”.
- Затем с помощью ReactDOM мы визуализируем этот компонент в DOM, используя уникальный идентификатор, который мы ранее установили в нашем HTML.
// Custom React component function that returns a JSX syntax
const ActualWidget = () => Hello World;
// Select the container
const container = document.getElementById("like_widget_container");
// Render the component to the DOM
ReactDOM.render(, container);
Если вы запустите программу, она отобразит “Hello World” в браузере в том самом месте, которое вы отметили на изображении ниже.
Возможно, вы заметили странный синтаксис, называемый JavaScript XML (JSX), возвращаемый функцией ActualWidget. JSX используется с React для лёгкого объединения HTML и JavaScript. Facebook разработал JSX как расширение синтаксиса для JavaScript, чтобы расширить функциональность HTML путём его непосредственного встраивания в код JavaScript. Благодаря JSX нет необходимости разделять HTML и JS-код, поскольку React позволяет писать декларативный HTML непосредственно в код JavaScript.
Создание полноценного React-приложения
Хотя React можно легко внедрить в существующее веб-приложение для создания небольших элементов интерфейса, практичнее использовать React для создания полноценных веб-приложений. Однако React предъявляет серьёзные требования к настройке инструментов, которые зачастую сложно и утомительно настраивать при создании новых React-приложений.
К счастью, вам не нужно изучать эти настройки сборки или настраивать инструменты сборки самостоятельно. Facebook создал инструмент командной строки Node под названием cre-react-app, который поможет вам собрать приложение React. Этот пакет позволяет сделать это сразу из коробки и обеспечивает единую структуру приложений React, которую вы легко узнаете при переходе между проектами React.
Создать новый проект React так же просто, как выполнить следующие команды в терминале:
npx create-react-app my-new-app
cd my-new-app
npm start
Примеры React.js
Фейсбук
Facebook, родоначальник React.js, служит примером мощи этой библиотеки. React упрощает такие функции платформы, как лайки, комментарии и обновления статусов в режиме реального времени, обеспечивая бесперебойный и динамичный пользовательский опыт. Модульная структура React облегчает постоянное развитие интерфейса Facebook и адаптируется к потребностям более 2,8 млрд ежемесячно активных пользователей.
Инстаграм
Instagram Web — это целый холст интерактивных элементов, созданных на основе React.js. Каждое изображение, как в истории, так и в личных сообщениях, подчёркивает способность React быстро обрабатывать сложные пользовательские взаимодействия. Красивый и удобный интерфейс платформы свидетельствует о способности React обеспечивать высокопроизводительное взаимодействие.
Нетфликс
Airbnb демонстрирует, как React.js может преобразовывать сложные данные в интуитивно понятный пользовательский интерфейс. Каждое объявление об объекте недвижимости, интерактивная карта и бронирование в режиме реального времени — это симфония компонентов React, которые гармонично работают, создавая плавный путь пользователя от просмотра до бронирования.
