---
# System prepended metadata

title: 【前端速成】React 快速入門｜Tiktok工程師帶你入門前端｜布魯斯前端
tags: [Video Note]

---

# [【前端速成】React 快速入門｜Tiktok工程師帶你入門前端｜布魯斯前端](https://www.youtube.com/watch?v=zqV7NIFGDrQ&t=6116s&ab_channel=%E5%B8%83%E9%AD%AF%E6%96%AF%E5%89%8D%E7%AB%AF)
- [x] 開頭
- [x] 正片開始+PPT介紹
- [x] 什麼是React？
- [x] 為什麼需要React？
- [x] 學習前需要先哪些JS能力？
- [x] 什麼是Hook？
- [x] 需要Hook的三個理由
- [x] State Hook & Effect Hook
- [x] 備忘錄APP介面
- [x] React進階學習路線
- [x] 開始coding＋建立專案＋講解
- [x] 前端專案目錄規劃
- [x] 開始切版
- [x] 規劃state & props
- [x] useState教學＋事件
- [x] useEffect教學＋Fetch API
- [x] useRef
- [x] 問答環節
---
## 筆記
* [JSX](https://zh-hant.reactjs.org/docs/introducing-jsx.html)
* [async & await （Fetch API）](https://ithelp.ithome.com.tw/articles/10263449?sc=rss.iron)
* [useState, useEffect](https://medium.com/hannah-lin/react-hook-%E7%AD%86%E8%A8%98-%E5%BE%9E%E6%9C%80%E5%9F%BA%E6%9C%AC%E7%9A%84-hook-%E9%96%8B%E5%A7%8B-usestate-useeffect-fee6582d8725)
* [useRef](https://medium.com/hannah-lin/react-hook-%E7%AD%86%E8%A8%98-useref-c628cbf0d7fb)

介面
![](https://i.imgur.com/qnQL62D.png)
新增
![](https://i.imgur.com/2GdeWfo.png)
刪除
![](https://i.imgur.com/ARFg8AB.png)

