哎呀!不小心刻了一套 React UI 元件庫 : 從無到有輕鬆上手(iThome鐵人賽系列書) (電子書)

電子書哎呀!不小心刻了一套 React UI 元件庫 : 從無到有輕鬆上手(iThome鐵人賽系列書) (電子書)

出版日期:
2022/10/26
88
490431
此商品享ShopBack 0.5%回饋;不適用於誠品分潤計劃、美安等現金回饋機制
本書內容改編自【第13屆】2021 iThome鐵人賽Modern Web 組佳作網路系列文章──《30 天擁有一套自己手刻的 React UI 元件庫》


《本書特色》

1. 剖析並比較不同主流 React UI 元件庫
參考並剖析市面上知名並常用的 React UI 元件庫,瞭解其設計介面及

內容簡介

本書內容改編自【第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 元件開發環境
CHAPTER 1 數據輸入元件 - Button
CHAPTER 2 數據輸入元件 - Switch
CHAPTER 3 數據輸入元件 - Radio
CHAPTER 4 數據輸入元件 - Checkbox
CHAPTER 5 數據輸入元件 - Input Text / Text Field
CHAPTER 6 數據輸入元件 - FormControl
CHAPTER 7 數據輸入元件 - Slider
CHAPTER 8 數據輸入元件 - Rate
CHAPTER 9 數據輸入元件 - Upload
CHAPTER 10 數據展示元件 - Chip / Tag
CHAPTER 11 數據展示元件 - Badge
CHAPTER 12 數據展示元件 - Tooltip
CHAPTER 13 數據展示元件 - Accordion/Collapse 摺疊面板
CHAPTER 14 數據展示元件 - Card
CHAPTER 15 數據展示元件 - Carousel
CHAPTER 16 數據展示元件 - Table
CHAPTER 17 數據展示元件 - Infinite scroll
CHAPTER 18 導航元件 - Breadcrumb
CHAPTER 19 導航元件 - Dropdown
CHAPTER 20 導航元件 - Select
CHAPTER 21 導航元件 - Drawer
CHAPTER 22 導航元件 - Tabs
CHAPTER 23 導航元件 - Pagination
CHAPTER 24 反饋元件 - Spin
CHAPTER 25 反饋元件 - Skeleton
CHAPTER 26 反饋元件 - Progress bar
CHAPTER 27 反饋元件 - Progress circle
CHAPTER 28 反饋元件 - Modal
CHAPTER 29 反饋元件 - Toast
CHAPTER 30 打包元件庫並發佈至 NPM

作者介紹

陳泰銘(Taiming)

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

規格

誠品貨碼 / 2682703883005
ISBN13 / 9786263332898
ISBN10 /
EAN貨碼 / 9786263333284
頁數 / 416
語言 / 1:中文/繁體
級別 / N:無
檔案格式 / PDF(25MB)
檔案匯出格式 / PDF 提供 Adobe DRM
TTS朗讀 / EPUB不提供TTS朗讀

退貨說明

退貨須知:

  1. 依照消費者保護法的規定,您享有商品貨到次日起七天猶豫期(含例假日)的權益(請注意!猶豫期非試用期),辦理退貨之商品必須是全新狀態(不得有刮傷、破損、受潮)且需完整(包含全部商品、配件、原廠內外包裝、贈品及所有附隨文件或資料的完整性等)。
  2. 請您以送貨廠商使用之包裝紙箱將退貨商品包裝妥當,若原紙箱已遺失,請另使用其他紙箱包覆於商品原廠包裝之外,切勿直接於原廠包裝上黏貼紙張或書寫文字。若原廠包裝損毀將可能被認定為已逾越檢查商品之必要程度,本公司得依毀損程度扣除回復原狀必要費用(整新費)後退費;請您先確認商品正確、外觀可接受,再行拆封,以免影響您的權利;若為產品瑕疵,本公司接受退貨。

依「通訊交易解除權合理例外情事適用準則」,下列商品不適用七日猶豫期,除產品本身有瑕疵外,不接受退貨:

  1. 易於腐敗、保存期限較短或解約時即將逾期。(如:生鮮蔬果、乳製品、冷凍冷藏食材、蛋糕)
  2. 依消費者要求所為之客製化給付。(如:客製印章、鋼筆刻字)
  3. 報紙、期刊或雜誌。
  4. 經消費者拆封之影音商品或電腦軟體。
  5. 非以有形媒介提供之數位內容或一經提供即為完成之線上服務,經消費者事先同意始提供。(如:電子書)
  6. 已拆封之個人衛生用品。(如:內衣褲、襪類、褲襪、刮鬍刀、除毛刀等貼身用品)
  7. 國際航空客運服務。

若您退貨時有下列情形,可能被認定已逾越檢查商品之必要程度而須負擔為回復原狀必要費用(整新費),或影響您的退貨權利,請您在拆封前決定是否要退貨:

  1. 以數位或電磁紀錄形式儲存或著作權相關之商品(包含但不限於CD、VCD、DVD、電腦軟體等) 包裝已拆封者(除運送用之包裝以外)。
  2. 耗材(包含但不限於墨水匣、碳粉匣、紙張、筆類墨水、清潔劑補充包等)之商品包裝已拆封者(除運送用之包裝以外)。
  3. 衣飾鞋類/寢具/織品(包含但不限於衣褲、鞋子、襪子、泳裝、床單、被套、填充玩具)或之商品缺件(含購買商品、附件、內外包裝、贈品等)或經剪標或下水或商品有不可回復之髒污或磨損痕跡。
  4. 食品、美容/保養用品、內衣褲等消耗性或個人衛生用品、商品銷售頁面上特別載明之商品已拆封者(除運送用之包裝外一切包裝、包括但不限於瓶蓋、封口、封膜等接觸商品內容之包裝部分)或已非全新狀態(外觀有刮傷、破損、受潮等)與包裝不完整(缺少商品、附件、原廠外盒、保護袋、配件紙箱、保麗龍、隨貨文件、贈品等)。
  5. 家電、3C、畫作、電子閱讀器等商品,除商品本身有瑕疵外,退回之商品已拆封(除運送用之包裝外一切包裝、包括但不限於封膜等接觸商品內容之包裝部分、移除封條、拆除吊牌、拆除貼膠或標籤等情形)或已非全新狀態(外觀有刮傷、破損、受潮等)與包裝不完整(缺少商品、附件、原廠外盒、保護袋、配件紙箱、保麗龍、隨貨文件、贈品等)。
  6. 退貨程序請參閱【客服專區→常見問題→誠品線上退貨退款】之說明。
付款/配送