如何在 React 项目中使用 Bootstrap（初学者指南）
Source: Dev.to
介绍
在本博客中，我们将讨论什么是 Bootstrap，如何在 React 项目中使用 Bootstrap，以及我们使用 Bootstrap 的原因。首先，了解一下 Bootstrap 是什么：
Bootstrap 是一个功能强大、特性丰富的前端工具包。可以在几分钟内从原型构建到生产环境的任何东西。 — Bootstrap 官方网站
为什么在 React 中使用 Bootstrap？
Bootstrap 通过提供可定制的预构建组件，帮助开发者更快地构建 UI 组件。对于学习 React 的初学者来说，它尤其有帮助，因为他们可以专注于 React 概念，而不必从头编写 CSS。
注意： Bootstrap 并不适合需要高度自定义 UI 的项目，但它是学习和快速原型设计的极佳资源。
先决条件
- 基本的 React 知识。
- 已在系统上安装 Node.js。
- 一个 React 项目（你可以使用 Vite 创建一个）：
npm create vite@latest project-nameSource: …
在 React 中安装 Bootstrap
1️⃣ 通过 npm 安装
在终端运行以下任意命令：
npm install bootstrap@5.3.8
# 或者，使用简写标志
npm i bootstrap@5.3.8该命令会把 Bootstrap 5.3.8（或最新版本）安装到你的项目中。你会看到类似下面截图的输出：
你可以在 package.json 中验证安装情况：
注意： 具体版本可能不同。请查看官方 Bootstrap 网站获取最新发布版本。
2️⃣ 引入 Bootstrap CSS
在 main.jsx（或你喜欢的 index.js）中添加以下导入语句：
import 'bootstrap/dist/css/bootstrap.min.css';注意： 使用 Bootstrap 与 React 时不需要 jQuery。
在 React 组件中使用 Bootstrap 类
现在您可以直接在 JSX 中使用 Bootstrap 类。示例：
function App() {
return (
<>
<div className="container">
Hello World! - Styled using Bootstrap
</div>
</>
);
}
export default App;提醒： 在 JSX 中使用
className而不是class，因为class是 JavaScript 的保留关键字。
常见错误需避免
- 使用
class而不是className。 - 在不需要时导入 Bootstrap 的 JavaScript 包。
- 将 Bootstrap 与过多其他 UI 库组合使用，可能导致样式冲突。
结论
在本指南中我们介绍了：
- Bootstrap 是什么。
- 如何在 React 项目中安装并导入它。
- 如何在 React 组件中使用 Bootstrap 类。
Bootstrap 是一个对初学者、快速原型制作以及中小型项目都很有价值的工具。虽然它可能不适用于高度自定义的设计，但它能加快 UI 开发，让你专注于核心的 React 概念。
重要链接
-
使用 Vite 创建 React 应用 – 初学者分步指南
(原始链接缺失；保留标题作为占位符)