React集成Bootstrap框架 – ReactJS实战教程-srcmini

上一章ReactJS实战教程请查看：React使用动画组件

在过去的几年里，单页应用程序越来越受欢迎，因此许多前端框架被引入，如Angular、React和Vue.js、Ember等等。因此，jQuery不是构建web应用程序的必要条件。如今，React拥有最常用的JavaScript框架来构建web应用程序，Bootstrap也成为最流行的CSS框架。因此，有必要学习Bootstrap在React应用中使用的各种方式，这也是本节的主要目的。

React添加Bootstrap

我们可以通过几种方式向React应用程序添加bootstrap，以下是三种最常见的方法:

使用bootstrap CDN
将bootstrap作为一个依赖
使用react bootstrap包

使用Bootstrap CDN

这是向React应用程序添加Bootstrap的最简单方式，无需安装或下载Bootstrap。我们可以简单地将一个<link>放入React应用程序的index.html文件的<head>部分，如下面的代码片段所示。

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

如果需要在React应用程序中使用依赖于JavaScript/jQuery的Bootstrap组件，我们需要包含jQuery、Popper.js和Bootstrap。在index.html文件的结束标记标记附近的

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

在上面的代码片段中, 我们使用jQuery的min版本, 尽管我们还可以使用完整版本。现在Bootstrap已经成功加入到React应用程序中，我们可以在React项目中使用所有Bootstrap中可用的CSS工具和UI组件。

将bootstrap作为react项目依赖

如果我们使用构建工具或一个模块打包器如Webpack，那么可以导入bootstrap作为依赖项添加到React应用程序中。我们可以安装Bootstrap作为React应用程序的依赖项，在终端窗口中运行以下命令。

$ npm install bootstrap --save

一旦安装了Bootstrap，我们就可以将其导入到React应用程序条目文件中。如果使用create-react-app工具创建React项目，请打开src/index.js文件，并添加以下代码

import 'bootstrap/dist/css/bootstrap.min.css';

现在，我们可以在React应用程序中使用CSS类和实用工具。另外，如果我们想使用JavaScript组件，我们需要安装来自npm的jquery和popper.js包。要安装以下软件包，请在终端窗口中运行以下命令。

$ npm install jquery popper.js

接下来，转到src/index.js文件并添加以下导入。

import $ from 'jquery';  
import Popper from 'popper.js';  
import 'bootstrap/dist/js/bootstrap.bundle.min';

现在，我们可以在React应用程序中使用Bootstrap JavaScript组件。

使用React Bootstrap包

React Bootstrap包是在React应用程序中添加Bootstrap的最流行方法。有许多由社区构建的Bootstrap包，它们旨在将Bootstrap组件重新构建为React组件。两个最流行的Bootstrap包是:

React-Bootstrap：它是一个完整的重新实现的Bootstrap组件，作为React组件，它不需要任何依赖，如bootstrap.js或jQuery。如果安装了React setup和React-bootstrap，我们就有了所有需要的东西。
reactstrap：它是一个包含React Bootstrap 4个组件的库，支持组合和控制。它不依赖于jQuery或引导JavaScript。但是，对于高级的内容定位，如工具提示、弹出窗口和自动翻转下拉菜单，需要使用react-proper。

React Bootstrap安装

让我们使用create-react-app命令创建一个新的React应用程序，如下所示。

$ npx create-react-app react-bootstrap-app

创建React应用程序后，安装Bootstrap的最佳方式是通过npm包。要安装引导程序，请导航到React app文件夹，并运行以下命令。

$ npm install react-bootstrap bootstrap --save

导入Bootstrap

现在，打开src/index.js文件并添加以下代码来导入Bootstrap文件。

import 'bootstrap/dist/css/bootstrap.min.css';

我们还可以导入个别组件，如import {SplitButton, Dropdown} from ‘react-bootstrap’;而不是整个库。它提供了我们需要使用的特定组件，并且可以显著减少代码量。

在React应用程序中，在src目录中创建一个名为ThemeSwitcher.js的新文件，并放入以下代码。

import React, { Component } from 'react';  
import { SplitButton, Dropdown } from 'react-bootstrap';  
  
class ThemeSwitcher extends Component {  
  
  state = { theme: null }  
    
  chooseTheme = (theme, evt) => {  
    evt.preventDefault();  
    if (theme.toLowerCase() === 'reset') { theme = null }  
    this.setState({ theme });  
  }  
    
