適用於後台系統的 UI Library - Ant Design v.s. Blueprint

基於瀏覽器的功能日漸強大與各種函式庫的支援，以網頁建立公司各種後台管理系統已經是非常常見的事。相較於前台是給…

你知道黏性元素(Sticky)與瀑布式佈局(Masonry Layout)只用 CSS 就能達到效果嗎？

TypeScript Conditional Types 應用實例

TypeScript 提供了有趣的 Conditional Types，能夠條件式的賦予 interface 欄位值的類型。本篇文章會從簡易的應用開始介紹，最終會實現以 interface…

Ant Design 3.8.4 之後版本 @ant-design/icons 的 Bundle 大小暴增的解決方法

設計一個 React Hook 達到選項惰性載入以及顯示數控制的效果

選擇一個選項讓使用者選取，幾乎是每個網站都會遇到的需求，但開發要讓使用者選取項目時，可能會遇到兩種狀況：

1. 選項屬於非同步資料，資料過多抓取時，耗時會…

使用 BlueprintJS + React Hook API + Typescript 打造後台系統高效能 Table元件

前言

React Function Component Pattern 2：用 useRef / useEffect / useCallback 封裝 callback 函數

Pure Component 是 React 中常見提升效能的方式，如果傳遞 props 給 Pure Component 時有用到 propA={{…props.A}} 或 onChange={(e) => {...}}，那有用 Pure Component 跟沒用一樣，因為每次 render 都還是會產生新的物件或函數，所以…

React Class Component 至 Function Component with Hook API 的生命週期寫法的轉換整理

主要整理 React 16.3 以後的 Lifecycle ，因此將被棄用的就不再討論了。而官方也推薦使用 Hook API 來作為開發新的頁面使用，但不建議去重寫原來的 Class Component，新的 Hook API 可能會使你原本對 React 的認知一整個翻新，但對於 React 未來的 Roadmap 而言，學習 Hook API 是勢在必行。