4种在React中安装Bootstrap以创建更详细应用的方法

React是最受欢迎的JavaScript框架和库之一，用于构建单页面应用和用户界面。它通过可重用的组件构建用户界面的灵活性、开发速度以及支持性的社区是其受欢迎的原因。

然而，React必须与层叠样式表（CSS）结合使用，以使其应用程序更具视觉吸引力和可呈现性。从头开始编写CSS可能会耗费时间。

开发人员可能会花很多时间在样式上而不是React应用程序的关键功能上。好消息是，像Bootstrap这样的工具和框架可以使在React应用程序中添加CSS变得更容易。

什么是Bootstrap？

Bootstrap是一个用于前端开发的开源CSS framework。Bootstrap通过其全面的JavaScript和基于CSS的设计工具和模板，使开发人员能够创建响应式和面向移动设备的网站。

Bootstrap由Twitter创建，也由同一公司的一组工程师维护。它的源代码维护在GitHub上，社区成员可以贡献和发送错误报告和建议。截至撰写本文时，Bootstrap 5.3.0-alpha1是最新版本。

为什么要在React中使用Bootstrap？

• 节省时间：Bootstrap负责格式化，让您有更多时间专注于功能。因此，您不必担心表单或按钮的外观问题，而是关注提交按钮是否将数据发送到后端或API等领域。
• 易于使用：一旦将Bootstrap添加到您的React应用程序中，只需使用预设计的UI组件并将它们添加到您的应用程序中。
• 一致的设计：大多数应用程序会随着时间的推移而增长。如果您想吸引忠实的用户，确保您的网站具有一致的设计非常重要。Bootstrap具有一致的风格，使您的页面具有统一的外观。
• 大量可选择的模板：Bootstrap有数百个模板可供选择，包括导航栏、按钮、表单、轮播图和下拉菜单等等。
• 轻松自定义：尽管Bootstrap具有设计模板，您仍然可以根据需要自定义字体大小、颜色和其他特征。
• 社区支持：Bootstrap有广泛的文档可以帮助您入门。然而，您仍然可以依靠庞大的社区，不断添加新功能并维护这个CSS框架。
• 响应式设计：一旦将Bootstrap添加到您的React应用程序中，您可以确保您的Web应用程序在所有屏幕尺寸上都具有响应式设计。

如何在React中安装Bootstrap

React应用程序默认没有安装Bootstrap。但在探索如何在React中添加/安装Bootstrap之前，我们需要检查一些事项；

先决条件

1. 检查是否已安装Node.js：这个跨平台的JavaScript运行时环境允许开发人员在web浏览器之外运行JavaScript。

使用以下命令检查Node.js是否已安装在您的电脑上：

node -v

如果Node.js已安装，您将在终端上看到类似于以下的输出。

如果未安装，您可以查看来自https://nodejs.org/en/的下载指南。

1. 检查是否已安装React：您将使用React来创建功能，而Bootstrap负责格式化。

使用以下命令检查React是否已在您的电脑上全局安装：

npm list react

如果React已在您的计算机上全局安装，您将在终端上看到类似于以下的输出。

1. 创建React应用：您可以手动创建React应用，但这需要很多工作。为了演示目的，我们将使用create-react-app命令。按照以下步骤创建React应用：

• 安装react-create-app到您的机器上。使用以下命令：

npm install -g create-react-app

• 使用以下命令创建您的React应用：

npx create-react-app my-app

您可以将my-app替换为您喜欢的任何名称。对于我们的案例，我们将应用程序命名为react-b。

安装完成后，您的终端将显示类似的内容：

运行以下命令开始使用：

• cd react-b（使用上一步中选择的应用程序名称）
• npm start（此命令启动您的React应用程序）

现在我们可以继续下一步，向我们的React应用添加/安装Bootstrap：

NPM安装Bootstrap方法

Node.js默认安装了npm（node package manager）。您可以通过以下命令检查npm的版本：

npm -v

如果npm已安装，则会显示类似于9.2.0的输出

