如何设置 React Bootstrap 应用程序
介绍
React-Bootstrap 是一个基于组件的库，它以纯 React 组件的形式提供原生 Bootstrap 组件。它不使用来自 CDN 的 JavaScript 源和插件，而是将所有 JavaScript 转换为 React 并将所有组件捆绑在一起。它与各种 Bootstrap 主题兼容，以提供一致的外观并保持应用程序的同质性。在本指南中，您将学习如何通过在几分钟内设置 React Bootstrap 应用程序，轻松地将 React Bootstrap 集成到任何 React 应用程序中。
创建一个空的 React 项目
导航到您想要在本地存储项目的目录，然后通过运行以下命令使用 create-react-app 创建一个新项目：
npx create-react-app react-bootstrap-app
安装 react-bootstrap
要使用 react-bootstrap 模块，请通过运行以下命令安装两个包：react-bootstrap 和 Bootstrap：
npm install react-bootstrap bootstrap
第一个包将安装所有 react-bootstrap 核心组件并将它们放在 React 的 node modules 文件夹中。从那里，您可以轻松导入任何想要使用的组件。
Bootstrap 包包含所有 Bootstrap 样式，可用于设置您的组件和其他内容的样式，例如布局、实用程序、排版等。
清理入门模板
从App.js中删除徽标、App.css及其所有导入。清除 App 组件内的入门模板。你的App.js应该如下所示：
import React from 'react';
import './App.css';
function App() {
return(
<div className="App">
</div>
)
}
export default App;
注意： 有时删除 App.css 可能会导致错误。在这种情况下，不要删除 App.css，而是将其保留为空，或者如果已删除它，请在根目录中创建一个同名的空白 CSS 文件。
设置开发服务器
在根目录中，运行：
npm start
这将启动一个本地开发服务器（通常在端口 3000），您可以在浏览器中实时看到所有更改。
导入全局样式表
要在组件中使用 Bootstrap 样式，必须在顶部导入它们。
import 'bootstrap/dist/css/bootstrap.min.css';
这样，你就可以使用所有常规 Bootstrap 类来进行布局、实用程序、排版、颜色等，这相当于在 index.html 文件中添加以下行：
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
react-bootstrap 组件不包含默认 bootstrap 样式的原因：
- 它使整个库变得轻量，没有任何预渲染问题
- 它在设计和样式方面提供了更多的可定制性
包含 Bootstrap 样式的最佳和最有效方法是始终使用 CDN。这是因为由于浏览器中的缓存，CDN 的加载速度比您的应用快得多，因此可以避免用户体验滞后。仅当您只想在少数特定组件中使用 Bootstrap 样式时才使用第一种方法。
使用 Bootstrap SASS
您还可以在主 SASS 文件中包括 Bootstrap 的源 SASS 文件，并将其导入到组件中。只需在.scss文件中包含以下行：
@import "~bootstrap/scss/bootstrap";
以及组件内部的以下内容（例如 App.js 文件）：
import './App.scss';
导入组件
让我们看一个简单快捷的例子，展示如何导入所需的组件并将它们呈现在 DOM 上。
要使用Button组件，只需通过以下任一方式从 react-bootstrap 导入它：
import Button from 'react-bootstrap/Button';
// OR
import { Button } from 'react-bootstrap';
然后在App.js中渲染此组件：
...
<Button>Click Me!</Button>
...
自定义组件
您可以轻松自定义要在应用中使用的任何 Bootstrap 主题，或者相应地重写 Bootstrap 类和变量。
创建自定义 SASS 文件并包含以下代码块：
//custom-style.scss
$theme-colors: (
"info": blueviolet,
"danger": orangered
);
然后导入 Bootstrap 来设置这些更改：
@import "~bootstrap/scss/bootstrap";
并将其像常规 SASS 文件一样导入到任何组件中：
@import "custom-style";
结论
设置 React Bootstrap 应用程序相当简单，不需要任何复杂的安装。React Bootstrap 的官方文档非常准确，不会留下任何疑问或困惑。使用基于组件的 UI 库（如 React Bootstrap）可以缩短您的开发时间，因此您可以更加专注于在应用程序中实现复杂的事件驱动功能。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~