1.2 Добавить React на веб-сайт
Используйте React в том объеме, в котором вам это необходимо.
React с самого начала был разработан для постепенного внедрения. Вы можете использовать React в том объеме, в котором вам это необходимо. Возможно, вы просто хотите добавить немного интерактивности на существующую страницу, в этом случае компоненты React - отличный способ это осуществить.
Большинство веб-сайтов не являются или не должны быть одностраничными приложениями. С несколькими строками кода и без инструментов для сборки попробуйте использовать React в небольшой части вашего сайта. Затем вы можете либо постепенно расширить его присутствие, либо сохранить в нескольких динамических виджетах.
1.2.1 Добавить React за одну минуту
В данном разделе мы покажем, как добавить компонент React в существующую HTML-страницу. Вы можете использовать как свой собственный веб-сайт, так и создать пустой HTML-файл для практики.
Не будет никаких сложных инструментов или требований к установке - чтобы освоить данный раздел, вам нужно только подключение к Интернету, и минута времени.
По желанию: скачать полный пример (2 КБ сжатый)
1.2.1.1 Шаг 1. Добавьте DOM-контейнер в HTML
Сначала откройте HTML-страницу, которую вы хотите редактировать. Добавьте пустой
тег <div>
, чтобы отметить место, где вы хотите что-либо отобразить с помощью React.
Например:
<!-- ... какой-то HTML ... -->
<div id="like_button_container"></div>
<!-- ... какой-то HTML ... -->
Мы дали данному тегу <div>
уникальный HTML-атрибут id
. Позже это позволит нам найти
его из кода JavaScript и отобразить внутри него компонент React.
Подсказка!
Вы можете поместить контейнер<div>
в любом месте внутри тега
<body>
. На одной странице
может быть любое количество независимых контейнеров DOM. Обычно они пусты - React заменяет
любой существующий контент внутри DOM-контейнеров.
1.2.1.2 Шаг 2. Добавьте теги script
Затем добавьте на страницу HTML три тега <script>
прямо перед
закрывающим тегом </body>
:
<!-- ... какой-то HTML ... -->
<!-- Загрузка React. -->
<!-- Внимание: во время развертывания, замените "development.js" на "production.min.js". -->
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<!-- Загрузка нашего компонента React. -->
<script src="like_button.js"></script>
</body>
Первые два тега загружают React. Третий загрузит код вашего компонента.
1.2.1.3 Шаг 3. Создайте компонент React
Создайте файл с именем like_button.js
рядом с вашей HTML-страницей.
Откройте этот стартовый код и вставьте его в созданный вами файл.
Подсказка!
Данный код определяет компонент React с именемLikeButton
. Не беспокойтесь, если он
вам непонятен - мы расскажем о строительных блоках React позже в нашем
практическом руководстве и основных концепциях. А пока давайте просто
покажем его на экране!
// ... стартовый код, который вы вставили ...
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
Эти две строки кода находят <div>
, который мы добавили в
наш HTML на первом шаге, а затем отображают React-компонент-кнопку «Like», внутри него.
1.2.1.4 Вот и всё!
Четвертого шага нет. Вы только что добавили первый компонент React на свой сайт.
В следующих разделах вы найдете дополнительные советы по интеграции React.
Посмотреть полный пример исходного кода.
Скачать полный пример (2KБ сжатый)
1.2.1.5 Подсказка: используйте компонент повторно
Часто вам может потребоваться отобразить компоненты React в нескольких местах на странице. Здесь представлен пример, который отображает кнопку «Like» три раза и передает ей некоторые данные:
Посмотреть полный пример исходного кода.
Скачать полный пример (2KБ сжатый)
Внимание!
Такая стратегия в основном полезна в тех случаях, когда части страницы, использующие на React, изолированы друг от друга. Однако внутри кода React проще использовать композицию компонентов.1.2.1.6 Подсказка: минимизируйте JavaScript для продакшен
Перед развертыванием вашего веб-сайта на продакшене, имейте в виду, что не минимизированный JavaScript может значительно замедлить страницу.
Если вы уже минимизировали код, ваш сайт будет готов к продакшену, если вы убедитесь, что развернутый HTML загружает версии React, заканчивающиеся на production.min.js:
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js" crossorigin></script>
Если у вас пока нет шага минимизации вашего кода JavaScript, вот один из способов его настройки.
1.2.2 Дополнительно: попробовать React с JSX
В приведенных выше примерах мы использовали только те функции, которые изначально поддерживаются браузерами. Вот почему мы использовали вызов функции JavaScript для сообщения библиотеке React, что именно необходимо отображать:
const e = React.createElement;
// Отображение кнопки "Like"
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
Однако React также предлагает вариант использования JSX:
// Отображение кнопки "Like"
return (
<button onClick={() => this.setState({ liked: true })}>
Like
</button>
);
Эти два фрагмента кода эквивалентны. Хотя JSX не является обязательным, многие считают его полезным для написания кода UI - как с React, так и с другими библиотеками.
Вы можете поиграть с JSX, используя данный онлайн-конвертер.
1.2.2.1 Быстро попробовать JSX
Самый быстрый способ попробовать JSX в вашем проекте - добавить на страницу этот
тег <script>
:
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
Теперь вы можете использовать JSX в любом теге <script>
, добавив к нему
атрибут type="text/babel"
. Вот пример HTML-файла
с JSX, который вы можете скачать и поиграться.
Такой подход хорош для изучения и создания простых демонстраций. Тем не менее,
он делает ваш сайт медленным и не подходит для продакшен. Когда вы будете готовы
двигаться дальше, удалите этот новый тег <script>
и добавленные вами
атрибуты type="text/babel"
. Вместо этого в следующем разделе вы настроите
препроцессор JSX для автоматического преобразования всех ваших тегов <script>
.
1.2.2.2 Добавить JSX в проект
Для добавления JSX в проект не требуются сложные инструменты, такие как сборщик или сервер разработки. По сути, добавление JSX очень похоже на добавление препроцессора CSS. Единственное требование - наличие Node.js на вашем компьютере.
Перейдите в папку вашего проекта в и вставьте эти две команды:
Шаг 1: выполните
npm init -y
(если не сработает, здесь исправление)Шаг 2: выполните
npm install [email protected] [email protected]
Подсказка
Здесь мы используемnpm
только для установки препроцессора JSX, ни
для чего больше. И React, и код приложения могут оставаться в виде
тегов <script>
без изменений.
Поздравляем! Вы только что добавили в свой проект готовую к продакшену настройку JSX.
1.2.2.3 Запустить JSX препроцессор
Создайте папку с названием src
и выполните следующую команду терминала:
npx babel --watch src --out-dir . --presets react-app/prod
Внимание!
npx
- это не опечатка - это инструмент для запуска пакетов,
который поставляется с npm 5.2+.
Если вы видите сообщение об ошибке «You have mistakenly installed the babel package», возможно, вы пропустили предыдущий шаг. Выполните его в той же папке, а затем повторите попытку.
Не ожидайте её завершения - эта команда запускает автоматический наблюдатель для JSX.
Если теперь вы создадите файл с названием src/like_button.js
с этим стартовым кодом JSX,
наблюдатель создаст предварительно обработанный like_button.js
с нативным кодом JavaScript,
понимаемым браузером. Когда вы редактируете исходный файл с JSX, преобразование
будет перезапущено автоматически.
В качестве бонуса это преобразование также позволяет вам использовать современные функции синтаксиса JavaScript, такие как классы, не беспокоясь о поломке старых браузеров. Инструмент, который мы только что использовали, называется Babel, и вы можете узнать о нем больше из документации.
Если вы почувствовали, что хорошо ознакомились с инструментами сборки и хотите получить от них больше,
в следующем разделе описаны некоторые из самых популярных и доступных наборов инструментов.
Если нет - представленные script
теги также являются отличным решением!