如何在 React.js 中安装引导程序？

Bootstrap 是最受欢迎的前端开源工具包之一，用于在 Web 上开发响应式、移动优先的前端项目。它包含基于 CSS 和 JavaScript 的各种类型的设计模板。它具有各种预构建组件，例如 Accordion、Alerts、Carousel、Button、Card、Breadcrumb 等。无需从头开始编写代码，而是可以使用引导模板使工作变得更容易。有多种方法可以在本地项目中使用 Bootstrap，例如使用 Bootstrap CDN 或在 React JS 中安装 bootstrap。

但是，使用 Bootstrap CDN 是将 Bootstrap 添加到项目中的一种更简单的方法。无需安装或下载任何软件包。只需将 放入文件的 部分或 react 应用程序即可添加。但是今天我们将讨论如何在 React JS 中安装 Bootstrap。

以下是安装 Bootstrap 的一些步骤：-

• 创建反应应用
• 打开终端并将目录更改为当前项目的路径
• 运行 npm（节点包管理器）安装命令，后跟包名称和版本（可选）。

安装后，只需在 React JS 文件中导入 bootstrap 依赖项即可使用 Bootstrap。在导入 Bootstrap 缩小 CSS 作为依赖项后，我们可以在 React 应用程序组件中使用内置的引导程序类。但是为了在我们的 React 应用程序中使用 Bootstrap 的 JavaScript 组件，我们必须使用 npm install 类似地安装 jquery 和 popper.js。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序。在终端中写入以下命令并按回车键。 （而不是 gfg 您可以使用您选择的文件夹名称。）

npx create-react-app gfg

步骤 2：通过输入以下命令将目录更改为项目文件夹。

cd gfg

项目结构：现在我们在我们的项目目录中。由于我们成功创建了 ReactJS，所以让我们安装所需的包。创建 React 应用程序后，我们的项目结构将类似于以下内容。

项目_结构

第 3 步：在终端中运行以下命令。请检查您是否在 React App 目录中。为了方便起见，我将F:\gfg作为我当前的工作目录，即我的 React App( gfg) 的目录。

npm install bootstrap

如果您在上面的命令中观察到我没有提到引导程序的版本。默认情况下，它将安装最新版本的引导程序。但是如果你正在学习一些教程、课程或者想在特定的引导版本中构建你的 React JS 应用程序，你可以通过在引导之后传递“@version”来实现，即npm install bootstrap@4.1  其中 4.1 是版本名称。

我们当前的工作目录是F:/gfg。 Bootstrap 现在已成功安装，您可以通过搜索node_modules文件夹中的 bootstrap 文件夹来验证。

node_modules 中的引导文件夹

您还可以观察到 package.json 文件中的一些变化，在安装 bootstrap 后，在 package.json 的依赖项部分中添加了一个条目，类似于“bootstrap”：“version”。

包.json

安装后引导内部依赖项

第 4 步：到目前为止，引导程序已成功安装在 React 应用程序中，但要使用它，我们必须将其导入 React 文件中。我正在F:\gfg\src中的index.js中导入Bootstrap 缩小 CSS 文件和Bootstrap JavaScript 缩小包文件。

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

在我们的index.js中需要上述到两个语句来导入 React 文件中的依赖项，以便在我们的 React 应用程序组件中使用引导类。

文件名：index.js

Javascript

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
 
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

说明：上面的代码可能看起来像 index.js，除了第 1 行和第 2 行之外，默认情况下，它们在创建 React App 时不会将引导程序作为依赖项导入到 index.js 中。在第 1 行和第 2 行中，我们导入了 bootstrap minified css和bootstrap javascript minified bundle 。现在我们可以在我们的 React 应用程序组件中使用引导类。

第 5 步：我们都准备好使用内置的 Bootstrap 类，但是要在我们的 react 应用程序中使用 Bootstrap 的 JavaScript 组件，我们必须安装popper.js和 jQuery。如果它们尚未安装。要同时安装jquery和popper.js ，在终端中写入以下行并按 Enter。

npm install jquery popper.js

在这种情况下，安装后类似地在你的 React JS 文件中导入这两个依赖项 index.js以下是导入这两个依赖项的语句。

import $ from 'jquery';
import Popper from 'popper.js';

完成所有这些额外更改后，您的index.js文件应如下所示

文件名：index.js

Javascript

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import $ from 'jquery';
import Popper from 'popper.js';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
 
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);
 
// If you want to start measuring performance
// in your app, pass a function to log results
// (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

第 6 步：让我们在 React 应用程序中使用简单的引导按钮。为此，我们必须 在我们的 index.js 文件中导入 bootstrap minified css 和 bootstrap javascript minified bundle 作为依赖项。并在我们的默认 index.js 文件中添加一个按钮。正如我们已经做过的那样。之后，我们必须在 App 中添加一个按钮，在App.js中添加以下代码。

文件名：App.js

Javascript

import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    

      

        
         

          Edit src/App.js and save to reload.
        
 
 
        
          Learn React
        
        
        Bootstrap button
        
    
    
  );
}
 
export default App;

运行应用程序的步骤：保存文件并通过在终端中输入以下命令来运行 npm 服务器。

npm start

输出：运行服务器后，您的输出将如下所示

输出