Как добавить script в react

Добавляем React на сайт

These docs are old and won’t be updated. Go to react.dev for the new React docs.

See Add React to an Existing Project for the recommended ways to add React.

Используйте React в том объёме, в котором вам хочется.

Для внедрения React не надо ничего переписывать. Его можно использовать как для маленькой кнопки, так и для целого приложения. Возможно, вы захотите немного «оживить» вашу страницу. React-компоненты подходят для этого как нельзя лучше.

Большинство сайтов в Интернете является обычными HTML-страницами. Даже если ваш сайт не относится к одностраничным приложениям, вы можете добавить на него React, написав всего несколько строк кода без каких-либо инструментов сборки. В зависимости от целей, можно постепенно перенести на React весь сайт или переписать всего несколько виджетов.

Добавляем React за одну минуту
Необязательно: Используем React с JSX (без каких-либо бандлеров!)

Добавляем React за одну минуту

В этом разделе вы научитесь добавлять React на существующую HTML-страницу. Вы можете практиковаться на своём собственном сайте или создать для этого пустой HTML-файл.

Мы не будем пользоваться сложными инструментами сборки или что-то устанавливать. Всё, что вам нужно — это доступ к Интернету и минута свободного времени.

Шаг 1: Добавляем DOM-контейнер в HTML

Для начала, откройте HTML-файл страницы, которую хотите отредактировать. Добавьте пустой тег в месте, где вы хотите отобразить что-нибудь с помощью React. Например:

 div id="like_button_container">div>

Затем назначьте созданному уникальный атрибут id . Это позволит впоследствии найти тег из JavaScript-кода и отобразить React-компоненты внутри него.

Совет

«Контейнер» можно поместить где угодно внутри тега . Вы можете создать любое количество независимых DOM-контейнеров на одной странице. Эти контейнеры принято оставлять пустыми, так как React в любом случае заменяет всё их содержимое.

Шаг 2: Добавляем script-теги

Теперь добавьте три -тега перед закрывающим тегом :

     script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin> script> script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin> script>  script src="like_button.js"> script> body>

Первые два тега загружают React. Третий тег загружает код вашего собственного компонента.

Шаг 3: Создаём React-компонент

Создайте файл с именем like_button.js рядом с вашим HTML-файлом.

Возьмите этот стартовый код и вставьте его в созданный ранее файл.

Совет

В данном коде создаётся React-компонент с именем LikeButton . Не беспокойтесь, если что-то кажется вам непонятным — мы подробно разберём принципы разработки на React позже, в нашем практическом руководстве и во введении в основные понятия. Пока же мы просто посмотрим, как это выглядит на экране.

Добавьте ещё 3 строки в конец файла like_button.js , после стартового кода:

// . стартовый код . const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

Эти три строки кода ищут элемент , который мы добавили в HTML на первом шаге, а затем отображают React-компонент с кнопкой «Нравится» внутри него.

Вот и всё! Вы только что добавили свой первый React-компонент на страницу.

Перейдите к следующим разделам, если хотите узнать о других способах добавить React.

Совет: Повторное использование компонентов

Зачастую, вам может понадобиться отобразить React-компонент в нескольких местах одной и той же HTML-страницы. Вот как можно показать сразу три кнопки «Нравится» с разными данными:

Примечание

Этот способ лучше всего подходит для страниц, содержащих несколько изолированных участков кода, написанных на React. Внутри чистого React-кода проще использовать композицию компонентов.

Совет: Минификация JavaScript для продакшена

Публикуя ваш сайт на продакшен, имейте в виду, что несжатый JavaScript значительно замедляет страницу для ваших пользователей.

Если вы уже минифицируете свои скрипты, то не забудьте подготовить к продакшену сам React. Для этого поменяйте окончания ссылок на React на production.min.js :

script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin> script> script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin> script>

Если же вы не настроили минификацию для ваших скриптов, то вот один из вариантов, как это сделать.

Необязательно: Используем React с JSX

В предыдущих примерах мы не выходили за рамки обычных браузерных возможностей. В частности, мы указываем, что React должен выводить на экран, просто вызывая JavaScript-функцию:

const e = React.createElement; // Отобразить с текстом «Нравится» return e( 'button',  onClick: () => this.setState( liked: true >) >, 'Нравится' );

Однако, React позволяет использовать специальный синтаксис, называющийся JSX:

// Отобразить с текстом «Нравится» return ( button onClick=() => this.setState( liked: true >)>> Нравится button> );

Эти два примера делают одно и то же. Несмотря на то, что JSX является совершенно необязательным, многие разработчики считают его удобным для разработки UI — как с React, так и с другими библиотеками.

Вы можете попробовать JSX в этом онлайн-конвертере.

Быстрый старт с JSX

Чтобы быстро попробовать JSX, добавьте такой -тег на страницу:

script src="https://unpkg.com/babel-standalone@6/babel.min.js"> script>

Теперь синтаксис JSX доступен внутри каждого -тега, у которого есть атрибут type=»text/babel» . Скачайте пример HTML-кода с JSX, чтобы поэкспериментировать.

Такой подход удобен для обучения или создания быстрых демо, но следует помнить, что работа сайта при этом сильно замедляется. Поэтому для продакшена JSX лучше добавить по-другому. Если вам интересно попробовать, удалите добавленный ранее -тег и все атрибуты type=»text/babel» . Вместо них мы будем пользоваться препроцессором JSX, который автоматически трансформирует весь код внутри -тегов.

Добавляем JSX в проект

