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

Question

I create React application using npx create-react-app my-app .我使用npx create-react-app my-app创建 React 应用程序。 I want to add this React application to my existing HTML in a specific <div> .我想将此 React 应用程序添加到我现有的 HTML 中的特定<div>中。

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

clientDetails.js // which is basically getting json response from server and display a table. 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);
        }
    );
}

Now I have created a react app using create-react-app and I try to add this clientDetails.js inside src folder and somehow run the react in my existing html page.现在我已经使用 create-react-app 创建了一个反应应用程序，我尝试在 src 文件夹中添加这个 clientDetails.js 并以某种方式在我现有的 html 页面中运行反应。

Is that possible?那可能吗？ If yes, what would be the steps to do?如果是，应该采取哪些步骤？

Is my understanding correct:我的理解是否正确：

in my-app remove the App.js and add clientDetails.js在 my-app 中删除 App.js 并添加 clientDetails.js
now use webpack may be to create a bundle.js and that bundle.js should be added in script tag in my existing html??现在使用 webpack 可能是创建一个 bundle.js 并且该 bundle.js 应该添加到我现有 html 的脚本标记中？

Answer 1

What is your goal?你的目标是什么？ Is there any React code you created?您创建了任何 React 代码吗？ Or do you just hope your existing JavaScript would run somehow faster or better, unchanged but put it into some React wrapper?或者您是否只是希望您现有的 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