# 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`