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 на вашем компьютере.

Перейдите в папку вашего проекта в и вставьте эти две команды:



Подсказка

Здесь мы используем 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 теги также являются отличным решением!