[筆記] 哎呀！不小心刻了一套 React UI 元件庫 1 – 開發環境和 Button

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Button 按鈕元件的重點，並筆記下開發環境架設所需。

---

開發環境

1. 書中原先是採用 js、prop-types、styled-components、create-react-app 來開發。我決定改用 TypeScript + Vite + React，並補上 eslint 和 prettier 來確保程式碼的閱讀品質。
2. 在 styled-components 中，變數需要加上 $ 才能在 styled, css 等 styled-components 所提供的方法中使用

---

[ Repo ]：https://github.com/andy922200/practice-storybook-react

---

Button 元件

1. 顯示的文字當作 React 的 children ( Vue 的匿名 slot )
2. 屬性
   1. variant：按鈕的類型， 像是 contained, outline…
   2. btnColor：顏色，像是 primary, hex 色號
   3. startIcon：文字前方圖示
   4. endIcon：文字後方圖示
   5. isLoading：載入中狀態
   6. isDisabled：禁用狀態

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/d95d7a3cf222aa2f854a17f6bf8bbbd126b97677

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 88
• [筆記] 程式必修課！離散數學與演算法 – 86
• [筆記] 程式必修課！離散數學與演算法 – 84
• [筆記] 程式必修課！離散數學與演算法 – 83
• [筆記] 解決 Nuxt3 SSG 靜態網站生成過多 js 檔的問題