---
# System prepended metadata

title: 第二週
tags: [React 直播班 - 2024 冬季班]

---

# 第二週

本頁連結：https://hackmd.io/bVkAgvVTRke6qyPsPo_SJw

## 課前說明

- 上週的挑戰抽出名單
- 本週新的活動！

## 本週目標

- Async/Await
- 課程 API
- Vite 環境說明
    - ESM
    - 外部套件 axios
    - 在 Vite 環境中


## 主題一：非同步與 Axios

知識點：事件佇列

- JS 是屬於同步語言，基本上都是依序執行
- 但非同步的行為會先放在事件佇列內，等所有程式執行完後才執行
- 補圖：事件佇列
    
![image](https://hackmd.io/_uploads/rJQNaeS8Jl.png)

    

### Promise

- 過去非同步可能會使用 callback 進行串接
- 非同步程式碼更有一致的結構性
- then, catch 用法說明
- Promise 結構，[參考](https://wcc723.github.io/development/2020/02/16/all-new-promise/
)
   


### async/await

- `async function` 可以用來定義一個非同步函式，讓這個函式本體是屬於非同步，但其內部以“**同步的方式運行非同步**”程式碼。
- `await` 則是可以暫停非同步函式的運行（中止 `Promise` 的運行），直到非同步進入 `resolve` 或 `reject`，當接收完回傳值後繼續非同步函式的運行。
- Async / Await：[參考](https://www.casper.tw/development/2020/10/16/async-await/)
    

## 主題二：課程 API 說明

課程準備
- 申請：https://ec-course-api.hexschool.io/
- API 文件：https://hexschool.github.io/ec-courses-api-swaggerDoc/
- MDN 上的 Cookie：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie
- 為什麼要使用 API？

串接 AJAX
- 串接示範
- 需補上誰是「管理者」、「一般用戶」
- 現場示範驗證說明

        
        

#### 考題：哪些 API 是後台？哪些 API 屬於前台

情境詢問：以下 API 可以在哪邊找到

- 用戶將一個品項加入購物車
- 管理者新增一個品項
- 管理者查看特定的訂單內容
- 用戶建立訂單
- 用戶結帳

## 主題三：Vite 環境說明

### 為什麼要用 Vite

- 不需從零建構環境，幾個選項後快速開發
- 快速建立「應用服務」 -> 單頁式應用程式
- 整合性的工具，開發更容易
    - 從 CDN 改為 NPM 統一管理

### Vite 環境建立

```html
npm create vite@latest
```

✔ Project name: … vite-react
✔ Select a framework: › React
✔ Select a variant: › JavaScript

運行方式：

- dev：運行開發環境
- build：編譯程式碼並釋出

資料夾結構說明：

- public：公開的檔案資料夾，可以放入不會被編譯的內容，裡面除了 index.html 外，其他都是直接被搬移的
- src：主要的開發環境


### ESM

- 關鍵點：如何匯出影響如何匯入
- ESMoudle 在實戰中的運用情境
    - 預設匯出：單一模組、元件開發
    - 具名匯出：函式庫、自訂方法集

> **哪邊會用到？**
1. JavaScript 模組化
2. React 的元件拆分管理
> 

![image](https://hackmd.io/_uploads/SkxeCxS8yx.png)


### 外部套件

1. npm 網站上搜尋：https://www.npmjs.com/
    - axios：https://www.npmjs.com/package/axios
2. 依據形式，決定哪一種方式進行匯入
    
    ```html
    import axios from 'axios'
    ```
    

### 在 React 中操作 API

> 示範如何將 Async Function 的程式碼移動到 React 中
> 

額外補充：React 表單操作

```jsx
const handleInputChange = (e) => {
  const { name, value } = e.target
  setFormData({
    ...formData,
    [name]: value,
  })
}

```

關於 input 操作可以觀看這幾個章節：
![image](https://hackmd.io/_uploads/HytZCxrL1l.png)


## 本週額外挑戰

- 預習章節閱讀：[連結](https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962883_12062543649513962890)
    - React 元件基礎
    - React hooks
- 作業：
    - 作業連結：https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962871_12062543649513962892?tid=12062543649528289302
    - 助教作業解說（週日上午 10:00）
    ![image](https://hackmd.io/_uploads/BkXeKpsSke.png)
- 團隊任務：
    - https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962878_12062543649513962902

## 隱藏挑戰：第二週作業追追追～

本次共兩個挑戰，兩個挑戰各 3 杯星巴克（名單不重複）


## Part 1 基本挑戰
課程 API 資料建構，完成以下條件並分享至 Discord 頻道，分享內容：
```
序號：0
我是 xxx
作品主題：卡伯3C商店
類型： React 直播班 or React 專題班
連結： HackMD or 課程 API 連結
心得（可選）：
```


#### React 直播班
1. 參考課程 API [文件](https://hexschool.github.io/ec-courses-api-swaggerDoc/#/%E7%AE%A1%E7%90%86%E6%8E%A7%E5%88%B6%E5%8F%B0%20-%20%E7%94%A2%E5%93%81%20(Products)/get_v2_api__api_path__admin_products)，其中的產品資料，結構如下：
    ```
    [
    {
      "category": "衣服2",
      "content": "這是內容",
      "description": "Sit down please 名設計師設計",
      "id": "-L9tH8jxVb2Ka_DYPwng",
      "is_enabled": 1,
      "origin_price": 100,
      "price": 600,
      "title": "[賣]動物園造型衣服3",
      "unit": "個",
      "num": 1,
      "imageUrl": "主圖網址",
      "imagesUrl": [
        "圖片網址一",
        "圖片網址二",
        "圖片網址三",
        "圖片網址四",
        "圖片網址五"
          ]
        }
      ]
    ```
3. 建構至少 10 筆資料，類型不限（美食、實體物品、旅遊皆可）
4. 將資料獨立儲存至 HackMD ([範例](/6os4PVPqRRKx-Uu0Gwu-rw)，可不需要 `id`、`num` 欄位) 或直接上傳至課程 [API](https://ec-course-api.hexschool.io/v2/api/casper-hexschool/products/all) 中
5. 審核條件：
    - 上傳至 HackMD、課程 API 均可
    - 必要包含 "圖片" 連結，可由 [Unsplash](https://unsplash.com/) 網站搜集
        - 圖片建議尺寸寬度小於 1024
    - 至少包 10 筆資料
    - 可使用 AI 服務協助產出
    - **不可複製其他人資料內容（依據上傳時間而定，違者將取消最終作業批改資格）**


#### 框架專題班

框架專題班同學，可使用：
1. 上述 React 直播班的資料集
2. 或依據專題主題建構資料集

接下來將資料獨立儲存至 HackMD ([範例](/6os4PVPqRRKx-Uu0Gwu-rw)，可不需要 `id`、`num` 欄位) 或直接上傳至課程 [API](https://ec-course-api.hexschool.io/v2/api/casper-hexschool/products/all) 中

審核條件：
- 團隊每個人獨立上傳至 Discord 貼文中
- 上傳至 HackMD、團隊 API、課程 均可
- 必要包含 "圖片" 連結，可由 [Unsplash](https://unsplash.com/) 網站搜集
- 至少包 10 筆資料
- 可使用 AI 服務協助產出
- **不可複製其他團隊、其他同學的資料內容（依據上傳時間而定，違者將取消最終作業批改資格）**

## Part 2 加值挑戰

完成課程 API 上傳，並將作業連結貼至 Discord 之中

```
序號：0
我是 xxx
作品主題：卡伯3C商店
連結： 課程 API 作業連結
心得（可選）：
```
審核條件：
- 必要使用課程 API
- 可以 Part 1 挑戰同時進行
- 至少包 10 筆資料，且內容描述完整（不可以看起來論述都不齊全）
- 必要包含 "圖片" 連結，可由 [Unsplash](https://unsplash.com/) 網站搜集
- 可使用 AI 服務協助產出
- **不可複製其他人資料內容（依據上傳時間而定，違者將取消最終作業批改資格）**
