如何在現有的 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