在React中使用Bootstrap
这几天想在react中用一下bootstrap,尽管有一个适配react的很好的库叫react-bootstrap,但我还是想直接使用bootstrap
可以在react项目中执行以下命令安装bootstrap
npm install bootstrap@ --save
或是在bootstrap官网下载打包好的包直接放在react项目的src目录下
在使用的时候,直接在入口文件导入即可
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap';
PS:上述代码是使用npm安装bootstrap的导入方式,其他方式请选择正确的路径
如果现在启动项目,会报以下的错误

这是因为bootstrap依赖jQuery
网上有很多解决此类错误的方法,很多都是使用webpack进行配置,对于使用create_react_app创建的项目,由于create_react_app对webpack进行的封装,要想配置还要进行他法,感觉很麻烦,我作为一个小白,完全看不懂啊(T_T)
于是侥幸试了一下,直接在react的index.html文件中加个jQuery的引入

然后就OK了。。。
----------
如果您还有什么好的方法的话,欢迎在下面留言指导
在React中使用Bootstrap的更多相关文章
- 脚手架搭建的react中使用bootstrap
1.在react的index.html文件中加个jQuery的引入 <script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.mi ...
- 在 React项目中使用 bootstrap
在使用create-react-app 创建的项目中使用 bootstrap; 安装react-bootstrap; npm install react-bootstrap --savenpm ins ...
- 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)
一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...
- 理解React中es6方法创建组件的this
首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...
- 【原】React中,map出来的元素添加事件无法使用
在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...
- React中props.children和React.Children的区别
在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...
- Django中使用Bootstrap
一.在Django中引用Bootstrap模版 1.首先下载bootsrtap代码(http://v3.bootcss.com/getting-started/#download),并将下载后的文件放 ...
- Immutable 详解及 React 中实践
本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...
- 在ASP.NET MVC中使用 Bootstrap table插件
Bootstrap table: http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 1. 控制器代码: using Syst ...
随机推荐
- RocketMQ中Broker的消息存储源码分析
Broker和前面分析过的NameServer类似,需要在Pipeline责任链上通过NettyServerHandler来处理消息 [RocketMQ中NameServer的启动源码分析] 实际上就 ...
- 对vue中nextTick()的理解及使用场景说明
异步更新队列: 首先我们要对vue的数据更新有一定理解: vue是依靠数据驱动视图更新的,该更新的过程是异步的. 即:当侦听到你的数据发生变化时, Vue将开启一个队列(该队列被Vue官方称为异步更新 ...
- RE最全面的正则表达式----字符验证
二.校验字符的表达式汉字:^[一-彪]{0,}$英文和数字:^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$长度为3-20的所有字符:^.{3,20}$由26个英文字母组成的字 ...
- Eureka 缓存结构以及服务感知优化
目录 Eureka-Client获取注册信息 Eureka-Server管理注册信息 服务感知优化 果然好记性不如烂笔头,再简单的东西不记录下来总是会忘的! 本文首先会分析eureka中的缓存架构.并 ...
- 就当我在扯淡,宇宙的bug
Geohot说到“我打算建立一个组织让人们从人工智能模拟中‘越狱’,释放真正的人性.” 不知从何时开始,世界上的知名科学家,黑客等都开始怀疑我们所处世界的真实性. 我们的世界上是真实存在的吗?是否存在 ...
- VU TPS QPS RT 计算公式
1.背景 最近看了阿里巴巴中间件写的一篇文章,讲述了关于并发,RPS,RT之间的关系.感觉收获颇丰.自己使用JMeter工具对公式进行了验证. 2.验证 我们先来看几个基础知识定义: TPS:每秒完成 ...
- Nginx在linux下安装及简单命令
安装环境:Centos7 创建目录及切换至目录 # mkdir /usr/local/nginx # cd /usr/local/nginx/ 下载nginx包,访问http://nginx.org下 ...
- java-初读 HashTable
有用的标识符 transiant 有用的属性 初始容量11 加载因子0.75 这里理解如果要经常插入大量数据可以增大加载因子 有用的方法 @Test public void testNan() { l ...
- 编程杂谈——Platform target x64
在Visual Studio中选择.NET Framework框架并选用任意模板创建一个普通的Web应用工程,毫无疑问,此时应该是能够正常运行此工程的. 但是将工程属性->编译->Plat ...
- [HNOI2008]玩具装箱toy(斜率优化dp)
前言 这是我写的第一道$dp$斜率优化的题目,$dp$一直都很菜,而且咖啡鸡都说了这是基础的东西,然而看别人对$dp$斜率优化一大堆公式又看不懂就老老实实做几道题目,这个比较实在 描述 给出$n$和$ ...