【電子書】哎呀！不小心刻了一套 React UI 元件庫：從無到有輕鬆上手（iThome鐵人賽系列書）
活動訊息
用閱讀開啟視野，讓書成為照亮你人生的光
【金石堂選書】本月推薦您這些好書👉 快來看看
內容簡介
本書內容改編自【第13屆】2021 iThome鐵人賽
Modern Web 組佳作網路系列文章
《30 天擁有一套自己手刻的 React UI 元件庫》
本書特色
1. 剖析並比較不同主流 React UI 元件庫
參考並剖析市面上知名並常用的 React UI 元件庫，瞭解其設計介面及元件結構，站在巨人的肩膀上來實作屬於自己的元件。
2. 從無到有的實踐
不只有理論上的比較以及分析，本書亦包涵從無到有的實踐，逐一拆解各個步驟，從零開始打造一個容易被重用的元件。
3. 涵蓋大部分常用的元件
本書涵蓋大部分常用元件的解析以及實作，讓讀者跳脫只會使用人家做好的工具的小白，甚至能夠做出根據自己需求、客製化的元件庫。
4. 同一個元件，討論不同設計方向的思路
同樣的元件在不同的專案當中會有不同的應用情境及考量，就算是同一個功能也會有不同的實作方式，因此我們不只討論如何實作，也會討論為什麼要這樣實作。
5. 為剛入門 React 但開發經驗還不足的朋友分享一些踩雷經驗
經驗不足的工程師最大的痛點就是無法考量到各種面向的優劣，不是因為他故意要設計出不好用的元件，而是因為沒有踩過雷，所以不知道這樣做會造成什麼樣的後果。本書也會分享一些踩雷經驗，幫助讀者避免走一些冤枉路。
序／導讀
目錄
CHAPTER 0 準備 UI 元件開發環境
0.1 情境案例
0.2 Storybook 簡介
CHAPTER 1 數據輸入元件 - Button
1.1 元件介紹
1.2 參考設計 & 屬性分析
1.3 介面設計
1.4 元件實作
1.5 原始碼及成果展示
CHAPTER 2 數據輸入元件 - Switch
2.1 元件介紹
2.2 參考設計 & 屬性分析
2.3 介面設計
2.4 元件實作
2.5 原始碼及成果展示
CHAPTER 3 數據輸入元件 - Radio
3.1 元件介紹
3.2 參考設計 & 屬性分析
3.3 介面設計
3.4 元件實作
3.5 原始碼及成果展示
CHAPTER 4 數據輸入元件 - Checkbox
4.1 元件介紹
4.2 參考設計 & 屬性分析
4.3 介面設計
4.4 元件實作
4.5 原始碼及成果展示
CHAPTER 5 數據輸入元件 - Input Text / Text Field
5.1 元件介紹
5.2 參考設計 & 屬性分析
5.3 介面設計
5.4 元件實作
5.5 原始碼及成果展示
CHAPTER 6 數據輸入元件 - FormControl
6.1 元件介紹
6.2 參考設計 & 屬性分析
6.3 介面設計
6.4 元件實作
6.5 原始碼及成果展示
CHAPTER 7 數據輸入元件 - Slider
7.1 元件介紹
7.2 參考設計 & 屬性分析
7.3 介面設計
7.4 元件實作
7.5 原始碼及成果展示
CHAPTER 8 數據輸入元件 - Rate
8.1 元件介紹
8.2 參考設計 & 屬性分析
8.3 介面設計
8.4 元件實作
8.5 原始碼及成果展示
CHAPTER 9 數據輸入元件 - Upload
9.1 元件介紹
9.2 參考設計 & 屬性分析
9.3 介面設計
9.4 元件實作
9.5 原始碼及成果展示
CHAPTER 10 數據展示元件 - Chip / Tag
10.1 元件介紹
10.2 參考設計 & 屬性分析
10.3 介面設計
10.4 元件實作
10.5 原始碼及成果展示
CHAPTER 11 數據展示元件 - Badge
11.1 元件介紹
11.2 參考設計 & 屬性分析
11.3 介面設計
11.4 元件實作
11.5 原始碼及成果展示
CHAPTER 12 數據展示元件 - Tooltip
12.1 元件介紹
12.2 參考設計 & 屬性分析
12.3 介面設計
12.4 元件實作
12.5 原始碼及成果展示
CHAPTER 13 數據展示元件 - Accordion/Collapse 摺疊面板
13.1 元件介紹
13.2 參考設計 & 屬性分析
13.3 介面設計
13.4 元件實作
13.5 原始碼及成果展示
CHAPTER 14 數據展示元件 - Card
14.1 元件介紹
14.2 參考設計 & 屬性分析
14.3 介面設計
14.4 元件實作
14.5 原始碼及成果展示
CHAPTER 15 數據展示元件 - Carousel
15.1 元件介紹
15.2 參考設計 & 屬性分析
15.3 介面設計
15.4 元件實作
15.5 原始碼及成果展示
CHAPTER 16 數據展示元件 - Table
16.1 元件介紹
16.2 參考設計 & 屬性分析
16.3 介面設計
16.4 元件實作
16.5 原始碼及成果展示
CHAPTER 17 數據展示元件 - Infinite scroll
17.1 元件介紹
17.2 參考設計 & 屬性分析
17.3 介面設計
17.4 元件實作
17.5 原始碼及成果展示
CHAPTER 18 導航元件 - Breadcrumb
18.1 元件介紹
18.2 參考設計 & 屬性分析
18.3 介面設計
18.4 元件實作
18.5 原始碼及成果展示
CHAPTER 19 導航元件 - Dropdown
19.1 元件介紹
19.2 參考設計 & 屬性分析
19.3 介面設計
19.4 元件實作
19.5 原始碼及成果展示
CHAPTER 20 導航元件 - Select
20.1 元件介紹
20.2 參考設計 & 屬性分析
20.3 介面設計
20.4 元件實作
20.5 原始碼及成果展示
CHAPTER 21 導航元件 - Drawer
21.1 元件介紹
21.2 參考設計 & 屬性分析
21.3 介面設計
21.4 元件實作
21.5 原始碼及成果展示
CHAPTER 22 導航元件 - Tabs
22.1 元件介紹
22.2 參考設計 & 屬性分析
22.3 介面設計
22.4 元件實作
22.5 原始碼及成果展示
CHAPTER 23 導航元件 - Pagination
23.1 元件介紹
23.2 參考設計 & 屬性分析
23.3 介面設計
23.4 元件實作
23.5 原始碼及成果展示
CHAPTER 24 反饋元件 - Spin
24.1 元件介紹
24.2 參考設計 & 屬性分析
24.3 介面設計
24.4 元件實作
24.5 原始碼及成果展示
CHAPTER 25 反饋元件 - Skeleton
25.1 元件介紹
25.2 參考設計 & 屬性分析
25.3 介面設計
25.4 元件實作
25.5 原始碼及成果展示
CHAPTER 26 反饋元件 - Progress bar
26.1 元件介紹
26.2 參考設計 & 屬性分析
26.3 介面設計
26.4 元件實作
26.5 原始碼及成果展示
CHAPTER 27 反饋元件 - Progress circle
27.1 元件介紹
27.2 參考設計 & 屬性分析
27.3 介面設計
27.4 元件實作
27.5 原始碼及成果展示
CHAPTER 28 反饋元件 - Modal
28.1 元件介紹
28.2 參考設計 & 屬性分析
28.3 介面設計
28.4 元件實作
28.5 原始碼及成果展示
CHAPTER 29 反饋元件 - Toast
29.1 元件介紹
29.2 參考設計 & 屬性分析
29.3 介面設計
29.4 元件實作
29.5 原始碼及成果展示
CHAPTER 30 打包元件庫並發佈至 NPM
30.1 建立和開發元件庫專案
30.2 調整檔案結構
30.3 打包成一個可輸出的元件庫
30.4 在本地測試打包後的元件
30.5 發佈至NPM
30.6 原始碼及成果展示
訂購/退換貨須知
加入金石堂 LINE 官方帳號『完成綁定』，隨時掌握出貨動態：
提醒您！！
金石堂及銀行均不會請您操作ATM! 如接獲電話要求您前往ATM提款機，請不要聽從指示，以免受騙上當！
購買須知：
使用金石堂電子書服務即為同意金石堂電子書服務條款。
電子書分為「金石堂(線上閱讀+APP)」及「Readmoo(兌換碼)」兩種：
- 請至會員中心→電子書服務「我的e書櫃」領取複製『兌換碼』至電子書服務商Readmoo進行兌換。
退換貨須知：
- 因版權保護，您在金石堂所購買的電子書僅能以金石堂專屬的閱讀軟體開啟閱讀，無法以其他閱讀器或直接下載檔案。
- 依據「消費者保護法」第19條及行政院消費者保護處公告之「通訊交易解除權合理例外情事適用準則」，非以有形媒介提供之數位內容或一經提供即為完成之線上服務，經消費者事先同意始提供。（如：電子書、電子雜誌、下載版軟體、虛擬商品…等），不受「網購服務需提供七日鑑賞期」的限制。為維護您的權益，建議您先使用「試閱」功能後再付款購買。
商品評價