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

上一章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="http://img.readke.com/220412/2245244111-1.jpg">< /script> < script src="http://img.readke.com/220412/2245245419-2.jpg">< /script> < script src="http://img.readke.com/220412/22452444F-3.jpg">< /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文件。
【React集成Bootstrap框架 – ReactJS实战教程】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'));