现在可以使用以下命令安装bootstrap：

npm install bootstrap

完成后，打开./src/index.js文件，在顶部添加以下行。

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

使用Yarn软件包管理器

与npm不同，当您安装node.js时，默认不会安装yarn。

使用以下命令安装yarn：

npm install -g yarn

此命令将全局安装yarn，因此您无需在每次创建React应用程序时安装该软件包。

运行以下命令将bootstrap添加到React：

yarn add bootstrap

完成后，打开./src/index.js文件，在顶部添加以下行。

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

您应该始终在应用程序的入口文件的顶部导入Bootstrap，然后再导入其他CSS文件。这样，在创建React应用程序时，如果需要更改模板的默认值，就可以轻松修改Bootstrap的条目。

CDN方法

通过使用内容分发网络（CDN）链接，您可以将Bootstrap添加到React中。通过添加此CDN链接，您可以在React应用程序中包含Bootstrap库，而无需下载和托管项目文件夹中的文件。按照以下步骤操作。

• 在根文件夹中导航到 .public/index.html文件
• 在标签中，添加以下标签

  

• 您需要将JavaScript依赖项添加到您的应用程序中。转到您的index.html文件的标签闭合之前，添加以下标签：

Bootstrap已成功安装到您的React应用程序中。

使用React Bootstrap软件包

到目前为止，我们讨论的方法都是针对HTML文件设计的。为了更好地理解这一点，考虑来自Bootstrap的下拉代码：

  

    下拉按钮

  

  


    
Action

    
Another action

    
Something else here

  

代码有什么问题？默认情况下，Bootstrap使用class来对其分区（DIV）进行分类。然而，React使用JSX，它使用驼峰命名法。因此，您必须手动将class替换为className。

要使该代码在React上工作，我们必须将每个“class”替换为“className”。最终代码如下：

  

    下拉按钮

  

  


    
Action

    
Another action

    
Something else here

  

幸运的是，我们还有两种方法，react-bootstrap和reactstrap，不需要手动干预。

React-bootstrap

React-bootstrap是从头开始构建的真正React组件。该库与Bootstrap核心兼容。

按照以下步骤开始使用React-bootstrap：

• 使用以下命令安装React-bootstrap：

npm install react-bootstrap bootstrap

• 在 src/index.js 或 App.js 文件中，在其他CSS文件之前添加此行代码

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

React-bootstrap允许您导入特定的组件而不是整个库。例如，如果您需要在某个组件上导入一个按钮，可以按照以下方式导入：

import { Button } from 'react-bootstrap';

Reactstrap

这是一个用于Bootstrap的React组件库。Reactstrap依赖于Bootstrap CSS框架的样式和主题。该库将正确的Bootstrap类导入到您的React应用程序中，使您的应用程序具有一致的样式。您也不需要添加Bootstrap的JavaScript文件来触发功能。

按照以下步骤将Reactstrap添加到您的React应用程序中：

• 使用以下命令安装Reactstrap：

npm install reactstrap react react-dom

• 使用以下命令导入Bootstrap：

npm install --save bootstrap

import 'bootstrap/dist/css/bootstrap.min.css';（将此行添加到app.js中）

您还可以使用CDN链接选项将Bootstrap包含在您的应用程序中。在第一步之后，转到根目录并导航到.public/index.html文件，将此行添加到标签中

 

Reactstrap允许您导入特定的组件而不是整个库。例如，如果您需要在某个组件上导入一个按钮，可以按照以下方式导入：

import { Button } from 'reactstrap';

结论

以上是一些您可以使用的方法，将Bootstrap安装到您的React应用程序中，以样式化您的Web应用程序。安装方法选择取决于个人喜好，因为最终目标是相同的。

将React与Bootstrap结合使用，可以免除在应用程序增长时跟踪所有CSS样式的痛苦。随着更多时间用于关注功能，您可以轻松高效地为应用程序设置样式。

您可以探索一些选择链接_15>选择在移动应用程序开发中使用React的原因。