Javascript 如何在现有html页面上添加React Js_Javascript_Html_Reactjs

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

javascript html reactjs

Javascript 如何在现有html页面上添加React Js,javascript,html,reactjs,Javascript,Html,Reactjs,我使用npx create React app my app创建React应用程序。我想将此React应用程序添加到特定的中的现有HTML中 HTML: <!DOCTYPE html> <html> <head> <title>Client</title> </head> <body onload="QueryDetails()"> <div align="cen

我使用

npx create React app my app

创建React应用程序。我想将此React应用程序添加到特定的

中的现有HTML中

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


客户
客户名单
//把桌子放在这里
它应该是反应
//将脚本whch has func添加到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);
        }
    );
}

函数QueryDetails（）{
获取（url+“clientDetails？”，“clientDetails”，
函数（）{
var clientDetails=JSON.parse（this.responseText）；
var table=createTable（[“姓名”、“出生日期”、“性别”、“ID]”）；
table.align=“中心”；
//将JSON数据作为行添加到表中。
对于（变量i=0；i


现在，我已经使用create-react-app创建了一个react应用程序，我尝试将这个clientDetails.js添加到src文件夹中，并以某种方式在我现有的html页面中运行react
可能吗？如果是，应采取哪些步骤
我的理解是否正确：
在我的应用程序中，删除app.js并添加clientDetails.js
现在使用webpack可以创建一个bundle.js，该bundle.js应该添加到我现有html中的脚本标记中
你的目标是什么？您是否创建了任何React代码？或者您只是希望您现有的JavaScript运行得更快或更好，不做任何更改，但将其放入一些React包装器中