內文簡介
＜內容簡介＞

本書內容改編自【第13屆】2021 iThome鐵人賽
Modern Web 組佳作網路系列文章
《30 天擁有一套自己手刻的 React UI 元件庫》

★本書特色：

1. 剖析並比較不同主流 React UI 元件庫
參考並剖析市面上知名並常用的 React UI 元件庫，瞭解其設計介面及元件結構，站在巨人的肩膀上來實作屬於自己的元件。

2. 從無到有的實踐
不只有理論上的比較以及分析，本書亦包涵從無到有的實踐，逐一拆解各個步驟，從零開始打造一個容易被重用的元件。

3. 涵蓋大部分常用的元件
本書涵蓋大部分常用元件的解析以及實作，讓讀者跳脫只會使用人家做好的工具的小白，甚至能夠做出根據自己需求、客製化的元件庫。

4. 同一個元件，討論不同設計方向的思路
同樣的元件在不同的專案當中會有不同的應用情境及考量，就算是同一個功能也會有不同的實作方式，因此我們不只討論如何實作，也會討論為什麼要這樣實作。

5. 為剛入門 React 但開發經驗還不足的朋友分享一些踩雷經驗
經驗不足的工程師最大的痛點就是無法考量到各種面向的優劣，不是因為他故意要設計出不好用的元件，而是因為沒有踩過雷，所以不知道這樣做會造成什麼樣的後果。本書也會分享一些踩雷經驗，幫助讀者避免走一些冤枉路。

★專家推薦：

本書中幾乎從頭開始打造了所有常見的元件，每一個都有講解設計理念、考量點以及範例程式碼，並且很重要的一點是他參考了 MUI 跟 Ant Design 這些熱門的 library，從中學習它們的設計理念以及 HTML 結構或是 React 的寫法。
推薦這本書給所有想要打造 UI library 的新手，如果你對怎麼做出一套 UI library 毫無概念，那這本書很適合你。
技術部落格 Huli's blog 站長 Huli

市面上，你很難找到一本這麼完整、幾乎各個基本元件都涵括到的書。針對不同類型的元件，作者都先整理了知名 UI 框架常見的作法，加以比較、分析後，再帶入作者的實務經驗和思考，最後才開始著手開發，讓讀者能夠跟著這樣的脈絡實作出一個又一個不同的元件。
PJCHENder 網頁開發咩腳版主、《從 Hooks 開始，讓你的網頁 React 起來》作者 | 陳柏融

作者將其工作多年的經驗毫無保留地分享，在內容中並非只是闡述做法，而是一邊帶領著讀者思考，比較分析了各個系統的做法，進而整合實作出最適合自己的 UI Library。
如果想要更了解並更掌握 React 基礎的朋友，由衷地推薦您透過這本書進行深入的學習。如果想要設計自己一套 UI Library 的朋友，不妨讓這本書帶您一起前進！
搞定學院學習社群創辦人 | 知名外商 Hewlett-Packard 資深工程師 | Jimmy Chu

對於這本著作，我只認為相見恨晚，因為我曾經也有自己建立 UI 元件庫的需求，但當時並沒有這樣的一本書讓我理解各個元件的設計細節與思考脈絡。如果你對於打造 UI Library 有興趣，千萬不能錯過這本精彩的著作！
《今晚來點 Web 前端效能優化大補帖》作者 | 莫力全 Kyle Mo

★目錄：

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 原始碼及成果展示

＜作者簡介＞

陳泰銘（Taiming）
自 2017 年開始從事前端工程師工作，擁有 B2C 以及 B2B 系統開發經驗。曾於大學期間修習師資培育學程，因此對於教學及教育充滿熱忱，擅長將複雜、艱澀的技術觀念轉化為親民的白話文並且分享。
2019 年發起「ShareBack 不藏私分享會」社群，擔任活動企劃籌備以及講師，希望建立一個不藏私、彼此教學相長的平台，讓不論本科系、非本科系的參與者從中獲得知識以及樂趣。
在 2019 iT 邦幫忙鐵人賽中，以《以經典小遊戲為主題之ReactJS應用練習》為主題，獲得Modern Web組優選。並於 2021 iThome鐵人賽中，以《30 天擁有一套自己手刻的 React UI 元件庫》為主題，獲得Modern Web組佳作。

