javascript - 如何在现有网站上添加 React Js?
问题描述
所以reactjs.org有一个很好的教程,介绍如何通过将 react js 代码添加为脚本来将 react js 添加到现有网站。这对我来说效果很好。我的疑问是,我们将如何使用从 npm 下载的组件?(例如:react-router、react-bootstrap 等)通常当我们处理完整的 react 项目时,我们只需使用 npm 安装它们并将它们导入 react js,但是我们如何安装这些组件或获取它们的脚本文件,就像我们得到反应脚本文件一样?
解决方案
该过程将类似于 React 站点上描述的过程。<LikeButton />
在他们的示例中,他们实现了一个没有外部依赖的简单单组件 ( ) 应用程序。要使用外部组件/模块,您需要将它们捆绑到您的应用程序中,或者将它们作为脚本加载。
首选方法
首选方法是使用 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"));
使用 webpack、parcel 或类似工具将其捆绑
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>
推荐阅读
- java - 函数树使用什么数据结构
- r - 用 R 修改列表中的数据框
- ios - 在 IOS 12.1 上使用 WIFI 时我的应用程序停止
- r - 如何在 ggplot 中使用变量度量(误差线)?
- javascript - JavaScript 回调返回结果,但函数变量未定义
- r - 使用 r 中 dplyr 中的 mutate_all() 将 df 中的每一列除以其他列
- javascript - 如何在返回值之前完全解决 axios/fetch call/promise?
- cassandra - Cassandra 数据建模 IoT 最佳实践
- android - Java:数独拼图生成无法正常工作
- pytest - 使用 tox 运行时,如何使 pytest 测试可以访问测试数据文件?