Babel.js 如何在现有网站上添加React Js?

lx0bsm1f  于 2022-12-08  发布在  Babel
关注(0)|答案(4)|浏览(167)

所以reactjs.org有一个很好的教程,教我们如何将react js添加到一个现有的网站HERE中,方法是将react js代码添加为脚本。这对我来说很有效。我的疑问是,我们如何使用从npm下载的组件?(例如:react-router、react-bootstrap等)。通常,当我们处理一个完整的react项目时,我们只需使用npm安装它们并将它们导入react js,但我们如何安装这些组件或像获取react脚本文件那样获取它们的脚本文件呢?

dwbf0jvd

dwbf0jvd1#

该过程类似于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"));

1.使用webpack、packet或类似工具将app.js捆绑到单个bundled.js文件中
1.将bundled.js文件加载到页面中

替代方法

也可以使用<script>标签中的通用模块定义(UMD)文件加载某些组件。这可以用于简单的附加应用,但在大多数情况下可能不推荐。我倾向于只在原型化想法或演示Stack Overflow上的解决方案时使用这些文件。
大概是这样的:
第一次

t3irkdon

t3irkdon2#

我认为您也可以使用<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 />
请查看相应库的文档。

jexiocij

jexiocij3#

https://cdnjs.com/托管了许多FOSS(Free and Open-Source Software)网络库。搜索react-router会得到一些链接,这些链接指向您可以在应用程序中使用的开发版本和精简版本。但是,与klugjo's answer非常相似,我强烈建议不要这样做,如果可能的话,请使用npm管理您的项目模块。

9udxz4iz

9udxz4iz4#

我强烈建议不要这样做,走标准路线:

  • 使用create-react-app创建一个成熟的react应用程序
  • 使用npm安装模块
  • 编写应用程序代码
  • 构建应用程序并部署生成的捆绑包(create-react-app提供了完成此任务所需的所有工具)

从CDN(如您提供的链接中所示)获取响应适合快速概念验证,但不适合生产应用程序

相关问题