1.2 Добавить React на веб-сайт

Используйте React в том объеме, в котором вам это необходимо.

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

Большинство веб-сайтов не являются или не должны быть одностраничными приложениями. С несколькими строками кода и без инструментов для сборки попробуйте использовать React в небольшой части вашего сайта. Затем вы можете либо постепенно расширить его присутствие, либо сохранить в нескольких динамических виджетах.

• 1.2.1 Добавить React за одну минуту

• 1.2.2 Дополнительно: попробовать React с JSX (сборщик необязателен!)

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.

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-страницей.

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

    
  // ... стартовый код, который вы вставили ...
  
  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Б сжатый)

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

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

• Шаг 1: выполните npm init -y (если не сработает, здесь исправление)

• Шаг 2: выполните npm install [email protected] [email protected]

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

1.2.2.3 Запустить JSX препроцессор

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

    
  npx babel --watch src --out-dir . --presets react-app/prod
    

Не ожидайте её завершения - эта команда запускает автоматический наблюдатель для JSX.

Если теперь вы создадите файл с названием src/like_button.js с этим стартовым кодом JSX, наблюдатель создаст предварительно обработанный like_button.js с нативным кодом JavaScript, понимаемым браузером. Когда вы редактируете исходный файл с JSX, преобразование будет перезапущено автоматически.

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

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