如何将Bootstrap与React一起使用

我们都知道React的流行，以及这个库是如何让前端开发者的开发任务变得更容易的。React是最受欢迎的前端库，用于构建应用程序的用户界面。各行业正在慢慢减少使用jQuery和DOM库来构建他们的应用程序。

如何将Bootstrap与React一起使用？

当涉及到构建响应式应用程序时，CSS框架在市场上很有用。如果你从事前端开发工作，那么Bootstrap、Foundation和Bulma一类的框架对你来说并不陌生。大多数行业都使用Bootstrap框架。数以百万计的网站都在Bootstrap上运行。

在这篇博客中，我们将讨论如何使用React和Bootstrap，如何将bootstrap添加到React应用中。如何安装React bootstrap包以及如何在React应用中使用它。让我们从它开始…

在React中添加Bootstrap的方法

主要有三种方法将Bootstrap添加到React应用中。我们将逐一讨论它们。

使用Bootstrap CDN。
在React中导入Bootstrap作为一个依赖项
安装React Bootstrap包（如bootstrap-react或reactstrap）。

1.使用Bootstrap CDN

这是在你的React应用中使用bootstrap的最简单的方法之一。关于bootstrap CDN最好的一点是不需要安装或下载。你只需要在你的应用程序的头部复制和粘贴一个链接，就可以使它发挥作用。下面是你需要的链接。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
crossorigin="anonymous">

如果你的应用程序需要JavaScript组件和bootstrap，那么在页面底部放置 <script>标签，就在关闭的</body>标签之前。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" 
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" 
crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" 
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" 
crossorigin="anonymous"></script>

这些片段将被添加到public/index.html页面。

2.将Bootstrap作为一个依赖项导入

你可能已经在你的应用程序中使用了一些模块捆绑器或webpack，或者你可能听说过这些名字。这个是将bootstrap添加到你的React应用程序的另一个选择。你可以运行下面给出的命令，将bootstrap作为一个依赖项安装在你的应用程序中。

npm install bootstrap

安装完成后，在你的应用程序的条目的JavaScript文件中添加这个。下面是src文件夹里面的index.js文件。

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

在上面的代码的最上面一行，我们已经导入了Bootstrap minified CSS作为第一个依赖关系。有了这个，我们就可以在我们的React组件中使用Bootstrap类。你还需要同时安装jQuery和popper.js。下面是安装这两个的命令。

npm install jquery popper.js

在index.js文件中做如下修改，以添加新的依赖性。

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Dropdown />, document.getElementById('root'));
registerServiceWorker();

3.安装React Bootstrap包

在你的React组件中添加bootstrap的另一种方法是添加一个内置bootstrap组件的包。这些都是为了与你的React应用组件一起工作。下面是两个流行的包的名称。

react-bootstrap
reactstrap

两者都是在React应用中使用Bootstrap的好选择。

用Bootstrap创建React应用程序

使用下面的命令，在你的机器上创建一个React应用程序。

create-react-app my-app

现在，运行下面的命令来安装下面的依赖性。

yarn add axios bootstrap reactstrap

在这里，我们把Axios作为一个依赖项安装，它是一个JavaScript库，用于从node.js或XMLHttpRequests的浏览器中进行HTTP请求。Axios允许你从BaconIpsum的JSON API中获取帖子。

现在要使用这个Bootstrap最小化的CSS文件，你需要在src/index.js文件中做一些修改，以包括它将看起来像下面给出的东西。

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

现在在你项目的src目录下创建一个文件夹component。创建一个新的文件Header.js，并在其中写下下面的代码。

import React from 'react';
import logo from '../logo.svg';

import {
  Container, Row, Col, Form, Input, Button, Navbar, Nav,
  NavbarBrand, NavLink, NavItem, UncontrolledDropdown,
  DropdownToggle, DropdownMenu, DropdownItem
} from 'reactstrap';

const AVATAR = 'https://www.gravatar.com/avatar/429e504af19fc3e1cfa5c4326ef3394c?s=240&d=mm&r=pg';

const Header = () => (
  <header>
    <Navbar fixed="top" color="light" light expand="xs" className="border-bottom border-gray bg-white" style={{ height: 80 }}>

      <Container>
        <Row noGutters className="position-relative w-100 align-items-center">

          <Col className="d-none d-lg-flex justify-content-start">
            <Nav className="mrx-auto" navbar>

              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">
                  <img src={AVATAR} alt="avatar" className="img-fluid rounded-circle" style={{ width: 36 }} />
                </NavLink>
              </NavItem>

              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">Home</NavLink>
              </NavItem>

              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">Electronics</NavLink>
              </NavItem>

              <UncontrolledDropdown className="d-flex align-items-center" nav inNavbar>
                <DropdownToggle className="font-weight-bold" nav caret>fashion</DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem className="font-weight-bold text-secondary text-uppercase" header disabled>Learn React</DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>Men</DropdownItem>
                  <DropdownItem>Women</DropdownItem>
                  <DropdownItem>Baby and Kids</DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>

            </Nav>
          </Col>

          <Col className="d-flex justify-content-xs-start justify-content-lg-center">
            <NavbarBrand className="d-inline-block p-0" href="/" style={{ width: 80 }}>
              <img src={logo} alt="logo" className="position-relative img-fluid" />
            </NavbarBrand>
          </Col>

          <Col className="d-none d-lg-flex justify-content-end">
            <Form inline>
              <Input type="search" className="mr-3" placeholder="Search React Courses" />
              <Button type="submit" color="info" outline>Search</Button>
            </Form>
          </Col>

        </Row>
      </Container>

    </Navbar>
  </header>
);

