将 React 应用程序构建添加到我现有的网站 div答案

【问题标题】：Add React app build to my existing website div将 React 应用程序构建添加到我现有的网站 div
【发布时间】：2021-02-18 16:59:56
【问题描述】：

是否可以将 React 应用的构建 index.html 添加到我的 HTML/ColdFusion 网站的 div 中？

我使用钩子在 React 中构建了一个聊天机器人。 Bellow 是我的 App.js，它导入了我的 ChatBot.js 组件。

import './App.css';
import MyChatBot from './ChatBot';

function App() {
  return (
    <div className="App">
      <MyChatBot/>
    </div>
  );
}

export default App;

它正在工作。我有一个 ColdFusion/HTML 网站，我想在其中包含这个“聊天机器人”或从 npm run build 生成的 index.html 到 div

<!-- ColdFusion Website here --->
<div id="myChatBot"></div>

我们的想法是在该 div 中包含 React 应用程序。有可能吗？

谢谢。

【问题讨论】：

标签： reactjs coldfusion

【解决方案1】：

是的，你可以。您只需将元素（要安装反应应用程序的位置）传递给ReactDOM.render 方法。然后使用捆绑器（例如 webpack）捆绑您的 React 应用程序，并通过脚本标签或通过当前构建过程将该捆绑包包含在您的应用程序的 html 中。

HTML

<!-- Website Markup --->
<div id="myChatBot"></div>

<!-- Include React bundle --->
<script src="bundle.js"></script>

反应

import ReactDOM from "react"
import App from "./App"

ReactDOM.render(<App/>, document.getElementById("myChatBot"))

【讨论】：

你有我如何创建bundle.js的例子吗？
您可以使用 webpack - webpack.js.org 或 parcel。如果您使用的是 create-react-app，它已经有进程设置 - create-react-app.dev/docs/production-build
是的，我使用了create-react-app，并且我已经使用npm run build 构建了我的应用程序。它生成 index.html（不是 bundle.js 文件）。
对不起，我是新手。 build/static/js/main.c3b68fb6.chunk.js 是 bundle.js 文件吗？另外，我应该在我的 App.js 中添加 ReactDOM.render(<App/>, document.getElementById("myChatBot")) 而不是 export default App;？
如果您使用的是 CRA，那么您可能需要调整流程。你可以在这里阅读stackoverflow.com/questions/59331493/…

【解决方案2】：

希望对您有所帮助：https://reactjs.org/docs/add-react-to-a-website.html

要点是您已导入 React 脚本并将其渲染到该 ID：

const domContainer = document.getElementById('myChatBot');
ReactDOM.render(e(LikeButton), domContainer);

【讨论】：

这个例子对我不起作用，因为我在我的 react 应用程序中导入了外部模块
reactjs.org/docs/… 不编译库代码吗？