Добавление React на сайт
Используйте столько React, сколько вам нужно.
React с самого начала был разработан для постепенной интеграции, и вы можете использовать столько React, сколько вам нужно. Возможно, вы хотите добавить немного «взаимодействия» на существующую страницу. Компоненты React отлично подходят для этого.
Большинство веб-сайтов не являются и не должны быть приложениями с одной страницей. С помощью нескольких строк кода и без инструментов сборки попробуйте использовать React на небольшой части вашего сайта. Затем вы можете постепенно расширить его присутствие или оставить его ограниченным несколькими динамическими виджетами.
- Добавить React за одну минуту
- Необязательно: Попробуйте React с JSX (без необходимости использования бандлера!)
Добавить React за одну минуту
В этом разделе мы покажем, как добавить компонент React на существующую страницу HTML. Вы можете следовать инструкциям, используя свой собственный сайт или создав пустой HTML-файл для практики.
Вам не понадобятся сложные инструменты или требования к установке — для выполнения этого раздела вам потребуется только подключение к Интернету и минута вашего времени.
Необязательно: Скачать полный пример (2 КБ в архиве)
Шаг 1: Добавление контейнера DOM в HTML
Сначала откройте страницу HTML, которую вы хотите отредактировать. Добавьте пустой <div> тег, чтобы отметить место, где вы хотите отобразить что-то с помощью React. Например:
<!-- ... existing HTML ... --> <div id="like_button_container"></div> <!-- ... existing HTML ... -->
Мы присвоили этому <div> уникальный id атрибут HTML. Это позволит нам найти его в коде JavaScript позже и отобразить внутри него компонент React.
Совет
Вы можете разместить «контейнер»
<div>так, как любом месте внутри<body>тега. На одной странице вы можете иметь столько независимых контейнеров DOM, сколько вам нужно. Обычно они пустые — React заменит любое существующее содержимое внутри контейнеров DOM.
Шаг 2: Добавление тегов скрипта
Далее добавьте три <script> тега в HTML-страницу непосредственно перед закрывающим </body> тегом:
<!-- ... other HTML ... --> <!-- Load React. --> <!-- Note: when deploying, replace "development.js" with "production.min.js". --> <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> <!-- Load our React component. --> <script src="like_button.js"></script> </body>
Первые два тега загружают React. Третий тег загрузит код вашего компонента.
Шаг 3: Создание компонента React
Создайте файл с именем like_button.js рядом с вашей HTML-страницей.
Откройте этот стартовый код и вставьте его в созданный файл.
Совет
Этот код определяет компонент React под названием
LikeButton. Не беспокойтесь, если вы пока не понимаете его — мы рассмотрим строительные блоки React позже в нашем практическом руководстве и руководстве по основным концепциям. Пока давайте просто отобразим его на экране!
После стартового кода добавьте две строки в конец like_button.js.
// ... the starter code you pasted ...
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
Эти две строки кода находят <div> элемент, который мы добавили в наш HTML на первом шаге, и затем отображают наш компонент React «Кнопки лайка» внутри него.
Готово!
Шага четыре нет. Вы только что добавили первый компонент React на свой веб-сайт.
Посмотрите следующие разделы для получения дополнительных советов по интеграции React.
Посмотреть исходный код полного примера
Скачать полный пример (2 КБ в архиве)
Совет: повторное использование компонента
Часто вам может потребоваться отобразить компоненты React в нескольких местах на странице HTML. Вот пример, который отображает «кнопку лайка» трижды и передает ей некоторые данные:
Посмотреть исходный код полного примера
Скачать полный пример (2 КБ в архиве)
Примечание
Эта стратегия в основном полезна, когда React-части страницы изолированы друг от друга. Внутри кода React проще использовать композицию компонентов.
Совет: сжатие JavaScript для производства
Перед развертыванием вашего веб-сайта в производство имейте в виду, что нескомпилированный JavaScript может значительно замедлить страницу для пользователей.
Если вы уже сжимаете скрипты приложения, ваш сайт будет готов к производству, если вы убедитесь, что развернутый HTML загружает версии React, заканчивающиеся на production.min.js:
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
Если у вас нет шага сжатия для скриптов, вот один способ его настроить.
Необязательно: Попробуйте React с JSX
В приведенных выше примерах мы использовали только те функции, которые непосредственно поддерживаются браузерами. Вот почему мы использовали вызов JavaScript-функции, чтобы указать React, что отображать:
const e = React.createElement;
// Display a "Like" <button>
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
); Однако React также предлагает возможность использовать JSX вместо этого:
// Display a "Like" <button>
return (
<button onClick={() => this.setState({ liked: true })}>
Like
</button>
); Эти два фрагмента кода эквивалентны. Хотя JSX — совершенно необязательный элемент, многие люди находят его полезным для написания кода пользовательского интерфейса — как с React, так и с другими библиотеками.
Вы можете поэкспериментировать с JSX, используя этот онлайн-конвертер.
Быстро попробовать JSX
Самый быстрый способ попробовать JSX в вашем проекте — добавить этот <script> тег на вашу страницу:
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Теперь вы можете использовать JSX в любом <script> теге, добавив type="text/babel" атрибут. Вот пример HTML-файла с JSX, который вы можете скачать и использовать.
Этот подход подходит для обучения и создания простых демо-версий. Однако он замедляет ваш сайт и не подходит для производства. Когда вы готовы к дальнейшей работе, удалите новый <script> тег и type="text/babel" атрибуты, которые вы добавили. Вместо этого в следующем разделе вы настройте препроцессор JSX для автоматического преобразования всех ваших <script> тегов.
Добавление JSX в проект
Добавление JSX в проект не требует сложных инструментов, таких как бандлер или сервер разработки. По сути, добавление JSX похоже на добавление препроцессора CSS. Единственное требование — наличие Node.js на вашем компьютере.
Перейдите в папку проекта в терминале и вставьте эти две команды:
-
Шаг 1: Запустите
npm init -y(если это не удастся, вот исправление) -
Шаг 2: Запустите
npm install babel-cli@6 babel-preset-react-app@3
Совет
Здесь мы используем npm только для установки препроцессора JSX; вам он не понадобится ни для чего другого. Как код React, так и код приложения могут оставаться в
<script>тегах без изменений.
Поздравляем! Вы только что добавили готовый к производству JSX-настройку в свой проект.
Запуск препроцессора JSX
Создайте папку с именем src и выполните эту команду в терминале:
npx babel --watch src --out-dir . --presets react-app/prod
Примечание
npx— это не опечатка — это инструмент-запуска пакетов, который поставляется с npm 5.2+.Если вы видите сообщение об ошибке «Вы ошибочно установили пакет
babel», вы, возможно, пропустили предыдущий шаг. Выполните его в той же папке и повторите попытку.
Не ждите завершения — эта команда запускает автоматический отслеживатель JSX.
Если вы теперь создадите файл с именем src/like_button.js с этим стартовым кодом JSX, отслеживатель создаст преобразованный like_button.js файл с обычным JavaScript-кодом, подходящим для браузера. При редактировании исходного файла с JSX преобразование будет выполняться автоматически.
В качестве бонуса это также позволяет использовать современные функции синтаксиса JavaScript, такие как классы, без опасений о проблемах со старыми браузерами. Инструмент, который мы только что использовали, называется Babel, и вы можете узнать больше о нем из документации.
Если вы заметили, что вам комфортно работать с инструментами сборки и вы хотите, чтобы они делали за вас больше, следующий раздел описывает некоторые из самых популярных и удобных инструментальных цепочек. Если нет — эти теги скриптов прекрасно справятся с задачей!
Полезен ли этот сайт?
© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://17.reactjs.org/docs/add-react-to-a-website.html
