Перейти к содержанию

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

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

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

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

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

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

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

Необязательно: скачать готовый пример (архив 2 Кбайт)

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

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

1
2
3
<!-- ... остальной HTML ... -->
<div id="like_button_container"></div>
<!-- ... остальной HTML ... -->

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

Совет

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
  <!-- ... остальной HTML ... -->

  <!-- Загрузим React. -->
  <!-- Примечание: для деплоя на продакшен замените окончание «development.js» на «production.min.js». -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <!-- Загрузим наш React-компонент. -->
  <script src="like_button.js"></script>

</body>

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

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

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

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

Совет

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

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

1
2
3
4
5
6
// ... стартовый код ...

const domContainer = document.querySelector(
  '#like_button_container'
)
ReactDOM.render(e(LikeButton), domContainer)

Этот код ищет контейнер <div>, который мы добавили на первом шаге, а затем отображает наш React-компонент с кнопкой "Нравится" внутри него.

Готово!

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

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

Посмотреть финальный код примера

Скачать код примера (архив 2 Кбайт)

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

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

Посмотреть исходный код примера

Скачать код примера (архив 2 Кбайт)

Примечание

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

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
const e = React.createElement

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

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

1
2
3
4
5
6
// Отобразить <button> с текстом «Нравится»
return (
  <button onClick={() => this.setState({ liked: true })}>
    Нравится
  </button>
)

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

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

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

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

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

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

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

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

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

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

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

Совет

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

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

Запускаем препроцессор JSX

Создайте директорию с названием src и наберите в терминале следующую команду:

1
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-теги ничуть не хуже!

Комментарии