Question

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

自然，我有一个包含整个应用程序的应用程序组件。我是否可以通过嵌入此组件来嵌入整个应用程序？我担心的是我正在使用的所有模块（例如axios，引导程序）都会损坏。

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

我对如何执行此操作的理解是，引用html页面头中的react javascript源链接，也许还可以引用babel，尽管我不清楚babel是否可以工作。然后，我们可以像往常一样使用renderDom方法。

在页面加载时，我可以运行index.js文件将我的react app组件插入dom吗？如果可行，文件结构，文件更新是否需要解决？

如果我要驶向野外，并且有更好的方法来处理它，我可以征求建议。我只是想看看别人是否有经验，然后再走上一条糟糕的路。

Answer 1

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

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

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

Answer 2

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

如果您已经拥有Flask应用程序，并且试图将React组件或应用程序（即应用程序的基本组件）放置到Flask应用程序中的现有HTML页面上，需要的是Babel ，除非您能够在不使用JSX的情况下编写React组件（因此使用纯Javascript），否则就不需要了。

步骤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）是您想要显示已翻译文件的地方-use。使（outputdirectory）的转译文件出现在您的根目录中。

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

第4步：：确保相关的HTML页面已链接到所需的.CSS文件（它们将以与在已完成的项目中对JSX文件进行处理的方式相同的方式修改已转译的Javascript使用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应用程序的该页面上没有问题。

将完全反应应用程序嵌入到现有网页中

2 个答案: