開源人年會 2022

您已儲存您的地區設定。若有任何問題請跟我們聯繫!

從 react-table 初探 Headless UI
年7月31日, 12:40–13:10 (Asia/Taipei), TR211
語言: 漢語

在這個議程中會介紹 Headless UI ,並且跟現有的元件開發方式比較。接著以清楚明瞭的範例,以及 react-table 這套著名的 open source 來看如何實踐 Headless UI。

簡報連結:https://showwell0120.github.io/headlessui-coscup-2022


Headless UI 是一種開發 UI 元件的機制。不像 Material UI、Ant Design 等有完整的排版系統和一致的樣式風格;headless UI 是透過依賴反轉的方式將自訂的樣式注入元件,並且只專注實作在元件的行為邏輯。

Headless UI 的主要好處是可以讓使用者自行決定外觀,不用再辛苦地覆寫樣式。開發者也能將集中火力在更進階的功能支援上。

react-table 是一套基於 Headless UI 實作的著名元件,在 GitHub 擁有1萬6千多的星星數。它讓使用 react 的開發者可以渲染各種使用情境的表格,而不用從頭開發背後的複雜邏輯,甚至可以讓其他人自行開發 plugin,打造 react-table 的開發生態圈。因此希望透過閱讀它的原始碼,一探 Headless UI 的起手式。


內容難易度

Beginner

目標聽眾族群

有 react 經驗者、前端工程師

您也可參考: Slides link (440 位元組)

在前端技術開始蓬勃發展的 2015 年,踏上歷經 6 年的 F2E 旅程。目前正要邁入下
一個6年。
現任 Migo 資深前端工程師,同時擔任 ALPHA Camp 前端課程助教。工作之餘時常
思考自己的可能性,並且化作行動嘗試各種挑戰。希望透過文章、書籍等產出
,為從事相關領域或是有興趣的人帶來幫助。