庫存狀況
「香港二樓書店」讓您 愛上二樓●愛上書
我的購物車 加入會員 會員中心 常見問題 首頁
「香港二樓書店」邁向第一華人書店
登入 客戶評價 whatsapp 常見問題 加入會員 會員專區 現貨書籍 現貨書籍 購物流程 運費計算 我的購物車 聯絡我們 返回首頁
香港二樓書店 > 今日好書推介
二樓書籍分類
 
哎呀!不小心刻了一套 React UI 元件庫 : 從無到有輕鬆上手(iThome鐵人賽系列書)

哎呀!不小心刻了一套

沒有庫存
訂購需時10-14天
9786263332898
陳泰銘(Taiming)
博碩
2022年10月31日
217.00  元
HK$ 184.45  






ISBN:9786263332898
  • 規格:平裝 / 416頁 / 17 x 23 x 2.17 cm / 普通級 / 單色印刷 / 初版
  • 出版地:台灣


  • 電腦資訊 > 網頁開發設計 > Flash

















    本書內容改編自【第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 毫無概念,那這本書很適合你。

      技術部落格 Hulis 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 原始碼及成果展示




    其 他 著 作
    1. 哎呀!早知道就不會破版的CSS設計技巧:前端工程師防止佈局意外的必學密技(iThome鐵人賽系列書)【軟精裝】
    2. 哎呀!原來 React 這麼有趣好玩:圈叉、貪吃蛇、記憶方塊三款經典遊戲實戰練習(iThome鐵人賽系列書)