JSX можно добавить в существующий проект и без разных сложных инструментов вроде бандлера или сервера для разработки. По сути, добавление JSX напоминает добавление препроцессора CSS. Необходимо лишь убедиться, что на вашем компьютере установлен Node.js.

С помощью терминала перейдите в директорию вашего проекта и запустите следующие команды:

Шаг 1: Запустите команду npm init -y (если появляются ошибки, попробуйте этот способ)
Шаг 2: Запустите команду npm install babel-cli@6 babel-preset-react-app@3

Совет

Мы используем npm только для установки препроцессора JSX. React и код приложения всё ещё остаются в -тегах.

Поздравляем! Вы только что добавили в ваш проект поддержку JSX, готовую к продакшену.

Запускаем препроцессор 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-код. Препроцессор автоматически трансформирует новый код в чистый JavaScript, пригодный для выполнения в браузере, и сохранит его в новый файл like_button.js . При редактировании JSX-кода в существующих файлах трансформация также происходит автоматически.

Кроме препроцессинга JSX, вы в качестве бонуса получаете синтаксические новинки JavaScript, такие как классы, без головной боли с их браузерной поддержкой. Всё это доступно благодаря использованию инструмента под названием Babel, информацию о котором вы можете узнать из его документации.

Если вы неплохо разбираетесь в инструментах сборки и хотите создавать приложения на React с их помощью, обратитесь к следующему разделу, где описаны некоторые из наиболее популярных способов. Если нет — не беспокойтесь, уже знакомые нам script-теги ничуть не хуже!

Компонент Script¶

Компонент Script позволяет разработчикам определять приоритет загрузки сторонних скриптов, что экономит время и улучшает производительность.

Приоритет загрузки скрипта определяется с помощью пропа strategy , который принимает одно из следующих значений:

beforeInteractive : предназначено для важных скриптов, которые должны быть загружены и выполнены до того, как страница станет интерактивной. К таким скриптам относятся, например, обнаружение ботов и запрос разрешений. Такие скрипты внедряются в первоначальный HTML и запускаются перед остальным JS
afterInteractive : для скриптов, которые могут загружаться и выполняться после того, как страница стала интерактивной. К таким скриптам относятся, например, менеджеры тегов и аналитика. Такие скрипты выполняются на стороне клиента и запускаются после гидратации
lazyOnload : для скриптов, которые могут быть загружены в период простоя. К таким скриптам относятся, например, поддержка чатов и виджеты социальных сетей

Script поддерживает встроенные скрипты со стратегиями afterInteractive и lazyOnload

встроенные скрипты, обернутые в Script , должны иметь атрибут id для их отслеживания и оптимизации

Примеры¶

Компонент Script не должен помещаться внутрь компонента Head или кастомного документа.

 1 2 3 4 5 6 7 8 9 10 11 12

import Script from 'next/script'; export default function Home()  return ( <> Script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver" strategy="beforeInteractive" /> /> ); >

 1 2 3 4 5 6 7 8 9 10 11 12

import Script from 'next/script'; export default function Home()  return ( <> Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" /> /> ); >

Выполнение кода после полной загрузки страницы

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import  useState > from 'react'; import Script from 'next/script'; export default function Home()  const [stripe, setStripe] = useState(null); return ( <> Script id="stripe-js" src="https://js.stripe.com/v3/" onLoad= =>  setStripe( stripe: window.Stripe('pk_test_12345'), >); >> /> /> ); >

 1 2 3 4 5 6 7 8 9 10 11 12 13

import Script from 'next/script' Script id="show-banner" strategy="lazyOnload"> `document.getElementById('banner').classList.remove('hidden')`> /Script> // или Script id="show-banner" dangerouslySetInnerHTML= <__html: `document.getElementById('banner').classList.remove('hidden')` >> />

 1 2 3 4 5 6 7 8 9 10 11 12 13 14

import Script from 'next/script'; export default function Home()  return ( <> Script src="https://www.google-analytics.com/analytics.js" id="analytics" nonce="XUENAJFW" data-test="analytics" /> /> ); >

Как правильно в react запустить стороний script?

У меня есть необходимость в React приложение добавить чат поддержки сделанный на bitrix — это скрипт, который обычно добавляется в файл index.html. пример скрипта :

В данный момент я реализовал подключение следующим образом: создал компонент со скриптом

import React, < Component >from 'react' export default class Script extends Component < componentDidMount() < const s = document.createElement('script') // s.type = 'text/javascript' s.async = true s.innerHTML = "document.write('This is output by document.write()!')" s.src = 'https://someurl.js' + '?' + ((Date.now() / 60000) | 0) this.instance.appendChild(s) const h = document.getElementsByTagName('script')[0] h.parentNode.insertBefore(s, h) >render() < return (this.instance = el)> /> > >

и подключил его в корне приложения

import Script from './Script ' const App = () => < return( <>   ) >

Это работает, но я думаю это решение не самое правильное. Если Кто-то может помочь правильно запустить внешний скрипт в реактивных приложениях (react, vue) буду очень признателен. заранее спасибо!!

Как подключить свой JS-скрипт к проекту React?

anudas

Александр, В консоли «Uncaught SyntaxError: Unexpected token ‘ Появляется только, если вставить script в index.html. Причем, если вставлять inline-скрипт, то ошибок нет и скрипт выполняется, а если из файла, то ошибка. Но я не вижу в коде никаких ошибок

anudas

Haaaaz, посмотрите исходный код страницы в браузере и сюда.
Haaaaz @Haaaaz Автор вопроса

Александр, Александр, Браузер не дает открыть index.html. И из проводника он пропал куда-то, хотя в WebStorm показывается. Я вообще не понимаю, что происходит. (файлы скрытые включены)