如何设置 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）可以缩短您的开发时间，因此您可以更加专注于在应用程序中实现复杂的事件驱动功能。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文