在 React 中导入 Bootstrap 4 - JavaScript

使用 Bootstrap 4 可以快速构建具有响应式设计和现代外观的网站。React 是一个流行的 JavaScript 库，用于构建交互式和复杂的用户界面。在本篇文章中，我们将介绍如何在 React 中导入 Bootstrap 4 的 JavaScript 组件，并快速创建一个简单的界面。

步骤

步骤 1： 安装 Bootstrap 4

你可以通过 npm 包管理器安装 Bootstrap 4，命令如下:

npm install bootstrap

步骤 2： 导入 Bootstrap 样式

React 支持在组件中导入 CSS 文件。在我们的应用程序的根组件中，我们可以导入 Bootstrap 样式。在 index.js 文件中添加以下代码:

import 'bootstrap/dist/css/bootstrap.min.css';

这样我们就可以使用 Bootstrap 的样式了。

步骤 3： 导入 Bootstrap JavaScript

现在我们需要导入 Bootstrap 的 JavaScript 组件。在应用程序的根组件中导入 jQuery 和 Popper.js。Bootstrap 4 的 JavaScript 组件依赖于这两个库。在 index.js 文件中添加以下代码:

import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.min.js';

现在我们就可以在 React 组件中使用 Bootstrap 4 的 JavaScript 组件了。

步骤 4： 创建一个简单的界面

在此示例中，我们将创建一个简单的 React 组件 HelloBootstrap，使用 Bootstrap 的 jumbotron, btn, 和 table 组件。

在 HelloBootstrap.js 文件中添加以下代码：

import React from 'react';

class HelloBootstrap extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="jumbotron mt-3">
          <h1 className="display-4">Hello, Bootstrap!</h1>
          <hr className="my-4" />
          <p className="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
          <a className="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

export default HelloBootstrap;

我们使用了 container, jumbotron, 和 table 样式类创建一个简单的组件。在表格中，我们使用了 Bootstrap 的响应式表格样式。

步骤 5： 渲染组件

在 index.js 文件中，我们需要导入我们创建的组件和 React DOM。我们使用 ReactDOM.render() 方法将组件渲染到 DOM 中。

import React from 'react';
import ReactDOM from 'react-dom';
import HelloBootstrap from './HelloBootstrap';

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

步骤 6： 运行应用程序

现在我们可以运行我们的 React 应用程序了。在命令行运行命令 npm start，在浏览器中打开应用程序。

npm start

结论

在本文中，我们介绍了在 React 中导入 Bootstrap 4 的步骤。我们学习了如何使用 npm 安装 Bootstrap 4，如何导入样式和 JavaScript 文件。我们还学习了如何创建一个简单的 React 组件，并使用 Bootstrap 的样式和组件创建用户界面。希望这篇文章可以帮助你更好地使用 Bootstrap 4 和 React。