「React 讀書班」來做小費計算機 Tip Calculator

「React 讀書班」來做小費計算機 Tip Calculator

[Youtube](https://youtu.be/oVmLNvF-C5o)
[FrontendMentor](https://www.frontendmentor.io/challenges/tip-calculator-app-ugJNGbJUX)
[Github](https://github.com/kayac-chang/helloxreact-tip-calculator-app)


主講: Hello
嘉賓: 網路小兔兔們
時間: 8/8 週日 下午1500

0:00 Start
3:33 小費計算機：主題概述
5:30 Vitawind CLI：建立專案
8:36 git init
9:10 figma：設計稿
11:20 tailwind.config：設定主題色
13:55 index.css：設定背景色
15:00 image svg：設定調整 viewbox
16:30 react svgr：在 react 裡將 svg 作為元件使用
17:30 components 資料夾建立
17:55 components/icon.jsx：設定 icon components
19:00 components/index.jsx：export * from "./Icon"
19:20 components/icon.jsx：export const 變數 與 default 之間的差異
20:21 App.jsx：import Icon
20:48 components/index.jsx：集中管理 export
22:02 切版：header/Icon.Logo
25:06 切版：main，共用 Card layout 製作
27:10 元件規劃，select tip radio btn
28:35 切版：TextField - Bill
29:45 切版：TextField component 製作
31:20 React 元件：可用 Fragment 將元件包裹起來
35:32 引用字體：font weight 變更規則，font family 設定
39:10 Dollar & Person icon：components/Icon.jsx
40:15 切版：TextField Icon 設置
42:55 無障礙 Accessibility：outline 的重要性
44:25 切版：input 欄位裡的字型設定
45:40 clsx：引用 clsx library 來重構 className
47:10 切版：TextField - Number of People
47:50 React：將不同 icon 傳入元件
49:00 React 函式 cloneElement：用於複製元件、傳入 props
50:25 元件規劃：Select Tip
51:15 元件：RadioGroup，fieldset legend
53:07 React 函示 Children.map()，用 map 將元件 render
54:40 元件：Radio btn
58:45 切版：RadioGroup
1:01:05 切版：Radio btn
1:02:44 噓～～～
1:05:45 切版：sr-only，隱藏元件
1:06:10 切版：RadioGroup，grid
1:07:55 clsx
1:08:20 切版：Radio btn active style
1:09:05 切版：Radio btn 選取狀態，tailwind peer-checked
1:10:45 元件製作：Radio custom
1:13:40 切版：Radio custom，被選取時樣式
1:14:35 React：沒有 icon 時不執行 cloneElement
1:15:05 切版：Radio custom，點選時的狀態
1:15:40 React 函示 useRef()
1:16:40 function component 使用 ref 時會遇到的問題
1:17:45 切版：Radio custom，降低課程複雜度，重新製作 input 欄位
1:18:36 切版：Radio custom，onChange 時執行 function onFocus()
1:19:45 切版：Radio custom，點擊時隱藏 custom btn
1:22:00 切版：Present Card
1:24:40 切版、元件製作：DataField
1:29:25 切版：RESET btn，type reset
1:32:10 重構：component 整理
1:35:20 小費計算機：資料邏輯
1:35:55 onChangeCapture 取得子元件發生的事件
1:37:05 event target，currentTarget
1:38:00 new FormData 取得表單數值
1:39:30 defaultChecked
1:40:20 defaultValue
1:41:00 "我的習慣是，可以由 parent 處理就在 parent 處理"
1:41:50 對字串做處理
1:43:00 Select Tip，custom 值的處理，讓 custom 被點擊後反映到 value 上
1:43:50 React useState：customValue
1:45:48 debug，更換作法，將 custom 的值新增至 data
1:48:34 小費計算機：運算邏輯
1:52:35 useState：將數值拉出來
1:55:27 RESET btn：onResetCapture
1:56:50 延遲 onResetCapture 發生時間， requestAnimationFrame
1:57:35 debug，onChange - currentTarget \ target
1:58:50 RESET btn：重置 data 功能製作，setForm(歸零)
1:59:50 功能測試
2:00:40 點擊 custom 時，將 data tip 更換為 custom 的值
2:02:20 Q & A
2:03:05 Q：input 可否直接從 radio 更改為 number？
2:03:50 Q：label 與 input 是如何搭配的？
2:04:35 Q：現有專案該如何安裝 vitawind？
2:05:40 Q：可以沒有 label 嗎？
2:06:35 Q：ring 跟 border 有差嗎？
2:07:25 Q：會有 RWD 部分嗎？
2:08:10 Q：甚麼是 react 原生語法？