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

Question

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

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

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

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

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

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

Answer 1

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

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

就是这样。超级简单，谢谢你的帮助！

Answer 2

只是想在这里添加一个快速的附加方法。

如果你已经有一个 Flask 应用程序，并且你正试图将 React 组件或应用程序（即应用程序的基础组件）放到 Flask 应用程序中的现有 HTML 页面上，基本上你唯一要做的就是需要的是 Babel，除非你能够在不使用 JSX（所以在纯 Javascript 中）编写 React 组件，在这种情况下你什么都不需要。

第 1 步：要将 Babel 附加到您的项目，您必须获取 Babel 节点模块，这意味着您的项目将与 NPM 关联，​​仅用于使用 Babel 功能。您可以通过在项目根目录中运行以下命令来执行此操作（必须安装 Node.js）：

npm init -y

npm install babel-cli@6 babel-preset-react-app@3

第 2 步：将 Babel 附加到您的项目后，您必须将现有的 React 组件 .js 文件从 JSX 实际转换为纯 Javascript，如下所示：

npx babel --watch (jsdirectory) --out-dir (outputdirectory) --presets react-app/prod

其中 (jsdirectory) 是使用 JSX 编写的 React 组件文件所在目录的路径，而 (outputdirectory) 是您希望显示已翻译文件的位置——使用。 for (outputdirectory) 让编译后的文件出现在你的根目录中。

第 3 步： 在您的 React 文件的纯 Javascript 版本出现后，确保它们链接到您的 HTML 页面，而不是原始的 JSX 使用文件（替换原始脚本标签的 .js 文件)

第 4 步：确保有问题的 HTML 页面链接到您想要的 .CSS 文件（他们将修改转译后的 Javascript，就像他们在项目中修改 JSX 文件一样使用 Create-React-App 因为类名相同）以及所需的 React 资源：

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

完成这些快速步骤后，您的 React 组件应该不会在 Python-Flask 应用程序的该页面上呈现任何问题。