Включение React в HTML-файл с помощью тега Script: пошаговое руководство

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

  1. Во-первых, убедитесь, что у вас есть файлы библиотеки React. Вы можете загрузить их и разместить локально или включить из сети доставки контента (CDN). Вот пример использования подхода CDN:

    <!-- Add this script tag in the <head> section of your HTML file -->
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>

<!-- Add this script tag after the React library script -->
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

  2. После подключения библиотеки React вы можете написать свой код React в отдельном файле JavaScript. Например, предположим, что у вас есть файл с именем app.js

    // app.js
ReactDOM.render(
 <h1>Hello, React!</h1>,
 document.getElementById('root')
);

    .

  3. Создайте HTML-файл для визуализации вашего компонента React. В этом примере назовем его index.html. Добавьте следующий код:

    <!-- index.html -->
<!DOCTYPE html>
<html>
 <head>
   <title>React App</title>
 </head>
 <body>
   <div id="root"></div>
   <script src="app.js"></script>
 </body>
</html>

    В этом коде компонент React будет отображаться внутри элемента

    .

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