所以reactjs.org有一个很好的教程,教我们如何将react js添加到一个现有的网站HERE中,方法是将react js代码添加为脚本。这对我来说很有效。我的疑问是,我们如何使用从npm下载的组件?(例如:react-router、react-bootstrap等)。通常,当我们处理一个完整的react项目时,我们只需使用npm安装它们并将它们导入react js,但我们如何安装这些组件或像获取react脚本文件那样获取它们的脚本文件呢?
dwbf0jvd1#
该过程类似于React网站上描述的过程。在他们的示例中,他们实现了一个简单的单组件(<LikeButton />)应用程序,没有外部依赖项。要使用外部组件/模块,您需要将它们捆绑到您的应用程序中,或将它们作为脚本加载。
<LikeButton />
首选方法
首选的方法是使用webpack、parcel等捆绑工具将代码和模块捆绑到单个脚本中。1.创建app.js文件,使用import加载外部组件
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文件加载到页面中
bundled.js
替代方法
也可以使用<script>标签中的通用模块定义(UMD)文件加载某些组件。这可以用于简单的附加应用,但在大多数情况下可能不推荐。我倾向于只在原型化想法或演示Stack Overflow上的解决方案时使用这些文件。大概是这样的:第一次
<script>
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 />请查看相应库的文档。
<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 />
jexiocij3#
https://cdnjs.com/托管了许多FOSS(Free and Open-Source Software)网络库。搜索react-router会得到一些链接,这些链接指向您可以在应用程序中使用的开发版本和精简版本。但是,与klugjo's answer非常相似,我强烈建议不要这样做,如果可能的话,请使用npm管理您的项目模块。
react-router
9udxz4iz4#
我强烈建议不要这样做,走标准路线:
从CDN(如您提供的链接中所示)获取响应适合快速概念验证,但不适合生产应用程序
4条答案
按热度按时间dwbf0jvd1#
该过程类似于React网站上描述的过程。在他们的示例中,他们实现了一个简单的单组件(
<LikeButton />
)应用程序,没有外部依赖项。要使用外部组件/模块,您需要将它们捆绑到您的应用程序中,或将它们作为脚本加载。首选方法
首选的方法是使用webpack、parcel等捆绑工具将代码和模块捆绑到单个脚本中。
1.创建
app.js
文件,使用import
加载外部组件1.使用webpack、packet或类似工具将
app.js
捆绑到单个bundled.js
文件中1.将
bundled.js
文件加载到页面中替代方法
也可以使用
<script>
标签中的通用模块定义(UMD)文件加载某些组件。这可以用于简单的附加应用,但在大多数情况下可能不推荐。我倾向于只在原型化想法或演示Stack Overflow上的解决方案时使用这些文件。大概是这样的:
第一次
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 />
请查看相应库的文档。
jexiocij3#
https://cdnjs.com/托管了许多FOSS(Free and Open-Source Software)网络库。搜索
react-router
会得到一些链接,这些链接指向您可以在应用程序中使用的开发版本和精简版本。但是,与klugjo's answer非常相似,我强烈建议不要这样做,如果可能的话,请使用npm管理您的项目模块。9udxz4iz4#
我强烈建议不要这样做,走标准路线:
从CDN(如您提供的链接中所示)获取响应适合快速概念验证,但不适合生产应用程序