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

因此，reactjs.org提供了一个极好的教程，介绍如何通过将react js代码添加为脚本，将react js添加到现有网站。这对我来说很有效。我的疑问是，我们如何处理从npm下载的组件？（例如：react路由器、react引导程序等）通常，当我们处理一个完整的react项目时，我们只需使用npm安装它们并将它们导入react js，但是，我们如何安装这些组件或像获得react脚本文件那样获得它们的脚本文件呢？

我强烈建议不要这样做，而是采用标准方法：

• 用于创建成熟的react应用程序
• 使用npm安装您的模块
• 编写应用程序代码
• 构建应用程序并部署生成的捆绑包（create react应用程序提供了实现此目的所需的所有工具）

---

从您提供的链接中类似的CDN获取react适用于快速概念验证，但不适用于生产应用程序

我认为您也可以使用

添加这些库。 反应路由器：

反应引导：

---

查看相应库的文档。

拥有许多自由和开源软件（FOSS）web库。搜索

react-router

可获得可在应用程序中使用的开发和缩小版本的链接。但与此类似，我强烈建议不要这样做，并尽可能使用npm管理您的项目模块。

该过程将类似于React网站上描述的过程。在他们的示例中，他们实现了一个简单的单一组件（

）应用程序，没有外部依赖关系。要使用外部组件/模块，您需要将它们捆绑到应用程序中，或者将它们作为脚本加载

首选方法

首选的方法是使用像webpack、parcel或类似的绑定器将代码和模块绑定到单个脚本中

创建您的

app.js

文件，使用

import

s加载外部组件

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"));

我知道这肯定更好，但当我的大多数网站都是使用其他JS库构建的，我只需要对一个独立页面做出反应时，我该怎么做呢？这会创建一个SPA（单页面应用程序）；OP明确询问如何在现有网站上创建reactjs应用程序。这个答案不合适。嗨，Brett，我可以在哪里找到资源，将我的app.js和所有导入的js文件捆绑到一个文件中，通过一个简单的html页面导入为src？Create React app（CRA）可能是最简单的入门方法。它在引擎盖下使用webpack。一旦您安装了CRA并创建了一个项目，它允许您运行

npm run build

将脚本捆绑到一个

.js

文件中，然后将其加载到站点上的

标记中。但npm run build会将所有内容分块到不同的js文件中，对吗？如何将其绑定到单个js文件？取决于网页包配置。它可以把所有东西捆绑成一块。你能给我提供一个资源让我完成这个任务吗？我真的很想将此页面与现有应用程序集成。