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之前，我们需要检查一些事项；
先决条件
- 检查是否已安装Node.js：这个跨平台的JavaScript运行时环境允许开发人员在web浏览器之外运行JavaScript。
使用以下命令检查Node.js是否已安装在您的电脑上：
node -v如果Node.js已安装，您将在终端上看到类似于以下的输出。
如果未安装，您可以查看来自https://nodejs.org/en/的下载指南。
- 检查是否已安装React：您将使用React来创建功能，而Bootstrap负责格式化。
使用以下命令检查React是否已在您的电脑上全局安装：
npm list react如果React已在您的计算机上全局安装，您将在终端上看到类似于以下的输出。
- 创建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的下拉代码：
代码有什么问题？默认情况下，Bootstrap使用class来对其分区（DIV）进行分类。然而，React使用JSX，它使用驼峰命名法。因此，您必须手动将class替换为className。
要使该代码在React上工作，我们必须将每个“class”替换为“className”。最终代码如下：
幸运的是，我们还有两种方法，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 bootstrapimport '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的原因。
