# 1.28 React
###### tags: `React`
## 零、目錄
[TOC]

## 壹、react-bootstrap

### 一、分頁不同的CSS

1. 只有一支CSS檔案：
index.js引入index.scss
index.scss全站共同樣式 > custom.scss等個人樣式 >　bootstrap.scss
or
index.js直接引入custom.scss
custom.scss
2. 很多支CSS檔案：

### 二、不能用jQuery，要改用react-bootstrap

### 三、navbar範例介紹
* 為了要做到黏住的navbar跟footer，react專案的index.html，html、body、root的class有動

* 圖片放置的位置：
1. 放在react專案的public下的images內
1. 圖片放在public，localhost:3000代表public
2. 圖片也可以放在src內(不建議)
3. 用絕對路徑(localhost:3005/images...)不要用相對路徑(./images...)
2. 放在react專案內的src目錄下
3. 放在node的public

<img src="localhost:3005/images/news1.jpg" />

### 四、react-icons

## 貳、SCSS

[CSS轉換成SCSS的網站](https://www.sassmeister.com/)

[講義在這裡](https://github.com/eyesofkids/mfee11-react/blob/main/%E6%95%99%E6%9D%90/0127/scss-200310.md)

## 參、React整合jQuery
[講義在這裡喔](https://github.com/eyesofkids/mfee11-react/issues/13)
### 一、在JS內只有$跟_可以用在變數或函式名稱

### 二、要在元件已經產生才能使用
由於jQoery是操作真實dom，所以一定要等到元件已經渲染完畢後才能操作。也就是要componentDidMount後才能用。

### 三、用id跟useRef的差異

* id只能有一個，useRef可以多個 => 可以用在同一個頁面重複的原件上使用