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


	本書內容改編自【第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 原始碼及成果展示