如何将Bootstrap与React一起使用

如何将Bootstrap与React一起使用

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

当涉及到构建响应式应用程序时，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最好的一点是不需要安装或下载。你只需要在你的应用程序的头部复制和粘贴一个链接，就可以使它发挥作用。下面是你需要的链接。

integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"

crossorigin="anonymous">

如果你的应用程序需要JavaScript组件和bootstrap，那么在页面底部放置

这些片段将被添加到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(, 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(, 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(, 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 = () => (

Search

);

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 = () => (

Account not activated.

Lorem Ipsum

Lorem Ipsum, Lagos

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

Lorem Ipsum

);

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¶s=4&format=text')

.then(response => this.setState({ post: response.data }));

}

render() {

return (

{ this.state.post &&

}

);

}

}

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 = () => (

);

export default App;

总结

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