我希望将我的React应用程序嵌入到现有的纯html / javascript网站中。到目前为止，我发现您只能将单个组件嵌入现有网站，而不能将整个React应用程序嵌入。
自然，我有一个包含整个应用程序的应用程序组件。我是否可以通过嵌入此组件来嵌入整个应用程序？我担心的是我正在使用的所有模块（例如axios，引导程序）都会损坏。
我一直在寻找有关如何执行此操作的很好的教程，但我没有找到许多尝试将整个应用程序嵌入到现有页面中的示例。
我对如何执行此操作的理解是，引用html页面头中的react javascript源链接，也许还可以引用babel，尽管我不清楚babel是否可以工作。然后，我们可以像往常一样使用renderDom方法。
在页面加载时，我可以运行index.js文件将我的react app组件插入dom吗？如果可行，文件结构，文件更新是否需要解决？
如果我要驶向野外，并且有更好的方法来处理它，我可以征求建议。我只是想看看别人是否有经验，然后再走上一条糟糕的路。
答案 0 :(得分：3)
通过执行以下操作，我可以嵌入完整的React应用程序...
就是这样。超级简单，谢谢您的帮助！
答案 1 :(得分：1)
只想在这里添加一种快速的附加方法。
如果您已经拥有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应用程序的该页面上没有问题。