React Form: Redux Form vs React Final Form vs Formik and Yup

本文會先從為何要做表單狀態管理說起,接著看目前市面上有哪些好的表單函式庫和條列挑選原則,並探討三個表單函式庫 Redux Form、React Final Form、Formik & Yup,最後做比較和總結。 為何需要做表單狀態管理?為什麼需要做表單狀態管理呢?這就要從 controlled component 和 uncontrolled component 開始談起。 在一般 HTML 的世界裡面,表單的狀態是由元件本身

Read More...

用 TypeScript 輕鬆學 Design pattern - Command Pattern

前言雖然直到最近才實際在工作上使用 TypeScript 進行開發,但是早在去年就有斷斷續續在自己的 side project 上玩玩 TypeScript,剛好後來公司讀書會在研讀經典的 Design Pattern 書籍,就索性使用 TypeScript 來製作範例,意外發現 TypeScript 在講解一些 Design Pattern 的時候非常適合,不僅能夠有類別、物件等清楚的表示,也能夠直接在網頁上做出會動的範例。 雖然這是

Read More...

從 React 原始碼看 keyPress 與 keyDown 事件

前言前陣子有個學生跑來問我一個問題,說他在寫 React 的時候分不清楚 keyPress 與 keyDown 這兩個事件,還有 keyCode 跟 charCode 這兩個東西,有時候拿得到值,有時候卻拿不到,覺得十分困惑。 我原本以為是 React 做了一些處理,所以去看了一下原始碼。後來發現 React 的確有做一些處理,但實際上這個問題跟 React 沒什麼關係,而是 keyPress 跟 keyDown 這兩個原生的 Java

Read More...

從頭打造一個簡單的 Virtual DOM

前言過年除舊佈新,剛好趁這個機會來複習一下已經是老觀念的 Virtual DOM。很多人在講到 React 的時候都一定會提到 Virtual DOM,而問到 Virtual DOM 的好處時,就會說到實際 DOM 的操作成本很貴,所以透過 Virtual DOM 可以降低成本。 你在除夕餐桌上這樣講可能沒問題,面試只講這樣應該不太好。 畢竟你最後還是會操作實體 DOM 啊,這樣說明太簡化了。 Virtual DOM 的由來可以從 MV

Read More...

用 CSS Grid 創造蒙德里安藝術

前言前陣子 netflix 上了最新一季的夜魔俠,其中的反派角色很愛在家中擺設畫作,有了藝術品襯托,壞人在我的腦海裡突然就變成看似很有深度的角色。這讓我覺得應該也該擺點畫作在家裡,看看能不能提高自己的層次。 而宅宅如我當然無法做如此的投資,不過如果能夠自己用 Web 技術產生一些藝術作品,然後投影在家中呢?應該很酷吧!然後就在 codepen 上發現了一個有趣的東西: See the Pen Randomly generate Mond

Read More...

進階 React Component Patterns 筆記(下)

前言上次我們介紹了三種 Rect Component Patterns,包含 Compound component、Render props component 與 Prop collections & getters,而今天要繼續往下介紹剩下的五個 Patterns: State Initializers State Reducer Control Props Provider Higher-order component

Read More...

進階 React Component Patterns 筆記(上)

前言前不久在 Frontend masters 看到一部影片 Advanced React Patterns,是 Paypal 的工程師 Kent C. Dodds 在某場 workshop 介紹他實作 React component 時所使用的進階 React Patterns(目前似乎要付費觀看,而他在 egghead.io 上也有一系列教學,同樣要收費就是了…),內容非常豐富扎實,若是想提供一些可高度客製化的共用元件,使用這些 P

Read More...

React 性能優化大挑戰:一次理解 Immutable data 跟 shouldComponentUpdate

前陣子正在重構公司的專案,試了一些東西之後發現自己對於 React 的渲染機制其實不太了解,不太知道 render 什麼時候會被觸發。而後來我發現不只我這樣,其實還有滿多人對這整個機制不太熟悉,因此決定寫這篇來分享自己的心得。 其實不知道怎麼優化倒還好,更慘的事情是你自以為在優化,其實卻在拖慢效能,而根本的原因就是對 React 的整個機制還不夠熟。被「優化」過的 component 反而還變慢了!這個就嚴重了。 因此,這篇文章會涵蓋到

Read More...

當 React web app 遇上 Progressive web app

先前介紹過 Progressive Web App,我們利用 vanilla js 與 css 刻出一個支援 PWA 的天氣 web app,但現在應該很少人這麼有風格的用純 JS 寫 web app,世俗如我還是會想用 React 來支援前端框架,但 React 的 configuration 就已經頗複雜,要再加上 service-worker 的設定,想想就覺得累。 好在 facebook 先前推出 create-react-ap

Read More...