鐵人檔案
雖然說市面上厲害且受歡迎的 React UI 元件庫很多，且工程師實務上也希望能遵守「不要重複造輪子」原則，但在學習的過程當中，找一些好的輪子並學著如何製造他，對於這個輪子也能夠有更深入的認識。
本次 30 天系列想挑戰解析並手刻 React UI 元件庫，包含元件介紹、解析市面上的 UI 元件庫、自己從無到有的元件設計思路與實踐，以及到目前為止自己手刻元件的經驗分享。適合的讀者設定在剛學會 React 但開發經驗還不足的朋友。
希望透過挑戰個題目，讓自己對於 React UI 元件有更深入的認識，也同時紀錄自己在這個階段的開發經驗與思維。
元件介紹 Badge 可以讓我們在其 children element 的右上角(預設位置)顯示一個小徽章，通常用來表示需要處理的訊息數量，透過醒目的視覺形式來...
元件介紹 Tooltip 是一個文字彈出提醒元件，當 active 狀態時，會顯示對該子元件描述的文字。 參考設計 & 屬性分析 位置 相對於被包覆的子...
元件介紹 Accordion 是一個可折疊/展開內容區域的元件。主要是針對顯示內容複雜或很多的頁面進行分區塊的顯示及隱藏。 參考設計 & 屬性分析 元件...
元件介紹 Card 是一個可以顯示單個主題內容及操作的元件，通常這個主題內容包含圖片、標題、描述或是一些操作。 例如在電商網站，一個商品或需要包含商品圖片、商品...
元件介紹 Carousel 是一個像旋轉木馬一樣會輪流轉的輪播元件。在一個內容空間有限的可視範圍中進行內容的輪播展示。通常適用於一組圖片或是卡片的輪播。 Car...
元件介紹 Table 顧名思義就是一個表格元件，用來整齊的顯示行列數據。 參考設計 & 屬性分析 我自己覺得 table 是一個還蠻繁瑣的元件，要組成一...
元件介紹 Infinite scroll 能在面對多筆資料時，讓捲軸滑動到底部時再載入下一頁面的資料。 由於一次性向後端取得大批的資料，對於後端的資料計算、資料...
元件介紹 Breadcrumb 是一個導航元件，用於顯示當前系統層級結構中的路徑位置，並且點擊路徑能返回之前的頁面。在系統有多個層級架構，並且希望能幫助用戶清楚...
元件介紹 Dropdown 是一個下拉選單元件，當頁面上的選項過多時，可以用這個元件來收納選項，透過滑鼠事件來觸發選單彈出，點擊選項會執行相對應的命令。 參考設...
元件介紹 Select 是一個下拉選擇器。觸發時能夠彈出一個菜單讓用戶選擇操作。 這個元件我們底層就能夠使用我們上一篇所提到的 Dropdown 來實作。 參考...
