有多种方法可以在react项目中添加引导程序。
使用引导CDN
安装引导程序依赖项
使用React Bootstrap软件包
这是添加引导程序的最简单方法。与其他CDN一样，我们可以在react项目的index.html中添加引导CDN。
以下是react CDN网址之一
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
如果需要引导程序的JavaScript组件，则应在index.html中添加jquery popper.js。
有了这个，完整的index.html将看起来像-
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"> <linkrel="manifest"href="%PUBLIC_URL%/manifest.json"> <linkrel="shortcut icon"href="%PUBLIC_URL%/favicon.ico"> <linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <title>React App hello</title> </head> <body> <divid="root"></div> <scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"> </script> <scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"> </script> </body> </html>
npm install bootstrap npm install jquery popper.js
现在我们可以通过导入将它们添加到react项目的index.js文件中
import'bootstrap/dist/css/bootstrap.min.css';
import $ from'jquery';
importPopperfrom'popper.js';
import'bootstrap/dist/js/bootstrap.bundle.min';
importReactfrom'react';
importReactDOMfrom'react-dom';
import'./index.css';
importAppfrom'./App';
importregisterServiceWorkerfrom'./registerServiceWorker';
ReactDOM.render(<Dropdown/>,document.getElementById('root'));
registerServiceWorker();有两个选项可以包含react引导程序包
反应引导
反应带
用npm安装
npm install –save react-bootstrap
该软件包当前仅服务于bootstrap 3，并且正在开发中以支持最新的bootstrap。
Include it in App.jsx file import'bootstrap/dist/css/bootstrap.css'; import'bootstrap/dist/css/bootstrap-theme.css';
安装完成后，我们可以直接在任何组件文件中使用引导程序组件。
import{SplitButton,MenuItem}from'react-bootstrap';
import React, { Component} from 'react';
import { Button } from 'react-bootstrap';
class HelloWorld extends Component {
render() {
return
<div>
<Button bsStyle="primary">Hello World Primary</Button>
<Button bsStyle="success">Hello World Success</Button>
<Button bsStyle="danger">Hello World Danger</Button>
</div>
}
}
export default HelloWorld;npm install –save reactstrap
reactstrapsuppors bootstrap 4版本，这意味着它比react-bootstrap最新
由于引导程序是最流行的css框架，将它与react配合使用时，我们可以非常快速地创建移动优先Web应用程序。
我们可以从reactstrap导入与其他react组件相似的组件
import {
Button,UncontrolledAlert,Card,CardImg,CardBody,
CardTitle,CardSubtitle,CardText
} from'reactstrap';Reactstrap对模式窗口有很好的支持，它是React的首选库。
还有其他库，例如CoreUI-React，react-UI，React-Bootstrap-Table