iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
0
自我挑戰組

為自己而寫,前端工程師之 30 天心得分享系列 第 27

[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. 首先,我們來透過npmyarn來安裝 (依照個人偏好)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了。

上一篇
[Day - 26] JavaScript 學習筆記 (六)
下一篇
[Day - 28] React Hooks useState 學習筆記
系列文
為自己而寫,前端工程師之 30 天心得分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言