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

标签 reactjs

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

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

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

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

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

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

最佳答案

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

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

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

关于reactjs - 将完整的 React 应用程序嵌入到现有网页中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53855894/

相关文章:

javascript - (MERN) 使用 Express.js 提供 React 应用程序的正确方法是什么?

javascript - 根据 ESLint,Switch 语句默认返回 "Unreachable"

node.js - 更新到 webpack 5 后出现运行时错误。TypeError : Cannot read properties of undefined (reading 'default' )

reactjs - 如何在 React 中将函数作为 props 传递?

reactjs - 不匹配时响应路由器 v4 重定向

javascript - Material UI Select Component - 一个组件正在将文本类型的受控输入更改为不受控制

android - 在cloneWithRows中对 native 传递数组使用react

node.js - 无法让 Docker 容器相互通信

css - 为什么我的样式没有在 React Native 中更新?

reactjs - 身份验证 token 未分配给 axios 中的 header