# Lesson 8
### React複習& Firebase上架網頁
---
### Rundown
- React複習
- Firebase上架網頁
---
# React複習
---
## class component vs functional component
1. 不用render 直接return
2. 不用建構式,不用this
3. useState, useEffect..等系列hooks可用
---
## props&state
props : 遺產 properties
state : 狀態
---
## props&state
```
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
```
### =>in hooks
```
const { videoId, imgUrl, title } = props.data
const [shopData, setShopData] = React.useState({})
```
---
## 生命週期

---
## didMount & didUpdate
```
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
```
```
React.useEffect(() => {
reorganizeByShop()
}, []) // didMount
React.useEffect(() => {
imDoing()
}, [isShow]) // didUpdate
```
---

---

---
# Firebase
hosting :上傳網站
---

---

---

---

---

---

---

---

---

---
`npm install -g firebase-tools`
`sudo npm install -g firebase-tools`

---

---
`firebase login`
Already logged in as <你的帳號@mail.com>
---
`firebase init`

---

---

---

---
## run 在本機
`firebase serve`
---
## 注意路徑
> 根目錄會被改到public
> 需要調整檔案到對應的位置

---
## 上傳
- 可能會有一點點延遲
`firebase deploy`

{"metaMigratedAt":"2023-06-15T10:13:54.573Z","metaMigratedFrom":"YAML","title":"Lesson 8","breaks":true,"slideOptions":"{\"theme\":\"white\"}","contributors":"[{\"id\":\"75570e91-2c90-4c97-8261-0a2434a026a2\",\"add\":7325,\"del\":5143}]"}