export default Header;

在上面的代码中，我们已经包含了导航菜单。现在让我们在组件目录下创建一个LeftCard.js文件，内容如下。

import React, { Fragment } from 'react';

import {
  Button, UncontrolledAlert, Card, CardImg, CardBody,
  CardTitle, CardSubtitle, CardText
} from 'reactstrap';

const BANNER = 'https://i.imgur.com/CaKdFMq.jpg';

const LeftCard = () => (
  <Fragment>

    <UncontrolledAlert color="danger" className="d-none d-lg-block">
      <strong>Account not activated.</strong>
    </UncontrolledAlert>

    <Card>
      <CardImg top width="100%" src={BANNER} alt="banner" />
      <CardBody>
        <CardTitle className="h3 mb-2 pt-2 font-weight-bold text-secondary">Lorem Ipsum</CardTitle>
        <CardSubtitle className="text-secondary mb-3 font-weight-light text-uppercase" style={{ fontSize: '0.8rem' }}>Lorem Ipsum, Lagos</CardSubtitle>
        <CardText className="text-secondary mb-4" style={{ fontSize: '0.75rem' }}>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gallery of type and scrambled it to make a type specimen book</CardText>
        <Button color="success" className="font-weight-bold">Lorem Ipsum</Button>
      </CardBody>
    </Card>

  </Fragment>
);

export default LeftCard;

现在在组件目录下创建一个Post.js文件，并添加下面给出的片段…

import React, { Component, Fragment } from 'react';
import axios from 'axios';
import { Badge } from 'reactstrap';

class Post extends Component {

  state = { post: null }

  componentDidMount() {
    axios.get('https://baconipsum.com/api/?type=meat-and-filler&paras=4&format=text')
      .then(response => this.setState({ post: response.data }));
  }

  render() {
    return (
      <Fragment>
        { this.state.post && <div className="position-relative">

          <span className="d-block pb-2 mb-0 h6 text-uppercase text-info font-weight-bold">
            Editor's Pick
            <Badge pill color="success" className="text-uppercase px-2 py-1 ml-3 mb-1 align-middle" style={{ fontSize: '0.75rem' }}>New</Badge>
          </span>

          <span className="d-block pb-4 h2 text-dark border-bottom border-gray">React Tutorial</span>

          <article className="pt-5 text-secondary text-justify" style={{ fontSize: '0.9rem', whiteSpace: 'pre-line' }}>{this.state.post}</article>

        </div> }
      </Fragment>
    );
  }

}

export default Post;

上面的代码片段在页面上渲染了帖子。在上面的代码中，帖子的状态将被初始化为空。当React页面渲染和组件加载时，我们使用Axios从BaconIpsum JSON API中获取四个段落。之后，post属性的状态将被改变。

在src/App.js文件中做最后的修改，看起来像下面给出的那样…

import React, { Fragment } from 'react';
import axios from 'axios';
import { Container, Row, Col } from 'reactstrap';

import Post from './components/Post';
import Header from './components/Header';
import LeftCard from './components/LeftCard';

const App = () => (
  <Fragment>

    <Header />

    <main className="my-5 py-5">
      <Container className="px-0">
        <Row noGutters className="pt-2 pt-md-5 w-100 px-4 px-xl-0 position-relative">

          <Col xs={{ order: 2 }} md={{ size: 4, order: 1 }} tag="aside" className="pb-5 mb-5 pb-md-0 mb-md-0 mx-auto mx-md-0">
            <SideCard />
          </Col>

          <Col xs={{ order: 1 }} md={{ size: 7, offset: 1 }} tag="section" className="py-5 mb-5 py-md-0 mb-md-0">
            <Post />
          </Col>

        </Row>
      </Container>
    </main>

  </Fragment>
);

export default App;

总结

所以我们已经讨论了在React应用中包含bootstrap的多种方法。我们还讨论了使用react-bootstrap库。警报、徽章、导航条、下拉、按钮、卡片、导航、表单等是React中bootstrap库的常见组件，你会经常使用。其他有用的组件有表格、模版、工具提示、旋转木马、滚动条、分页、标签等。React bootstrap在给你的网站布局和设计用户界面方面非常有用。一旦你开始使用它，你就会知道其组件的用途。