如何在现有的 html 页面上添加 React Js

Question

我使用npx create-react-app my-app创建 React 应用程序。 我想将此 React 应用程序添加到我现有的 HTML 中的特定<div>中。

HTML：

<!DOCTYPE html>
<html>
<head>
  <title>Client</title>
  
</head>
<body onload="QueryDetails()">
  <div align="center">
    <label for="clientList">Client List</label>
    <div id="clientDetails" />                          //loading the table here 
                                                         and it should be react 
  </div>
</body>
</html>
<script src="../../../../../clientDetails.js"></script>  //added the script whch has func to displaytable

clientDetails.js // 这基本上是从服务器获取 json 响应并显示一个表格。

function QueryDetails() {
  get(url + "clientDetails?", "clientDetails",

        function () {
            var clientDetails  = JSON.parse(this.responseText);

            var table = createTable(["Name", "Date of Birth", "Gender", "ID"]);
            table.align = "center";

            // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var i = 0; i < clientDetails.length; ++i) {
              var name = clientDetails[Name].Value[0];
              var id = clientDetails[Id].Value[0];
              var nameCell = tr.insertCell(-1);
              nameCell.innerHTML = name;
              var idCell = tr.insertCell(-1);
              idCell.innerHTML = name;
            }

            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("clientDetails");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
        }
    );
}

现在我已经使用 create-react-app 创建了一个反应应用程序，我尝试在 src 文件夹中添加这个 clientDetails.js 并以某种方式在我现有的 html 页面中运行反应。

那可能吗？ 如果是，应该采取哪些步骤？

我的理解是否正确：

在 my-app 中删除 App.js 并添加 clientDetails.js
现在使用 webpack 可能是创建一个 bundle.js 并且该 bundle.js 应该添加到我现有 html 的脚本标记中？

Answer 1

你的目标是什么？ 您创建了任何 React 代码吗？ 或者您是否只是希望您现有的 JavaScript 能够以某种方式更快或更好地运行，保持不变，但将其放入一些 React 包装器中？

如何在现有的 html 页面上添加 React Js

问题描述

1 个解决方案

解决方案1
0 2021-05-20 15:37:49

如何在现有的 html 页面上添加 React Js

问题描述

1 个解决方案

解决方案1 0 2021-05-20 15:37:49

解决方案1
0 2021-05-20 15:37:49