如何在现有网站上添加 React Js？

Question

所以reactjs.org有一个很好的教程，介绍如何通过将 react js 代码添加为脚本来将 react js 添加到现有网站。 这对我来说效果很好。 我的疑问是，我们将如何使用从 npm 下载的组件？（例如：react-router、react-bootstrap 等）通常当我们处理完整的 react 项目时，我们只需使用 ZBB30E85411B56DF41296726AB445 安装它们并导入它们但是我们如何安装这些组件或获取它们的脚本文件，就像我们得到反应脚本文件一样？

Answer 1

该过程将类似于 React 站点上描述的过程。 在他们的示例中，他们实现了一个简单的单组件 ( <LikeButton /> ) 应用程序，没有外部依赖项。 要使用外部组件/模块，您需要将它们捆绑到您的应用程序中，或者将它们作为脚本加载。

首选方法

首选方法是使用诸如 webpack、parcel 或类似的打包器将您的代码和模块打包到单个脚本中。

1. 创建app.js文件，使用import加载外部组件

   import React from 'react'; import Button from '@material-ui/core/Button'; const LittleApp = () => ( <Button variant="contained" color="primary"> Hello World </Button> ); ReactDOM.render(<LittleApp />, document.getElementById("littleApp"));

2. 使用 webpack、parcel 或类似工具将app.js捆绑到单个bundled.js文件中

3. 将bundled.js文件加载到您的页面中

替代方法

还可以使用<script>标签中的通用模块定义 (UMD) 文件加载某些组件。 这可能适用于简单的附加应用程序，但在大多数情况下可能不推荐。 我倾向于仅在原型设计想法或在 Stack Overflow 上演示解决方案时使用这些。

像这样的东西：

 const LittleApp = () => { return ( <div> <MaterialUI.Button variant="contained" color="primary"> Hello World </MaterialUI.Button> </div> ) } ReactDOM.render(<LittleApp />, document.getElementById("littleApp"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script> <div id="littleApp"></div>

Answer 2

我认为您也可以使用<script>添加这些库。 反应路由器： <script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>

反应引导： <script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin />

检查相应库的文档。

Answer 3

https://cdnjs.com/拥有许多 FOSS（免费和开源软件）网络库。 搜索react-router产生可以在应用程序中使用的开发和缩小版本的链接。 但就像klugjo 的回答一样，我强烈建议不要这样做，并尽可能使用 npm 管理您的项目模块。

Answer 4

我强烈建议不要这样做并走标准路线：

• 使用create-react-app创建一个完整的 React 应用程序
• 使用 npm 安装模块
• 编写您的应用程序
• 构建应用程序并部署生成的包（create-react-app 提供了您需要的所有工具）

像您提供的链接一样从 CDN 获取反应适用于快速概念验证，但不适用于生产应用程序

Answer 5

一分钟内添加 React 在本节中，我们将展示如何将 React 组件添加到现有的 HTML 页面。 您可以跟随您自己的网站，或创建一个空的 HTML 文件来练习。

没有复杂的工具或安装要求——要完成本部分，您只需要互联网连接和一分钟的时间。

详细教程 - 点击这里

快速官方文档 - 点击这里