Компонент Script позволяет разработчикам определять приоритет загрузки сторонних скриптов, что экономит время и улучшает производительность.
Приоритет загрузки скрипта определяется с помощью пропа strategy , который принимает одно из следующих значений:
beforeInteractive : предназначено для важных скриптов, которые должны быть загружены и выполнены до того, как страница станет интерактивной. К таким скриптам относятся, например, обнаружение ботов и запрос разрешений. Такие скрипты внедряются в первоначальный HTML и запускаются перед остальным JS
afterInteractive : для скриптов, которые могут загружаться и выполняться после того, как страница стала интерактивной. К таким скриптам относятся, например, менеджеры тегов и аналитика. Такие скрипты выполняются на стороне клиента и запускаются после гидратации
lazyOnload : для скриптов, которые могут быть загружены в период простоя. К таким скриптам относятся, например, поддержка чатов и виджеты социальных сетей
Script поддерживает встроенные скрипты со стратегиями afterInteractive и lazyOnload
встроенные скрипты, обернутые в Script , должны иметь атрибут id для их отслеживания и оптимизации
Примеры¶
Компонент Script не должен помещаться внутрь компонента Head или кастомного документа.
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. Например:
divid="like_button_container">div>
Затем назначьте созданному уникальный атрибут id . Это позволит впоследствии найти тег из JavaScript-кода и отобразить React-компоненты внутри него.
Совет
«Контейнер» можно поместить где угодно внутри тега . Вы можете создать любое количество независимых DOM-контейнеров на одной странице. Эти контейнеры принято оставлять пустыми, так как React в любом случае заменяет всё их содержимое.
Первые два тега загружают React. Третий тег загружает код вашего собственного компонента.
Шаг 3: Создаём React-компонент
Создайте файл с именем like_button.js рядом с вашим HTML-файлом.
Возьмите этот стартовый код и вставьте его в созданный ранее файл.
Совет
В данном коде создаётся React-компонент с именем LikeButton . Не беспокойтесь, если что-то кажется вам непонятным — мы подробно разберём принципы разработки на React позже, в нашем практическом руководстве и во введении в основные понятия. Пока же мы просто посмотрим, как это выглядит на экране.
Добавьте ещё 3 строки в конец файла like_button.js , после стартового кода:
Эти три строки кода ищут элемент , который мы добавили в HTML на первом шаге, а затем отображают React-компонент с кнопкой «Нравится» внутри него.
Вот и всё! Вы только что добавили свой первый React-компонент на страницу.
Перейдите к следующим разделам, если хотите узнать о других способах добавить React.
Совет: Повторное использование компонентов
Зачастую, вам может понадобиться отобразить React-компонент в нескольких местах одной и той же HTML-страницы. Вот как можно показать сразу три кнопки «Нравится» с разными данными:
Примечание
Этот способ лучше всего подходит для страниц, содержащих несколько изолированных участков кода, написанных на React. Внутри чистого React-кода проще использовать композицию компонентов.
Совет: Минификация JavaScript для продакшена
Публикуя ваш сайт на продакшен, имейте в виду, что несжатый JavaScript значительно замедляет страницу для ваших пользователей.
Если вы уже минифицируете свои скрипты, то не забудьте подготовить к продакшену сам React. Для этого поменяйте окончания ссылок на React на production.min.js :
Если же вы не настроили минификацию для ваших скриптов, то вот один из вариантов, как это сделать.
Необязательно: Используем React с JSX
В предыдущих примерах мы не выходили за рамки обычных браузерных возможностей. В частности, мы указываем, что React должен выводить на экран, просто вызывая JavaScript-функцию:
const e = React.createElement;// Отобразить с текстом «Нравится»returne('button',onClick:()=>this.setState(liked:true>)>,'Нравится');
Однако, React позволяет использовать специальный синтаксис, называющийся JSX:
// Отобразить с текстом «Нравится»return(buttononClick=()=>this.setState(liked:true>)>>Нравитсяbutton>);
Эти два примера делают одно и то же. Несмотря на то, что JSX является совершенно необязательным, многие разработчики считают его удобным для разработки UI — как с React, так и с другими библиотеками.
Вы можете попробовать JSX в этом онлайн-конвертере.
Быстрый старт с JSX
Чтобы быстро попробовать JSX, добавьте такой -тег на страницу:
Теперь синтаксис 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 не является опечаткой. Это инструмент запуска пакетов, появившийся в 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-теги ничуть не хуже!
Как правильно в react запустить стороний script?
У меня есть необходимость в React приложение добавить чат поддержки сделанный на bitrix — это скрипт, который обычно добавляется в файл index.html. пример скрипта :
В данный момент я реализовал подключение следующим образом: создал компонент со скриптом
Это работает, но я думаю это решение не самое правильное. Если Кто-то может помочь правильно запустить внешний скрипт в реактивных приложениях (react, vue) буду очень признателен. заранее спасибо!!
JSX в деталях
These docs are old and won’t be updated. Go to react.dev for the new React docs.
JSX — синтаксический сахар для функции React.createElement(component, props, . children) . Этот JSX-код:
Вы также можете использовать самозакрывающийся тег, если отсутствуют дочерние элементы. Поэтому код:
divclassName="sidebar"/>
React.createElement('div',className:'sidebar'>)
Если вы хотите проверить, как JSX-код компилируется в JavaScript, попробуйте онлайн-компилятор Babel.
Указание типа React-элемента
Первая часть JSX-тега определяет тип React-элемента.
Типы, написанные с большой буквы, указывают, что JSX-тег ссылается на React-компонент. Эти теги компилируются в прямую ссылку на именованную переменную, поэтому, если вы используете JSX-выражение , то Foo должен быть в области видимости.
React должен находиться в области видимости
Поскольку JSX компилируется в вызов React.createElement , библиотека React должна всегда быть в области видимости вашего JSX-кода.
К примеру, в данном коде оба импорта являются необходимыми, даже если на React и CustomButton нет прямых ссылок из JavaScript:
Если вы не используете сборщик JavaScript и загружаете React с помощью тега , то он уже доступен как React в глобальной области видимости.
Использование записи через точку
Вы также можете ссылаться на React-компонент, используя запись через точку. Это удобно, если у вас есть модуль, который экспортирует много React-компонентов. К примеру, если MyComponents.DatePicker является компонентом, то вы можете обратиться к нему напрямую, используя запись через точку:
import React from'react';const MyComponents =DatePicker:functionDatePicker(props)returndiv>Представьте, что здесь цветprops.color>виджета выбора даты.div>;>>functionBlueDatePicker()returnMyComponents.DatePickercolor="blue"/>;>
Названия типов пользовательских компонентов должны начинаться с большой буквы
Если название типа элемента начинается с маленькой буквы, он ссылается на встроенный компонент, к примеру или , что в результате приведёт к тому, что в React.createElement будет передана строка ‘div’ или ‘span’ . Типы, начинающиеся с заглавной буквы, такие как , компилируются в React.createElement(Foo) и соответствуют компоненту, который был объявлен или импортирован в вашем JavaScript-файле.
Мы рекомендуем называть компоненты с заглавной буквы. Если у вас есть компонент, название которого начинается с маленькой буквы, то перед тем как использовать его в JSX, присвойте его в переменную, которая имеет название с заглавной буквы.
К примеру, этот код будет работать не так, как ожидается:
import React from'react';// Неправильно! Это компонент и он должен быть записан с заглавной буквы:functionhello(props)// Правильно! Использование разрешено, так как это валидный HTML-тег:returndiv>Привет,props.toWhat>div>;>functionHelloWorld()// Неправильно! React думает, что - это HTML-тег,// потому что он записан с маленькой буквы:returnhellotoWhat="Мир"/>;>
Для того, чтобы исправить это, мы переименуем hello в Hello и станем использовать , когда будем ссылаться на него:
import React from'react';// Правильно! Это компонент и он должен быть записан с заглавной буквы:functionHello(props)// Правильно! Использование разрешено, так как это валидный HTML-тег:returndiv>Привет,props.toWhat>div>;>functionHelloWorld()// Правильно! React знает, что это компонент,// потому что он написан с заглавной буквы.returnHellotoWhat="Мир"/>;>
Выбор типа во время исполнения
В качестве типа React-элемента нельзя использовать выражение. Если вы хотите использовать выражение, чтобы указать тип элемента, присвойте его в переменную, начинающуюся с заглавной буквы. Это подходит для рендера компонентов в зависимости от ваших пропсов:
import React from'react';import PhotoStory, VideoStory >from'./stories';const components =photo: PhotoStory,video: VideoStory >;functionStory(props)// Неправильно! JSX-тип не может являться выражениемreturncomponents[props.storyType] story=props.story>/>;>
Чтобы исправить это, мы присвоим тип в переменную, начинающуюся с заглавной буквы:
Существует несколько разных способов передачи пропсов в JSX.
JavaScript-выражения как пропсы
Вы можете передавать любые JavaScript-выражения как пропсы, обернув их в <> . К примеру, в этом JSX:
MyComponentfoo=1+2+3+4>/>
Для MyComponent значение props.foo будет равно 10 , потому что выражение 1 + 2 + 3 + 4 будет вычислено.
Оператор if и цикл for не являются выражениями в JavaScript, поэтому их нельзя непосредственно использовать в JSX. Вместо этого, вы можете окружить ими JSX-код. К примеру:
Когда вы передаёте строковый литерал, все его возможные символы будут преобразованы в соответствующие HTML-сущности. Поэтому эти два JSX-выражения будут эквивалентны:
MyComponentmessage="<3"/>MyComponentmessage='>/>
Обычно такое поведение не должно вас волновать. Оно упомянуто для полноты картины.
Установка пропсов по умолчанию в «true»
Если вы не передаёте значение в проп, то по умолчанию оно будет true . Эти два JSX выражения эквивалентны:
В основном, мы не рекомендуем не передавать значение для пропа, потому что это может быть воспринято как сокращение имён свойств из ES6. Тогда, например, это короткая запись , но никак не . Такое поведение существует для того, чтобы соответствовать поведению HTML.
Если у вас уже есть пропсы внутри объекта props и вы хотите передать их в JSX, вы можете использовать оператор расширения . , чтобы передать весь объект с пропсами. Эти два компонента эквивалентны:
В приведённом выше примере, проп kind используется безопасно и не передаётся в элемент , находящийся в DOM. Все остальные пропсы передаются с помощью объекта . other , что делает этот компонент очень гибким. Вы можете видеть, что он передаёт пропсы onClick и children .
Атрибуты расширения могут быть полезны, однако, также они позволяют передать ненужные пропсы в компоненты или невалидные HTML-атрибуты в DOM. Мы рекомендуем использовать этот синтаксис с осторожностью.
Дочерние компоненты в JSX
В JSX-выражениях содержимое, которое расположено между открывающими и закрывающими тегами, передаётся с помощью специального пропа: props.children . Существует несколько способов передать дочерние компоненты:
Если вы поместите строку между открывающим и закрывающим тегом, то props.children будет равно этой строке. Это полезно при создании встроенных HTML-элементов. К примеру:
MyComponent>Привет, мир!MyComponent>
Это корректный JSX-код, в котором значение props.children в MyComponent будет строкой «Привет, мир!» . HTML не экранируется, поэтому JSX можно писать так же, как HTML:
div>Это одновременно и валидный HTML и JSX.div>
JSX удаляет пустые строки и пробелы в начале и конце строки. Новые строки, примыкающие к тегу будут удалены. Новые строки между строковых литералов сжимаются в один пробел. Следующие три примера кода рендерят одинаковый результат:
Вы можете смешивать различные типы потомков, скажем, использовать строковый литерал вместе с JSX-элементами. Вот ещё один пример, в котором JSX похож на HTML, причём данный код является валидным и для JSX, и для HTML:
div> Ниже представлен список: ul>li>Элемент 1li>li>Элемент 2li>ul>div>
Также React-компонент может возвращать массив элементов:
render()// Не нужно оборачивать список элементов в дополнительный элемент!return[// Не забудьте про ключи :)likey="A">Первый элементli>,likey="B">Второй элементli>,likey="C">Третий элементli>,];>
JavaScript-выражения как дочерние компоненты
Вы можете передать любое JavaScript-выражение как дочерний компонент, обернув его в <> . К примеру, эти выражения эквивалентны:
Часто это бывает полезно при рендере списка JSX-выражений произвольной длины. Например, эта запись рендерит HTML-список:
functionItem(props)returnli>props.message>li>;>functionTodoList()const todos =['закончить документацию','отправить пулреквест','снова напомнить Дэну про ревью'];return(ul>todos.map((message)=>Itemkey=message>message=message>/>)>ul>);>
JavaScript-выражения могут быть использованы вместе с другими типами дочерних компонентов. Они могут рассматриваться как альтернатива шаблонным строкам:
Обычно JavaScript-выражения, вставленные в JSX, будут приведены к строке, React-элементу или списку из всего этого. Тем не менее, props.children работает так же, как и любой другой проп, поэтому в него можно передавать любые типы данных, а не только те, которые React знает как рендерить. К примеру, если у вас есть пользовательский компонент, можно было бы передать колбэк в props.children :
// Вызывает колбэк numTimes раз для создания повторяющего компонентаfunctionRepeat(props)let items =[];for(let i =0; i props.numTimes; i++) items.push(props.children(i));>returndiv>items>div>;>functionListOfTenThings()return(RepeatnumTimes=10>>(index)=>divkey=index>>Это элемент списка с ключомindex>div>>Repeat>);>
Дочерние компоненты, передаваемые пользовательскому компоненту, могут быть чем угодно с тем условием, что компонент преобразует их во что-то, что React сможет понять и отрендерить. Следующий пример редко встречается, но им можно воспользоваться, если необходимо расширить возможности JSX.
Логические значения, null и undefined игнорируются
Значения false , null , undefined и true — валидные дочерние компоненты. Просто они не рендерятся. Эти JSX-выражения будут рендерить одно и то же:
Этот подход может быть полезным для рендера по условию. Вот пример, где JSX рендерит , если showHeader равняется true :
div>showHeader &&Header/>>Content/>div>
Есть один нюанс в том, что React будет рендерить «ложные» (falsy) значения, такие как число 0 . Код ниже ведёт себя не так, как вы могли ожидать, так как 0 будет отображён, если массив props.messages пуст: