如何在 ReactJS 中使用 Bootstrap？

我们可以通过以下方式在 ReactJS 项目中使用引导程序。

1. 使用 Bootstrap CDN：在 React 应用程序中使用 Bootstrap 最简单的方法是使用 BootstrapCDN。无需下载或安装。只需在应用的 head 部分提供一个链接，如下例所示。

4.1.0/css/bootstrap.min.css”
integrity=”sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4″
crossorigin=”anonymous”>

编程需要懂一点英语

2. 使用 react-bootstrap 库：如果您使用构建工具或 webpack 之类的包捆绑器，这是将 Bootstrap 应用到 React 程序的推荐方法。 Bootstrap 必须作为应用程序的依赖项安装。

npm install bootstrap

3. 安装 React Bootstrap 包：将 Bootstrap 集成到 React 应用程序的第三种选择是使用包含可用作 React 组件的重建 Bootstrap 组件的包。以下是两个最常见的软件包：

反应引导
反应带

在下面的示例中，我们实现了在 ReactJS 项目中使用 Bootstrap 的第一种方式。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```

项目结构：它将如下所示。

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React, { useState } from 'react';
  
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0
    }
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick = () => {
    console.log("hi")
    alert("The value of counter is :" + this.state.counter)
    this.setState({ counter: this.state.counter + 1 })
  }
  
  render() {
    return (
      
        
          Hello From GFG!
          This is a simple Example of using 
          bootstrap in React.
  
          
          the Component is called jumbotron in bootstrap.
  
          
            Click me
          
  
        
      
    );
  }
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：