# React 開發環境與 JSX

- 請務必提醒講師 “錄影”
- 課程最終目標，完成 TodoList
- 基礎難度：約 2 ~ 3 週課程即可完成
- 進階難度：約 4 週課程可以完成
- 課前建議掌握技能 [陣列方法](https://www.youtube.com/watch?v=_vFuDQ_6Xt8)

## 章節核心

- Vite 基本架構
- JSX 結構說明
- JSX 常見不同的變體
- useState 與 React 的關係

### Vite 基本結構

- src：會被編譯的程式碼
- public：不編譯的程式碼
- node_modules：專案相關延伸套件

→ 原始碼解說

→ 指令解說：

- npm run dev
- npm run build

→ **清空，建立自己第一個元件**

1. 清空 App.jsx
2. 元件就是函式，return 後方接 jsx（html）
3. 匯出元件 export default

→ 建立元件口訣

1. 使用函式建立，大寫開頭命名
2. return JSX
3. export default

> 有些設計模式會建議使用 Name Export，在本次課程均僅使用 Default Export
>

### JSX

- 為什麼要用 JSX，可以在 React 插入 `{ }` JavaScript

有什麼用？

1. 可以在 JS 環境中寫 HTML、可以在 HTML 中混寫 JS

[JSX 差異攻略](https://casper-wang.notion.site/JSX-b84a3abb593044eaa9f5a121b2b6423f?pvs=4)

1. 可以傳入變數
2. 可以進行運算
3. **可以插入多個內容**
1. 陣列手法
2. 物件手法

### React Hook

- 沒有 React Hooks 有什麼問題
- 基本 React Hooks 用法介紹
1. 點擊觸發（onClick）
2. input 輸入值（onChange）
3. 函式觸發（HandleOnChange）
- 關注點分離的寫法

怎麼練習 useState

1. 將資料轉回狀態
2. 操作狀態

## 作業：

餐點管理工具

- Level 1：將菜單轉為資料格式
- Level 2：可以重新設定菜單的庫存數量
- Level 3（挑戰）：可以重新設定品項名稱

<table>
  <thead>
    <tr>
      <th scope="col">品項</th>
      <th scope="col">描述</th>
      <th scope="col">價格</th>
      <th scope="col">庫存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>珍珠奶茶</td>
      <td><small>香濃奶茶搭配QQ珍珠</small></td>
      <td>50</td>
      <td><button>-</button>20<button>+</button></td>
    </tr>
    <tr>
      <td>冬瓜檸檬</td>
      <td><small>清新冬瓜配上新鮮檸檬</small></td>
      <td>45</td>
      <td><button>-</button>18<button>+</button></td>
    </tr>
    <tr>
      <td>翡翠檸檬</td>
      <td><small>綠茶與檸檬的完美結合</small></td>
      <td>55</td>
      <td><button>-</button>34<button>+</button></td>
    </tr>
    <tr>
      <td>四季春茶</td>
      <td><small>香醇四季春茶，回甘無比</small></td>
      <td>45</td>
      <td><button>-</button>10<button>+</button></td>
    </tr>
    <tr>
      <td>阿薩姆奶茶</td>
      <td><small>阿薩姆紅茶搭配香醇鮮奶</small></td>
      <td>50</td>
      <td><button>-</button>25<button>+</button></td>
    </tr>
    <tr>
      <td>檸檬冰茶</td>
      <td><small>檸檬與冰茶的清新組合</small></td>
      <td>45</td>
      <td><button>-</button>20<button>+</button></td>
    </tr>
    <tr>
      <td>芒果綠茶</td>
      <td><small>芒果與綠茶的獨特風味</small></td>
      <td>55</td>
      <td><button>-</button>18<button>+</button></td>
    </tr>
    <tr>
      <td>抹茶拿鐵</td>
      <td><small>抹茶與鮮奶的絕配</small></td>
      <td>60</td>
      <td><button>-</button>20<button>+</button></td>
    </tr>
  </tbody>
</table>

- 範例：https://www.casper.tw/react-2023-homework/
- 作業繳交連結：https://rpg.hexschool.com/training/37/show?embedhm=sZZepuAaSc67MOZ8MvLSmg