这几天想在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. JavaSE之——并没有多维数组

     近日在读<疯狂Java讲义>精粹第二版,部分语述摘自其中,自己边敲边理解 前言       我们知道,Java语言支持的类型有两种:            1.基本类型(即八大基本数据类 ...

  2. php 获取未来七天的日期和星期

    php获取未来七天的日期和星期代码     for($i=4;$i<8;$i++){       $dateArray[$i]=date('Y-m-d',strtotime(date('Y-m- ...

  3. Android buildType混淆代码

    [话题引入] ①在Android开发完成,我们会将代码打包成APK文件.选择 菜单栏 Build --> Build APK ②将查看视图切换到 Project 模式,文件夹下有一个debug模 ...

  4. 使用阿里云oss

    写这篇博文的原因是公司有个项目需要用到阿里云来存放用户头像文件.后期软件安装版本也可能需要存进去,然后折腾了两天终于摸熟了一点皮毛,在这里给大家简单介绍下. 一.初识对象存储oss 1.进入阿里云控制 ...

  5. TI MSP430工程配置及2019年电赛A题编程示例(使用430 F5529)

    配置 第一步:右击工程,选择Options 第二步:在General Options的Target选项卡里选择对应的器件Device,这里是MSP430G2231 第三步:在Debugger里选择FE ...

  6. egg-sequelize-ts 插件

    egg-sequelize-ts plugin 目的 (Purpose) 能让使用 typescript 编写的 egg.js 项目中能够使用 sequelize方法,并同时得到egg.js所赋予的功 ...

  7. Java String引起的常量池、String类型传参、“==”、“equals”、“hashCode”问题 细节分析

    在学习javase的过程中,总是会遇到关于String的各种细节问题,而这些问题往往会出现在Java攻城狮面试中,今天想写一篇随笔,简单记录下我的一些想法.话不多说,直接进入正题. 1.String常 ...

  8. Hive 系列(七)—— Hive 常用 DML 操作

    一.加载文件数据到表 1.1 语法 LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (p ...

  9. Leetcode solution 124: Binary Tree Maximum Path Sum

    Problem Statement Given a non-empty binary tree, find the maximum path sum. For this problem, a path ...

  10. nodeJS 中mongoose操作分页

    开始前先聊聊五毛钱的: 好久没写了,可能是因为懒(哎),写这个是好事,既帮助了自己,巩固一下知识,也可以让别人给自己纠错纠错,三月份接触到了node,先是跟着一些教程写了一些小实例,感觉自己就喜欢上了 ...