React导入Bootstrap库的方法

た入场券 2023-10-14 12:42 11阅读 0赞

# 1.React 和Bootstrap的区别是什么？ #

`react是基于mvc模式的javascript框架`，而`bootstrap只是一个基于HTML、CSS、JAVASCRIPT开发的前端ui框架`；`bootstrap是基于html的UI构建工具，react是基于组件的工程构建方式。`

# 2.BootStrap： #

*  Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。`Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷`。bootstrap也有一些UI组件`boostrap UI组件大部分偏向于使用class来使用(语义化的类名)，easyUI则大部分通过使用js函数来实现。`
 *  bootstrap更加侧重样式的表现，比较美观，符合现在的流行趋势，easyUI反之样式不是特别好， 不太美观
 *  bootstrap不带数据交互功能，而easyUI则带有强大的数据交互功能
 *  bootstrap兼容手机和pc，easyUI做不到这一点
 *  bootstrap的前端社区比easyUI更加成熟，资源也比较丰富，而且bootstrap有栅格化布局也已经成为主流，是现在大部分网站或者后台系统的开发趋势，而且使用率高，可以在网上找到好多的实例直接使用。十分方便。  
    React：

# 3.React介绍 #

*  `react是基于mvc(model view control )或mvp(model view presenter) 框架的前端框架`，更主要的是完成单一页面网页(SPA)，和vue类似。`MVC：Model(模型)+View(视图)+controller(控制器)，主要是基于分层的目的，让彼此的职责分开。`
 *  `MVP：是从MVC模式演变而来的，都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。`
 *  `React是一个用于构建用户界面的JAVASCRIPT库，主要用于构建UI。`
 *  主要特点：`数据的单向响应：当数据发生变化的时候，React将会自动的管理UI界面更新`
 *  VisualDom(虚拟Dom)：`由React来管理Dom树的变化, 开发者只需使用React的虚拟Dom进行开发，页面的呈现会更快。`
 *  这个引申出了一个更大的优点：`虚拟Dom到真实Dom的映射，是由React来控制的，`那么`如果虚拟Dom映射为IOS或者Android呢?` 于是React Native诞生了，约80%的Reactive Native代码是可以同时支持IOS和Android的。

## react和bootstrap的区别 ##

*  react是基于mvc或mvp模式的javascript框架，而bootstrap只是一个前端ui框架
 *  bootstrap：基于html的UI构建工具；
 *  react：基于组件的工程构建方式；

# 4.React结合Bootstrap的使用 #

## 1）官网下载 ##

[官网下载][Link 1]  
![在这里插入图片描述][ab861297a52d40e5b4437dd57398a254.png]

## 2）下载后解压或者安装Bootstrap插件 ##

### （1）下载后解压 ###

![在这里插入图片描述][2d28868a01cc4b14838e40adc5d94641.png]

> 注意：bootstrap.css：Bootstrap核心样式(添加到head标签中)  
> bootstrap.js：Bootstrap核心库

### （2）安装Bootstrap插件 ###

npm install file-loader url url-loader --save-dev

## 3）配置webpack.config.js文件 ##

module.exports = {
        
      entry: './index.js',
      output: {
        
          path:path.resolve(__dirname,"build"),
          publicPath:"/assets/",
        filename: 'bundle.js'
      },
      module: {
        
          rules: [
        {
         test: /\.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" },
        {
         test: /\.css$/, exclude: /node_modules/, loader: "style-loader!css-loader" },
        {
         test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },  //添加
        {
         test: /\.(woff|woff2)$/, loader:"url-loader?prefix=font/&limit=5000" }, //添加
        {
         test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" }, //添加
        {
         test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" } //添加
          ]
        } 
    }

## 补充：简单的方式 ##

在新建的rect项目目录中安装react-bootstrap。

npm install react-bootstrap --save

安装bootstrap。

npm install bootstrap@3.3.7 --save

在index.js文件中增加css引用。

import 'bootstrap/dist/css/bootstrap.css';
    import 'bootstrap/dist/css/bootstrap-theme.css';

在需要用到bootstrap组件的代码中，引入所需组件。

import {
         Navbar, Jumbotron, Button } from 'react-bootstrap';

[Link 1]: https://v4.bootcss.com/
[ab861297a52d40e5b4437dd57398a254.png]: https://img-blog.csdnimg.cn/ab861297a52d40e5b4437dd57398a254.png
[2d28868a01cc4b14838e40adc5d94641.png]: https://img-blog.csdnimg.cn/2d28868a01cc4b14838e40adc5d94641.png