如何在ReactJS中使用Bootstrap?（react usememo）
ccwgpt 2024-10-14 08:47 31 浏览 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/
相关推荐
- 用Steam启动Epic游戏会更快吗?（epic怎么用steam启动）
-
Epic商店很香，但也有不少抱怨，其中一条是启动游戏太慢。那么，如果让Steam启动Epic游戏，会不会速度更快？众所周知，Steam可以启动非Steam游戏，方法是在客户端左下方点击“添加游戏”，然...
- Docker看这一篇入门就够了（dockerl）
-
安装DockerLinux:$curl-fsSLhttps://get.docker.com-oget-docker.sh$sudoshget-docker.sh注意：如果安装了旧版...
- AYUI 炫丽PC开发UI框架2016年6月15日对外免费开发使用 [1]
-
2016年6月15日，我AY对外发布AYUI（WPF4.0开发）的UI框架，开发时候，你可以无任何影响的去开发PC电脑上的软件exe程序。AYUI兼容XP操作系统，在Win7/8/8.1/10上都顺利...
- 别再说C#/C++套壳方案多了!Tauri这“借壳生蛋”你可能没看懂!
-
浏览器套壳方案，C#和C++有更多，你说的没错，从数量和历史积淀来看，C#和C++确实有不少方式来套壳浏览器，让Web内容在桌面应用里跑起来。但咱们得把这套壳二字掰扯清楚，因为这里面学问可大了！不同的...
- OneCode 核心概念解析——Page(页面)
-
在接触到OneCode最先接触到的就是，Page页面，在低代码引擎中，页面（Page）设计的灵活性是平衡“快速开发”与“复杂需求适配”的关键。以下从架构设计、组件系统、配置能力等维度，解析确...
- React是最后的前端框架吗，为什么这么说的?
-
油管上有一位叫Theo的博主说，React是终极前端框架，为什么这么说呢？让我们来看看其逻辑：这个标题看起来像假的，对吧？React之后明明有无数新框架诞生，凭什么说它是最后一个？我说的“最后一个”不...
- 面试辅导(二):2025前端面试密码:用3个底层逻辑征服技术官
-
面试官放下简历，手指在桌上敲了三下："你上次解决的技术难题，现在回头看有什么不足？"眼前的候选人瞬间僵住——这是上周真实发生在蚂蚁金服终面的场景。2025年的前端战场早已不是框架熟练...
- 前端新星崛起!Astro框架能否终结React的霸主地位?
-
引言：当"背着背包的全能选手"遇上"轻装上阵的短跑冠军"如果你是一名前端开发者，2024年的框架之争绝对让你眼花缭乱——一边是React这位"背着全家桶的全能选...
- 基于函数计算的 BFF 架构（基于函数计算的 bff 架构是什么）
-
什么是BFFBFF全称是BackendsForFrontends(服务于前端的后端)，起源于2015年SamNewman一篇博客文章《Pattern:BackendsFor...
- 谷歌 Prompt Engineering 白皮书:2025年 AI 提示词工程的 10 个技巧
-
在AI技术飞速发展的当下，如何更高效地与大语言模型（LLM）沟通，以获取更准确、更有价值的输出，成为了一个备受关注的问题。谷歌最新发布的《PromptEngineering》白皮书，为这一问题提供了...
- 光的艺术:灯具创意设计（灯光艺术作品展示）
-
本文转自|艺术与设计微信号|artdesign_org_cn“光”是文明的起源，是思维的开端，同样也是人类睁眼的开始。每个人在出生一刻，便接受了光的照耀和洗礼。远古时候，人们将光奉为神明，用火来...
- MoE模型已成新风口，AI基础设施竞速升级
-
机器之心报道编辑：Panda因为基准测试成绩与实际表现相差较大，近期开源的Llama4系列模型正陷入争议的漩涡之中，但有一点却毫无疑问：MoE（混合专家）定然是未来AI大模型的主流范式之一。...
- Meta Spatial SDK重大改进:重塑Horizon OS应用开发格局
-
由文心大模型生成的文章摘要Meta持续深耕SpatialSDK技术生态，提供开自去年9月正式推出以来，Meta持续深耕其SpatialSDK技术生态，通过一系列重大迭代与功能增强，不断革新H...
- "上云"到底是个啥?用"租房"给你讲明白IaaS/PaaS/SaaS的区别
-
半夜三点被机房报警电话惊醒，顶着黑眼圈排查服务器故障——这是十年前互联网公司运维的日常。而现在，程序员小王正敷着面膜刷剧，因为公司的系统全"搬"到了云上。"部署到云上"...
- php宝塔搭建部署thinkphp机械设备响应式企业网站php源码
-
大家好啊，欢迎来到web测评。本期给大家带来一套php开发的机械设备响应式企业网站php源码，上次是谁要的系统项目啊，帮你找到了，还说不会搭建，让我帮忙录制一期教程，趁着今天有空，简单的录制测试了一下...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 用Steam启动Epic游戏会更快吗?（epic怎么用steam启动）
- Docker看这一篇入门就够了（dockerl）
- AYUI 炫丽PC开发UI框架2016年6月15日对外免费开发使用 [1]
- 别再说C#/C++套壳方案多了!Tauri这“借壳生蛋”你可能没看懂!
- OneCode 核心概念解析——Page(页面)
- React是最后的前端框架吗，为什么这么说的?
- 面试辅导(二):2025前端面试密码:用3个底层逻辑征服技术官
- 前端新星崛起!Astro框架能否终结React的霸主地位?
- 基于函数计算的 BFF 架构（基于函数计算的 bff 架构是什么）
- 谷歌 Prompt Engineering 白皮书:2025年 AI 提示词工程的 10 个技巧
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- ui自动化框架 (47)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (55)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)