iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

30 天擁有一套自己手刻的 React UI 元件庫 系列

雖然說市面上厲害且受歡迎的 React UI 元件庫很多,且工程師實務上也希望能遵守「不要重複造輪子」原則,但在學習的過程當中,找一些好的輪子並學著如何製造他,對於這個輪子也能夠有更深入的認識。

本次 30 天系列想挑戰解析並手刻 React UI 元件庫,包含元件介紹、解析市面上的 UI 元件庫、自己從無到有的元件設計思路與實踐,以及到目前為止自己手刻元件的經驗分享。適合的讀者設定在剛學會 React 但開發經驗還不足的朋友。

希望透過挑戰個題目,讓自己對於 React UI 元件有更深入的認識,也同時紀錄自己在這個階段的開發經驗與思維。

鐵人鍊成 | 共 30 篇文章 | 24 人訂閱 訂閱系列文 RSS系列文 團隊董事長清潔隊
DAY 1

【Day01】數據輸入元件 - Button

參賽前言 第一次參賽是 2019鐵人賽(連結),也是剛接觸 React 不久,透過那次真的覺得收穫良多。雖然參加完有種這輩子除非瘋了,不然絕不可能參加第二次的心...

2021-09-14 ‧ 由 Taiming 分享
DAY 2

【Day02】數據輸入元件 - Switch

元件介紹 Switch 元件是一個開關的選擇器。在我們表示開關狀態,或兩種狀態之間的切換時,很適合使用。根據 Antd 的說明,這個元件和 checkbox 其...

2021-09-15 ‧ 由 Taiming 分享
DAY 3

【Day03】數據輸入元件 - Radio

元件介紹 Radio 是一個單選框元件。讓我們在一組選項當中選擇其中一個選項。當我們的情境是希望用戶可以一次看到所有選項時,可以使用 Radio Button。...

2021-09-16 ‧ 由 Taiming 分享
DAY 4

【Day04】數據輸入元件 - Checkbox

元件介紹 Checkbox 是一個多選框元件。通常使用情境是在一個群組的選項當中進行多項選擇時使用。 參考設計 & 屬性分析 checked 屬性 ch...

2021-09-17 ‧ 由 Taiming 分享
DAY 5

【Day05】數據輸入元件 - Input Text / Text Field

元件介紹 Input 是一個輸入元件。通常在我們希望用戶能夠輸入一些資訊的時候會需要用到它。由於原生 html 的 input 透過 type 這個屬性的改變,...

2021-09-18 ‧ 由 Taiming 分享
DAY 6

【Day06】數據輸入元件 - FormControl

元件介紹 FormControl 讓我們可以將 form input 所需要的共同前後文特性獨立出來管理,使被 control 的子元件之間的樣式能夠保持一致性...

2021-09-19 ‧ 由 Taiming 分享
DAY 7

【Day07】數據輸入元件 - Slider

元件介紹 Slider 是一個滑動型輸入器,允許使用者在數值區間內進行選擇,選擇的值可為連續值或是離散值。 這邊不免俗的來名詞解釋一下,在 Slider 上面...

2021-09-20 ‧ 由 Taiming 分享
DAY 8

【Day08】數據輸入元件 - Rate

元件介紹 Rate 是一個評分元件。一方面可以對於評價的數據展示,另一方面可以讓人進行對評分的操作。 參考設計 & 屬性分析 因為 MUI 目前的版本...

2021-09-21 ‧ 由 Taiming 分享
DAY 9

【Day09】數據輸入元件 - Upload

元件介紹 Upload 是一個上傳元件。幫助我們能夠發佈文字、圖片、影片、檔案到後端伺服器上。 參考設計 & 屬性分析 客製化上傳元件樣式 我們原生的...

2021-09-22 ‧ 由 Taiming 分享
DAY 10

【Day10】數據展示元件 - Chip / Tag

元件介紹 Chip 元件用於標記事物的屬性、標籤或用於分類、篩選。 在 MUI 當中,這樣的元件叫做 Chip,而在 Antd 中,這樣的元件叫做 Tag,但...

2021-09-23 ‧ 由 Taiming 分享