如何在 React 中使用 Bootstrap？

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

如何使用 Bootstrap-with-React

在构建响应式应用程序时，CSS 框架在市场上很有用。如果您是前端开发人员，那么 Bootstrap、Foundation 和 Bulma 这类框架对您来说并不陌生。大多数行业都使用 Bootstrap 框架。数以百万计的网站正在引导程序上运行。

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

将 Bootstrap 添加到 React 的方法

将 Bootstrap 添加到 React 应用程序主要有三种方式。我们将一一讨论它们。

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

1. 使用引导 CDN

这是在 React 应用程序中使用引导程序的最简单方法之一。 bootstrap CDN 的最大优点是不需要安装或下载。您只需要在应用的 head 部分复制并粘贴一个链接即可使其工作。下面是你需要的链接。

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

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

2. 导入 Bootstrap 作为依赖

您可能在您的应用程序中使用过一些模块捆绑器或 webpack，或者您可能听说过这些名称。这是将引导程序添加到 React 应用程序的另一种选择。您可以运行下面给出的命令并将引导程序安装为应用程序中的依赖项。

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 压缩的 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 组件中添加引导程序的另一种方法是添加一个带有内置引导程序组件的包。这些旨在与您的 React 应用程序组件一起使用。下面是两个流行包的名称。

反应引导
反应带

两者都是将 Bootstrap 与 React 应用程序一起使用的不错选择。

使用 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 目录中。在其中创建一个新文件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 = () => (
  
    
    
      
        
        
          
            
            
              
                
                  
                
              
              
              
                Home
              
              
              
                Electronics
              
              
              
                fashion
                
                  Learn React
                  
                  Men
                  Women
                  Baby and Kids
                
              
              
            
          
          
          
            
              
            
          
          
          
            
              
              
            
          
          
        
      
      
    
  
);

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 galley of type and scrambled it to make a type specimen book
        
      
    
    
  
);

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 && 
        
          
            Editor's Pick
            New
          
          
          React Tutorial
          
          {this.state.post}
          
         }
      
    );
  }
  
}

export default Post;

上面的代码片段呈现页面上的帖子。上面代码中，post的状态会被初始化为null。当 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 应用程序中包含引导程序的多种方法。我们还讨论了使用 react-bootstrap 库。警报、徽章、导航栏、下拉菜单、按钮、卡片、导航、表单等是 React 中引导库的常用组件，您将经常使用它们。其他有用的组件是表格、模态、工具提示、轮播、超大屏幕、分页、标签等。 React bootstrap 在提供布局和设计网站的用户界面方面非常有用。一旦您开始使用它，您就会了解其组件的用途。