React-Bootstrap & react-bootstrap

React加上bootstrap之兩種方法與實作

React欲使用Bootstrap框架，有兩種方式：

1. 直接在React專案上，加入Bootstrap
2. 使用react-bootstrap套件

差異：

相比於 bootstrap，react-bootstrap寫法更為精簡。

直接在React專案上，加入Bootstrap

Bootstrap官網：https://getbootstrap.com/

在終端機輸入下方指令，建立一個React專案
(react-with-bootstrap是自行命名的資料夾名稱)

npx create-react-app react-with-bootstrap

cd react-with-bootstrap

安裝 bootstrap

npm install bootstrap

在 App.js 檔案引用

import 'bootstrap/dist/css/bootstrap.css'

去Bootstrap官網找範例，複製到App.js中

class改用className

inline style必須使用 JavaScript 的物件格式

補充：

有遇到字串中出現 ' 時，可以採用兩種寫法 (參考這篇)

範例參考：

使用react-bootstrap套件

React Bootstrap官網：https://react-bootstrap.netlify.app/

沿用前面建立的react-with-bootstrap專案

安裝react-bootstrap

npm install react-bootstrap

React-bootstrap的使用方式跟bootstrap的概念一樣，不同的是這個套件將bootstrap包成了component，使用時加載component。

如果要App.js引用 button，有兩種方式：

import Butoon from 'react-bootstrap/Button'

import {Button} from 'react-bootstrap'

Button variant可以在屬性上加上主題色

Navbars variant可以填light, dark

有關 Grid

外層用<Container>包起來，與純bootstrap架構一樣

react-bootstrap & bootstrap

寫法比對：

react-bootstrap & bootstrap

參考教學影片
React Bootstrap Crash Course 2022 | React JS UI Libraries | React Tutorial 2022
React Bootstrap Tutorial

[實作]React搭配Bootstrap

使用「直接在React專案上，加入Bootstrap」實作。

建立專案

npx create-react-app react-practice-employees

cd react-practice-employees

安裝 bootstrap

npm install bootstrap

移除預設的 class 還有內容，加上Navbar範例並修改樣式

加上圖片修改設定，程式碼如下：

參考 Grid Form Button 加上程式碼如下：

非完整App.js

參考 Tables 加上資料表，程式碼如下：

非完整App.js

目前看起來算完整，不過目前沒有實作增添新增資料的功能。

筆者加上新增資料的功能，附上此練習參考的 GitHub 檔案連結🔗 ，專案資料夾名稱：react-practice-employees 。