[Day - 27] React Bootstrap 套件心得分享

本节大纲

• 前言
• 使用原因
• 如何使用

前言

Bootstrap 是目前很受欢迎的前端框架之一，透过 Bootstrap 提供各式各样的元件以及提供 RWD 响应式设计，可以帮助我们这些前後端工程师，更快速极容易的开发动态网页和 Web 应用。

这次想要分享在使用 React 实作专案时，其实是可以同时 import Bootstrap 及 React Bootstrap，但是 .. 为何有了 Bootstrap 还会有 React Bootstrap 呢 !? 关於这些就留到下面的章节说明吧。

使用原因

一句话简单明了 「在 React 中我们要避免直接操作实体 DOM 元素」，这句话完整地呈现了 React 的特性之一。

在目前已知的 Bootstrap 4 中，要使用某些具有互动功能的套件，其实都是透过 jQuery 撰写的，然而 jQuery 最大的操作就是会直接操作实体 DOM 元素，可想而知这是会跟 React 的初衷是有矛盾的。

然而，这就是使用 React Bootstrap 的好处，以下是整理了一些结论，其下为。

1. 符合 React 的特性，不会直接操作实体 DOM 元素。
2. 配合 React，将各式各样的元件已经 Component 化，减少整个程序码的复杂度。

如何使用

1. 首先，我们来透过npm或yarn来安装 (依照个人偏好)react-bootstrap 。
   请在 terminal 输入npm i react-bootstrap
2. 在 index.js 引入 css 样式。
   import 'bootstrap/dist/css/bootstrap.min.css';
3. 如果要撰写 SASS 的话，可透过以下方式引入 SASS 样式。
   @import "~bootstrap/scss/bootstrap";
4. 最後，在要使用的 .js 引入即可，这里有两种方式，其下为。
   1. 只 import 我要使用的import Button from 'react-bootstrap/Button';
   2. 这方式，我称为无脑 import，import { Button } from 'react-bootstrap';
5. 最後再搭配自己专案的 props 来传值，就可以开始使用 React Bootstrap 的各式各样 Component了。