Question

因此reactjs.org上有很棒的教程，介绍如何通过将react js代码作为脚本添加到现有网站HERE中。那对我来说很好。我的疑问是，我们如何处理从npm下载的组件？（例如：react-router，react-bootstrap等）通常，当我们处理一个完整的react项目时，我们只需将它们与npm一起安装并将其导入react中即可。 js，但是我们如何安装此类组件或像获得React脚本文件一样获取其脚本文件？

Answer 1

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

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

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

Answer 2

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

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

查看相应库的文档。

Answer 3

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

首选方法

首选方法是使用捆绑程序，例如webpack，parcel或类似工具，将代码和模块捆绑到一个脚本中。

使用app.js s加载外部组件来创建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"));

使用Webpack，包裹或类似工具将app.js捆绑到单个bundled.js文件中
将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 4

https://cdnjs.com/托管许多FOSS（自由和开源软件）网络库。搜索curl -v -I -x proxyServer:Port -X POST apiUrl response: HTTP/1.1 200 OK Date: Thu, 18 Jul 2019 10:58:01 GMT Server: Apache-Coyote/1.1 Content-Type: application/json Content-Length: 157会产生指向您可以在您的应用程序中使用的开发版本和缩小版本的链接。但是非常像klugjo's answer，我强烈建议您这样做，并尽可能使用npm管理您项目的模块。

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

4 个答案: