reactjs - 将完整的 React 应用程序嵌入到现有网页中

Question

我希望将我的 React 应用程序嵌入到现有的纯 html/javascript 网站中。到目前为止，我发现您只能将单个组件嵌入到现有网站中，而不能嵌入整个 React 应用程序。

当然，我有一个包含整个应用程序的应用程序组件。我可以通过嵌入此组件来嵌入完整的应用程序吗？我担心我正在使用的所有模块(例如 axios、bootstrap)都会损坏。

我一直在寻找有关如何执行此操作的好教程，但我没有找到很多尝试将整个应用程序嵌入现有页面的示例。

我对如何做到这一点的理解是引用 html 页面头部中的 React javascript 源链接，也可能是 babel，尽管我不清楚 babel 是否可以工作。然后我们可以像平常一样使用 renderDom 方法。

在页面加载时，我可以运行我的index.js 文件以将我的 React 应用程序组件插入到 dom 中吗？如果这可行，我需要处理文件结构、文件更新方面是否存在任何问题？

如果我开车驶入荒野，并且有更好的方法来处理它，我愿意接受建议。我只是想看看其他人是否有这样做的经验，然后再走上一条糟糕的道路。

Answer 1

我能够通过执行以下操作来嵌入我的完整 react 应用程序...

1. 我使用 npm run build 构建了我的 React 应用程序生产文件
2. 我将这些文件复制到现有 Web 项目的根级别
3. 然后，我打开从 npm run build 生成的 index.html 文件，并将 head 和 body 部分中的脚本复制到我想要放入应用程序中的页面
4. 最后，我添加了一个带有 id root 的 div(这就是我的 renderDOM 方法正在寻找的内容)，我希望我的应用程序出现在现有网页上。

就是这样。 super 简单，感谢您的帮助!