COSCUP 2022

Your locale preferences have been saved. We like to think that we have excellent support for English in pretalx, but if you encounter issues or errors, please contact us!

從 react-table 初探 Headless UI
2022-07-31 , TR211
Language: 漢語

在這個議程中會介紹 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 的起手式。


Difficulty

Beginner

Target Audience

有 react 經驗者、前端工程師

See also: Slides link (440 bytes)

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