相關分類

購物須知

寄送時間	全台灣24h到貨，遲到提供100元現金積點。全年無休，週末假日照常出貨。例外說明
送貨方式	透過宅配送達。除網頁另有特別標示外，均為常溫配送。消費者訂購之商品若經配送兩次無法送達，再經本公司以電話與Email均無法聯繫逾三天者，本公司將取消該筆訂單，並且全額退款。
送貨範圍	限台灣本島與離島地區註，部分離島地區包括連江馬祖、綠島、蘭嶼、琉球鄉…等貨件，將送至到岸船公司碼頭，需請收貨人自行至碼頭取貨。注意！收件地址請勿為郵政信箱。註：離島地區不配送安裝商品、手機門號商品、超大材商品及四機商品。
售後服務	缺掉頁更換新品
執照證號＆登錄字號	本公司食品業者登錄字號A-116606102-00000-0

關於退貨

PChome24h購物的消費者，都可以依照消費者保護法的規定，享有商品貨到次日起七天猶豫期的權益。(請留意猶豫期非試用期!!)您所退回的商品必須回復原狀（復原至商品到貨時的原始狀態並且保持完整包裝，包括商品本體、配件、贈品、保證書、原廠包裝及所有附隨文件或資料的完整性）。商品一經拆封/啟用保固，將使商品價值減損，您理解本公司將依法收取回復原狀必要之費用(若無法復原，費用將以商品價值損失計算)，請先確認商品正確、外觀可接受再行使用，以免影響您的權利，祝您購物順心。
如果您所購買商品是下列特殊商品，請留意下述退貨注意事項：
1. 易於腐敗之商品、保存期限較短之商品、客製化商品、報紙、期刊、雜誌，依據消費者保護法之規定，於收受商品後將無法享有七天猶豫期之權益且不得辦理退貨。
2. 影音商品、電腦軟體或個人衛生用品等一經拆封即無法回復原狀的商品，在您還不確定是否要辦理退貨以前，請勿拆封，一經拆封則依消費者保護法之規定，無法享有七天猶豫期之權益且不得辦理退貨。
3. 非以有形媒介提供之數位內容或一經提供即為完成之線上服務，一經您事先同意後始提供者，依消費者保護法之規定，您將無法享有七天猶豫期之權益且不得辦理退貨。
4. 組合商品於辦理退貨時，應將組合銷售商品一同退貨，若有遺失、毀損或缺件，PChome將可能要求您依照損毀程度負擔回復原狀必要之費用。
若您需辦理退貨，請利用顧客中心「查訂單」或「退訂/退款查詢」的「退訂/退貨」功能填寫申請，我們將於接獲申請之次日起1個工作天內檢視您的退貨要求，檢視完畢後將以E-mail回覆通知您，並將委託本公司指定之宅配公司，在5個工作天內透過電話與您連絡前往取回退貨商品。請您保持電話暢通，並備妥原商品及所有包裝及附件，以便於交付予本公司指定之宅配公司取回（宅配公司僅負責收件，退貨商品仍由特約廠商進行驗收），宅配公司取件後會提供簽收單據給您，請注意留存。
退回商品時，請以本公司或特約廠商寄送商品給您時所使用的外包裝（紙箱或包裝袋），原封包裝後交付給前來取件的宅配公司；如果本公司或特約廠商寄送商品給您時所使用的外包裝（紙箱或包裝袋）已經遺失，請您在商品原廠外盒之外，再以其他適當的包裝盒進行包裝，切勿任由宅配單直接粘貼在商品原廠外盒上或書寫文字。
若因您要求退貨或換貨、或因本公司無法接受您全部或部分之訂單、或因契約解除或失其效力，而需為您辦理退款事宜時，您同意本公司得代您處理發票或折讓單等相關法令所要求之單據，以利本公司為您辦理退款。
本公司收到您所提出的申請後，若經確認無誤，將依消費者保護法之相關規定，返還您已支付之對價（含信用卡交易），退款日當天會再發送E-mail通知函給您。

哎呀！不小心刻了一套 React UI 元件庫：從無到有輕鬆上手（iThome鐵人賽系列書）

搜尋更多

內文簡介

相關分類