# 第三週：React Hooks 進階與 AJAX 運用

- 請務必提醒講師 “錄影”
- 課程最終目標，完成 TodoList
- 基礎難度：約 2 ~ 3 週課程即可完成
- 進階難度：約 4 週課程可以完成
- 作品參考：https://works.hexschool.io/#/
- 近期活動：
- JS 工程師養成直播班：https://www.hexschool.com/courses/js-training.html
- iThome 鐵人賽：https://ithelp.ithome.com.tw/2023ironman/event

### 優秀同學作品
| # | Level | Discord | CodePen / 答案 |
|:---:|:----- |:-------:|:--------------|
| 1 | LV4 | 翔.(Ben) | [GitHub](https://github.com/ben0588/react-vite-week-2-state) / [GitHub Pages](https://ben0588.github.io/react-vite-week-2-state/) |
| 2 | LV4 | Amberhh | [Codepen](https://codepen.io/Amberhh/pen/yLGLOrd?editors=0111) |
| 3 | LV4 | stevenchang421 | [Github](https://github.com/steven4program/React-wk2) / [Gh-Page](https://steven4program.github.io/React-wk2/) |
| 14 | LV4 | smalljie | [GitHub](https://github.com/smalljie373/beverageshop/tree/main) / [GitHub Pages](https://smalljie373.github.io/beverageshop/) |
| 17 | LV4 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/yLGyNrw?editors=1111) |
| 30 | LV4 | collinkao | [Codepen](https://codepen.io/collin0825/pen/MWZYbRx) |
| 31 | Lv4 | 黃士桓 | [codeSandBox](https://codesandbox.io/p/sandbox/react-week1-forked-p2m8r2) |

## 第三週課綱核心主要介紹

- 非同步
- Promise or **Async/Await** 挑一個
- React 表單操作
- useRef 與 Bootstrap

課程 API 說明：https://todolist-api.hexschool.io/doc/#/

## Async / Await

本課程會使用 Axios 套件進行呼叫

1. 為什麼要用 Promise、Async/Await（本課程都是以 Async/Await 為主
2. Async/Await 實戰運用方法
3. Async function 的錯誤處理
4. React 中使用 Async Function
1. useEffect 中使用
2. 主動呼叫

## React 表單操作

- 表單操作技巧
- 單一元素操作
- 物件管理方式

## React useRef 運用法

- 相同的 ID 可能會存在不同的元件，可以改用 useRef 解決此問題

## 作業

Todo List API

參考課程 API，完成 TodoList 串接：https://todolist-api.hexschool.io/doc/#/

- Level 1：完成所有功能的串接
- Level 2：嘗試套版，版型不限（單頁完成）

解答連結：
- 執行範例：https://www.casper.tw/react-2023-homework/#/week3
- 原始碼：https://github.com/Wcc723/react-2023-homework/blob/main/src/pages/Week3.jsx
- 作業繳交連結：https://rpg.hexschool.com/training/37/show?embedhm=Jhf_Tn7ARt6sIkzjjcd5CQ

### 預告

最終任務：

- 設計稿：https://www.figma.com/file/pFivfS3rDX3N3u3dN9aIlx/TodoList?node-id=0%3A1
- CSS 範例：https://codepen.io/liao/pen/mdpmXKg?editors=1010
- 同時挑戰證書任務：
- 最終任務繳交 API 版：<a href="https://rpg.hexschool.com/training/37/task?type=detail&id=357" target="_top">React & API 整合證書任務</a>
- 最終任務繳交普通版：<a href="https://rpg.hexschool.com/training/37/task?type=detail&id=356" target="_top">React 證書任務</a>