  render() {  
    const { theme } = this.state;  
    const themeClass = theme ? theme.toLowerCase() : 'default';  
      
    const parentContainerStyles = {  
      position: 'absolute',  
      height: '100%',  
      width: '100%',  
      display: 'table'  
    };  
      
    const subContainerStyles = {  
      position: 'relative',  
      height: '100%',  
      width: '100%',  
      display: 'table-cell',  
    };  
      
    return (  
      <div style={parentContainerStyles}>  
        <div style={subContainerStyles}>  
          
          <span className={`h1 center-block text-center text-${theme ? themeClass : 'muted'}`} style={{ marginBottom: 25 }}>{theme || 'Default'}</span>  
            
          <div className="center-block text-center">  
            <SplitButton bsSize="large" bsStyle={themeClass} title={`${theme || 'Default Block'} Theme`}>  
              <Dropdown.Item eventKey="Primary Block" onSelect={this.chooseTheme}>Primary Theme</Dropdown.Item>  
              <Dropdown.Item eventKey="Danger Block" onSelect={this.chooseTheme}>Danger Theme</Dropdown.Item>  
              <Dropdown.Item eventKey="Success Block" onSelect={this.chooseTheme}>Success Theme</Dropdown.Item>  
              <Dropdown.Item divider />  
              <Dropdown.Item eventKey="Reset Block" onSelect={this.chooseTheme}>Default Theme</Dropdown.Item>  
            </SplitButton>  
          </div>    
        </div>  
      </div>  
    );   
  }   
}  
export default ThemeSwitcher;

现在，使用以下代码片段更新src/index.js文件。

Index.js

import 'bootstrap/dist/css/bootstrap.min.css';  
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
import './index.css';  
import ThemeSwitcher from './ThemeSwitcher';  
  
ReactDOM.render(<ThemeSwitcher />, document.getElementById('root'));

使用reactstrap

让我们使用create-react-app命令创建一个新的React应用程序，如下所示。

$ npx create-react-app reactstrap-app

接下来，通过npm包安装reactstrap，要安装reactstrap，请导航到React app文件夹，并运行以下命令。

$ npm install bootstrap reactstrap --save

导入Bootstrap

现在，打开src/index.js文件并添加以下代码来导入Bootstrap文件。

import 'bootstrap/dist/css/bootstrap.min.css';

我们也可以从“reactstrap”中导入单独的组件，如import {Button, Dropdown} from ‘reactstrap’;而不是整个库。它提供了我们需要使用的特定组件，并且可以显著减少代码量。

在React应用程序中，在src目录中创建一个名为ThemeSwitcher.js的新文件，并放入以下代码。

import React, { Component } from 'react';  
import { Button, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';  
  
class ThemeSwitcher extends Component {  
  
  state = { theme: null, dropdownOpen: false }  
    
  toggleDropdown = () => {  
    this.setState({ dropdownOpen: !this.state.dropdownOpen });  
  }  
    
  resetTheme = evt => {  
    evt.preventDefault();  
    this.setState({ theme: null });  
  }  
    
  chooseTheme = (theme, evt) => {  
    evt.preventDefault();  
    this.setState({ theme });  
  }  
  render() {  
    const { theme, dropdownOpen } = this.state;  
    const themeClass = theme ? theme.toLowerCase() : 'secondary';  
      
    return (  
      <div className="d-flex flex-wrap justify-content-center align-items-center">  
        
        <span className={`h1 mb-4 w-100 text-center text-${themeClass}`}>{theme || 'Default'}</span>  
          
        <ButtonDropdown isOpen={dropdownOpen} toggle={this.toggleDropdown}>  
          <Button id="caret" color={themeClass}>{theme || 'Custom'} Theme</Button>  
          <DropdownToggle caret size="lg" color={themeClass} />  
          <DropdownMenu>  
            <DropdownItem onClick={e => this.chooseTheme('Primary', e)}>Primary Theme</DropdownItem>  
            <DropdownItem onClick={e => this.chooseTheme('Danger', e)}>Danger Theme</DropdownItem>  
            <DropdownItem onClick={e => this.chooseTheme('Success', e)}>Success Theme</DropdownItem>  
            <DropdownItem divider />  
            <DropdownItem onClick={this.resetTheme}>Default Theme</DropdownItem>  
          </DropdownMenu>  
        </ButtonDropdown>  
          
      </div>  
    );    
  }  
}  
export default ThemeSwitcher;

现在，使用以下代码片段更新src/index.js文件。

Index.js

import 'bootstrap/dist/css/bootstrap.min.css';  
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
import './index.css';  
import ThemeSwitcher from './ThemeSwitcher';  
  
ReactDOM.render(<ThemeSwitcher />, document.getElementById('root'));

React集成Bootstrap框架 – ReactJS实战教程

React添加Bootstrap

使用Bootstrap CDN

将bootstrap作为react项目依赖

使用React Bootstrap包

React Bootstrap安装

导入Bootstrap

使用reactstrap

导入Bootstrap

相关推荐

评论抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

React添加Bootstrap

使用Bootstrap CDN

将bootstrap作为react项目依赖

使用React Bootstrap包

React Bootstrap安装

导入Bootstrap

使用reactstrap

导入Bootstrap

相关推荐

评论 抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

评论抢沙发