这几天想在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的更多相关文章

  1. 脚手架搭建的react中使用bootstrap

    1.在react的index.html文件中加个jQuery的引入 <script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.mi ...

  2. 在 React项目中使用 bootstrap

    在使用create-react-app 创建的项目中使用 bootstrap; 安装react-bootstrap; npm install react-bootstrap --savenpm ins ...

  3. 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)

    一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...

  4. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  5. 【原】React中,map出来的元素添加事件无法使用

    在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...

  6. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

  7. Django中使用Bootstrap

    一.在Django中引用Bootstrap模版 1.首先下载bootsrtap代码(http://v3.bootcss.com/getting-started/#download),并将下载后的文件放 ...

  8. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  9. 在ASP.NET MVC中使用 Bootstrap table插件

    Bootstrap table: http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 1. 控制器代码: using Syst ...

随机推荐

  1. 数字麦克风PDM信号采集与STM32 I2S接口应用

    数字麦克风采用MEMS技术,将声波信号转换为数字采样信号,由单芯片实现采样量化编码,一般而言数字麦克风的输出有PDM麦克风和PCM麦克风,由于PDM麦克风结构.工艺简单而大量应用,在使用中要注意这二者 ...

  2. .net core web api部署到Linux系统CentOS 7

    一.创建一个.net core web api 的Demo 完成后的项目结构如图 修改下监听端口 发布代码 二.发布到CentOS 7上并运行 下一步需要一定的虚拟机知识了,我这里使用了windows ...

  3. 微信公众平台注册及AppID和AppSecret的获取

    一.注册公众平台 1.入口 浏览器搜索“微信公众平台”,进入官网,点右上角立即注册. 2.选择账号类型 注册前需要选择一个账号类型,共有4个账号类型可以选择,每种类型能提供不同的功能,功能区别见下图. ...

  4. abc -- 牛客

    题目描述 设a.b.c均是0到9之间的数字,abc.bcc是两个三位数,且有:abc+bcc=532.求满足条件的所有a.b.c的值. 输入描述: 题目没有任何输入. 输出描述: 请输出所有满足题目条 ...

  5. mvnjar包冲突解决方法

    命令 mvn dependency:tree -Dverbose 结果: [INFO] +- com.esotericsoftware:kryo:jar:4.0.2:test [INFO] | +- ...

  6. android ——活动

    活动(Activity)主要用于和用户进行交互,是一种可以包含用户界面的组件. 1.手动创建活动 右击com.example.administrator.exp5→New→Activity→Empty ...

  7. golang学习(1)---快速hello world

    很多著名的计算机语言都是一两个人在业余时间捣鼓出来的,但是Go语言是由Google的团队打造的.可能一些基础的知识点我不会细讲,因为这个时代你真的得快速学习,才能适应发展. 来看看go的hello, ...

  8. 既然synchronized是"万能"的,为什么还需要volatile呢?

    在我的博客和公众号中,发表过很多篇关于并发编程的文章,之前的文章中我们介绍过了两个在Java并发编程中比较重要的两个关键字:synchronized和volatile 我们简单回顾一下相关内容: 1. ...

  9. 交叉编译QT 5.6.2 Shell脚本

    测试环境:  CPU: AT91SAM9X35      Linux: Atmel提供的linux-at91-linux4sam_5.3 (Linux-4.1.0) 转载请注明: 凌云物网智科嵌入式实 ...

  10. 第一章 .NET基础-C#基础

    一.1.1. 基础语法 一.1.1.1. 注释符 一.1.1.1.1. 注释符的作用 l 注释 l 解释 一.1.1.1.2. C#中的3中注释符 l 单行注释 // l 多上注释 /* 要注释的内容 ...