回首頁  
帳號
 
關於博碩 博碩好讀 校園圖書 MOCC認證 下載教學 元學堂

博碩好讀
  新書推薦
  出版預告
  名家名著
  iT達人祕笈
 

分類索引
 

出版總覽
 

讀者服務
  徵求作者
 
首頁 >> 書籍介紹
 
 
點我可放大圖片
 
書名：哎呀!不小心刻了一套 React UI 元件庫 : 從無到有輕鬆上手（iThome鐵人賽系列書）
書號：MP22243 作者：陳泰銘(Taiming) ISBN： 978-626-333-289-8
定價：NT$650元 印刷：單色 頁數：416頁
書籍規格：17*23 上市日：2022/10/27 譯者：(無)
學習定位：初階 本書附件：無  
前往購買 >> 蝦皮購物 類別：電腦技術  
       
快速前往 快速前往        

 

 
    本書內容改編自【第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組佳作。
 
 		  
     

博碩文化客服信箱
 

[email protected]
 
文教業務團隊
台北、新北、桃園、基隆、宜蘭、花蓮、金門
汪 玉 鳳
LINE ID：0925177716
0925-177716
[email protected]		 郭 南 彤
LINE ID：rgtech101
0917-727778
[email protected]
助理分機 519
新竹、苗栗、台中、彰化、南投、雲林
林 世 昌
LINE ID：0925275775
0925-275775
[email protected]
助理分機 519		 嘉義、台南、高雄、屏東、台東、澎湖
林 月 玲
LINE ID：0926858627
0926-858627
[email protected]
助理分機 238
 
MOCC 認證小組
 
  林 雯 玲 電話：02-2696-2869 分機：623 [email protected]

 

 
 

 

博碩文化股份有限公司 DrMaster Press Co., Ltd.
台灣新北市汐止區新台五路一段112號10樓A棟
Building A, 10F, No.112, Xintai 5th Rd., Sec.1,Xizhi Dist., New Taipei City 221, Taiwan
Tel：02-2696-2869　Fax：02-2696-2867　劃撥帳號：17484299

Copyright© DrMaster Press Co., Ltd. All Rights Reserved.