如何在ReactJS中使用Bootstrap? react positively
qiyuwang 2024-10-07 15:19 12 浏览 0 评论
作者：Creative Tim
译者：Echa 攻城狮
转发链接：https://www.creative-tim.com/blog/web-design/how-to-use-bootstrap-with-reactjs/
前言
毫无疑问，构建强大的Web应用程序时，Bootstrap和ReactJS仍然是最受欢迎的选择。在ReactJS中使用本机Bootstrap并不像看起来那样容易。但是，可以使用不同的方法。
为什么将Bootstrap组件包含在React中具有挑战性？
React是一个简单的库，用于创建交互式前端网页，其基于组件的体系结构可以嵌套或并排放置。因此，将第三方库添加到React很容易。
但是，Bootstrap在很大程度上依靠jQuery来为其用户界面组件提供动力。由于jQuery直接操作文档对象模型（DOM），因此Bootstrap与React固有的声明方法相矛盾。如果您希望包含一个带有响应式12列网格的香草Bootstrap样式表或不涉及jQuery的组件，则可以轻松地将这些组件添加到React中。但是，不能以这种方式集成依赖jQuery的组件。
因此，要将Bootstrap与ReactJS一起使用，必须有一种方法来删除Bootstrap的jQuery依赖关系。
如何在ReactJS中使用Bootstrap？
选项1：将原始CSS Bootstrap文件包含到ReactJS中
将Bootstrap与ReactJS一起使用的第一个选择是将原始CSS Bootstrap文件包含在ReactJS中。
1.使用以下命令在您的系统中创建一个新的默认Create React App项目：
npx create-react-app my-project
上面的命令使用基本模板创建项目。要使用其他可用模板创建项目，请执行以下命令：
npx create-react-app my-project–template [template-name]
您可以通过在npm上搜索“ cra-template- *”来找到可用模板的列表。模板通常以“ cra-template- [template-name]”格式命名。只需在上面的命令中输入所需的模板名称即可。
2.使用以下命令运行新项目
使用以下命令导航到新项目：
cd my-project
使用以下命令启动npm：
npm start
3.将Bootstrap样式表链接到ReactJS。
使用以下命令安装Bootstrap：
npm install bootstrap
在create-react-app软件包的src / index.js或App.js文件中 包含以下代码：
导入“ bootstrap / dist / bootstrap.min.css”；
现在，您可以在Bootstrap样式表成功集成到React应用程序后，将Bootstrap类与ReactJS代码一起使用。
为了最好地使用ReactJS，将Bootstrap类作为React组件导入将是理想的。幸运的是，这是通过利用第三方库（如react-bootstrap和reactstrap）来完成的。
选项2：使用react-bootstrap库
的反应的自举库是替换引导JavaScript和已经从头开始建立为一个真正阵营成分，通过除去jQuery的依赖关系最常用的库之一。该库的最新版本仅支持Bootstrap v4。
安装react-bootstrap库
要使用该库，可以使用以下命令进行安装：
npm install react-bootstrap引导程序
使用react-bootstrap的组件
要使用这些组件，只需导入单个组件（例如react-bootstrap / Button）而不是整个库。这样可以确保仅提取您使用的组件，从而减少了发送给客户端的代码。
从“ react-bootstrap / Button”导入Button；
可用的组件包括警报，手风琴，徽章，面包屑，按钮，按钮组，卡片，轮播，下拉菜单，表单，输入组，图像，图形，巨型机，列表组，模式，导航，导航栏，覆盖图，分页，弹出窗口，进度，微调框，表格，表格，工具提示和图示。
导入样式表
尽管react-bootstrap不一定依赖于Bootstrap的非常精确的版本，但仍需要某些样式表才能使用这些组件。运行以下命令：
npm安装引导程序
现在，您可以在src / index.js或App.js文件中包含以下代码：
导入“ bootstrap / dist / css / bootstrap.min.css”；
萨斯
如果使用的是Sass，请确保安装了node-sass软件包。然后，您可以在主Sass文件中包含Bootstrap的源Sass文件。这适用于典型的create-react-app应用程序。在您的src / App.scss文件中包含以下代码。
导入“?bootstrap / scss / bootstrap”；
选项3：使用reactstrap库
该reactstrap库已明确被用于引导V4使用创建的，它可以让你相关的引导组件导入到你的ReactJS项目。
安装reactstrap库
要使用该库，可以使用以下命令进行安装：
npm install reactstrap react react-dom
使用reactstrap的组件
要使用相关的组件，您可以简单地导入所需的组件而不是整个库。这样可以确保仅提取您使用的组件，从而减少了发送给客户端的代码。例如：
import { Button } from ‘reactstrap’;
可用的组件包括警报，徽章，面包屑，按钮下拉菜单，按钮组，按钮，卡片，轮播，折叠，下拉菜单，淡入淡出，表单，输入组，巨型机，布局，列表组，媒体，模式，导航栏，导航，分页，弹出窗口，进度，微调框，表格，标签，祝酒词和工具提示。
导入样式表
为了使您按预期工作，您需要手动添加Bootstrap CSS。运行以下命令：
npm安装引导程序
并且，通过包含以下代码，将Bootstrap CSS导入到reactstrap的src / index.js文件中：
导入“ bootstrap / dist / css / bootstrap.css”；
选项4：其他第三方模块
react-bootstrap和reactstrap还有其他选项，可用于有效地将新的Bootstrap之类的组件用于ReactJS。例子包括react-bootstrap-table2之类的东西，react-bootstrap-table的重建。
顾名思义，react-bootstrap-table2显式用于创建Web应用程序的动态表。由于名称已经在npm上使用，因此此模块的安装需要运行以下命令：
npm install react-bootstrap-table-next
安装后，需要在使用模块之前将react-bootstrap-table2 CSS添加到应用程序中。在使用该模块之前，请添加以下代码：
导入“ react-bootstrap-table-next / dist / react-bootstrap-table2.min.css”；
结论
用于在Bootstrap中包含Bootstrap的选项取决于您使用的Bootstrap版本，所需组件的类型以及所需的灵活性。
推荐React 学习相关文章
《在React中实现和Vue一样舒适的keep-alive 》
《细聊 React 是如何创建 vdom 和 fiber tree「实践」》
《这就是你日思夜想的 React 原生动态加载「值得收藏」》
《手把手教你从Mixin深入到HOC再到Hook【React】》
《深入Facebook 官方React 状态管理器Recoil讲解》
《React源码分析与实现(一)：组件的初始化与渲染「实践篇」》
《React源码分析与实现(二)：状态、属性更新->setState「实践篇」》
《手把手教你10个案例理解React hooks的渲染逻辑「实践」》
《Vue 3.0 Beta 和React 开发者分别杠上了》
《手把手深入Redux react-redux中间件设计及原理（上）【实践】》
《手把手深入Redux react-redux中间件设计及原理（下）【实践】》
《为了学好 React Hooks, 我解析了 Vue Composition API》
《【React 高级进阶】探索 store 设计、从零实现 react-redux》
《深入浅出掌握React 与 React Native这两个框架》
《你需要的 React + TypeScript 50 条规范和经验》
《手把手教你深入浅出实现Vue3 & React Hooks新UI Modal弹窗》
《全平台（Vue/React/微信小程序）任意角度旋图片裁剪组件》
作者：Creative Tim
译者：Echa 攻城狮
转发链接：https://www.creative-tim.com/blog/web-design/how-to-use-bootstrap-with-reactjs/
相关推荐
- PayPal严重漏洞可通过不安全的JAVA反序列化对象
-
在2015年12月,我在PayPal商业网站(manager.paypal.com)中发现了一个严重的漏洞,这个漏洞的存在,使得我可以通过不安全的JAVA反序列化对象,在PayPal的网站服务器上远程...
- 提醒:Apache Dubbo存在反序列化漏洞
-
背景：近日监测到ApacheDubbo存在反序列化漏洞（CVE-2019-17564），此漏洞可导致远程代码执行。ApacheDubbo是一款应用广泛的高性能轻量级的JavaRPC分布式服务框架...
- 【预警通报】关于WebLogicT3存在反序列化高危漏洞的预警通报
-
近日，我中心技术支撑单位监测到WebLogicT3存在反序列化0day高危漏洞，攻击者可利用T3协议进行反序列化漏洞实现远程代码执行。...
- Apache dubbo 反序列化漏洞(CVE-2023-23638)分析及利用探索
-
在对Apachedubbo的CVE-2023-23638漏洞分析的过程中，通过对师傅们对这个漏洞的学习和整理，再结合了一些新学的技巧运用，从而把这个漏洞的利用向前推了一步。整个过程中的研究思路以及...
- 案例|WebLogic反序列化漏洞攻击分析
-
目前网络攻击种类越来越多，黑客的攻击手段也变得层出不穷，常规的防护手段通常是对特征进行识别，一旦黑客进行绕过等操作，安全设备很难发现及防御。通过科来网络回溯分析系统可以全景还原各类异常网络行为，记录所...
- 【预警通报】关于ApacheOFBizRMI反序列化远程代码 执行高危漏洞的预警通报
-
近日，我中心技术支撑单位监测发现ApacheOFBiz官方发布安全更新，修复了一处远程代码执行漏洞。成功利用该漏洞的攻击者可造成任意代码执行，控制服务器。该漏洞编号：CVE-2021-26295，安...
- 关于OracleWebLogic wls9-async组件存在反序列化远程命令执行高危漏洞的预警通报
-
近日，国家信息安全漏洞共享平台（CNVD）公布了OracleWebLogicwls9-async反序列化远程命令执行漏洞。攻击者利用该漏洞，可在未授权的情况下远程执行命令。该漏洞安全级别为“高危”。现...
- Rust语言从入门到精通系列 - Serde序列化/反序列化模块入门指北
-
Serde是一个用于序列化和反序列化Rust数据结构的库。它支持JSON、BSON、YAML等多种格式，并且可以自定义序列化和反序列化方式。Serde的特点是代码简洁、易于使用、性能高效。...
- Java反序列化漏洞详解（java反序列化漏洞利用）
-
Java反序列化漏洞从爆出到现在快2个月了，已有白帽子实现了jenkins，weblogic，jboss等的代码执行利用工具。本文对于Java反序列化的漏洞简述后，并对于Java反序列化的Poc进行详...
- 关于Oracle WebLogic Server存在反序列化远程代码执行漏洞的安全公告
-
安全公告编号:CNTA-2018-00222018年7月18日，国家信息安全漏洞共享平台（CNVD）收录了OracleWebLogicServer反序列化远程代码执行漏洞（CNVD-2018-13...
- CVE-2020-9484 Apache Tomcat反序列化漏洞浅析
-
本文是i春秋论坛作家「Ybwh」表哥原创的一篇技术文章，浅析CVE-2020-9484ApacheTomcat反序列化漏洞。01漏洞概述这次是因为错误配置和org.apache.catalina....
- 告别脚本小子系列丨JAVA安全(8)——反序列化利用链(下)
-
0x01前言...
- 关于WebLogic反序列化高危漏洞的紧急预警通报
-
近日，WebLogic官方发布WebLogic反序列化漏洞的紧急预警通告，利用该漏洞可造成远程代码执行并直接控制Weblogic服务器，危害极大。该漏洞编号为：CVE-2019-2890，安全级别为“...
- 高危!Fastjson反序列化漏洞风险通告
-
漏洞描述...
- 学习Vulhub的Java RMI Registry 反序列化漏洞
-
这个实验，我们先通过dnslog演示命令执行，然后通过反弹shell获得root权限。JavaRemoteMethodInvocation用于在Java中进行远程调用。RMI存在远程bind的...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- PayPal严重漏洞可通过不安全的JAVA反序列化对象
- 提醒:Apache Dubbo存在反序列化漏洞
- 【预警通报】关于WebLogicT3存在反序列化高危漏洞的预警通报
- Apache dubbo 反序列化漏洞(CVE-2023-23638)分析及利用探索
- 案例|WebLogic反序列化漏洞攻击分析
- 【预警通报】关于ApacheOFBizRMI反序列化远程代码 执行高危漏洞的预警通报
- 关于OracleWebLogic wls9-async组件存在反序列化远程命令执行高危漏洞的预警通报
- Rust语言从入门到精通系列 - Serde序列化/反序列化模块入门指北
- Java反序列化漏洞详解（java反序列化漏洞利用）
- 关于Oracle WebLogic Server存在反序列化远程代码执行漏洞的安全公告
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)