本文會先從為何要做表單狀態管理說起，接著看目前市面上有哪些好的表單函式庫和條列挑選原則，並探討三個表單函式庫 Redux Form、React Final Form、Formik & Yup，最後做比較和總結。 為何需要做表單狀態管理？為什麼需要做表單狀態管理呢？這就要從 controlled component 和 uncontrolled component 開始談起。 在一般 HTML 的世界裡面，表單的狀態是由元件本身
前言雖然直到最近才實際在工作上使用 TypeScript 進行開發，但是早在去年就有斷斷續續在自己的 side project 上玩玩 TypeScript，剛好後來公司讀書會在研讀經典的 Design Pattern 書籍，就索性使用 TypeScript 來製作範例，意外發現 TypeScript 在講解一些 Design Pattern 的時候非常適合，不僅能夠有類別、物件等清楚的表示，也能夠直接在網頁上做出會動的範例。 雖然這是
前言前陣子有個學生跑來問我一個問題，說他在寫 React 的時候分不清楚 keyPress 與 keyDown 這兩個事件，還有 keyCode 跟 charCode 這兩個東西，有時候拿得到值，有時候卻拿不到，覺得十分困惑。 我原本以為是 React 做了一些處理，所以去看了一下原始碼。後來發現 React 的確有做一些處理，但實際上這個問題跟 React 沒什麼關係，而是 keyPress 跟 keyDown 這兩個原生的 Java
前言過年除舊佈新，剛好趁這個機會來複習一下已經是老觀念的 Virtual DOM。很多人在講到 React 的時候都一定會提到 Virtual DOM，而問到 Virtual DOM 的好處時，就會說到實際 DOM 的操作成本很貴，所以透過 Virtual DOM 可以降低成本。 你在除夕餐桌上這樣講可能沒問題，面試只講這樣應該不太好。 畢竟你最後還是會操作實體 DOM 啊，這樣說明太簡化了。 Virtual DOM 的由來可以從 MV
前言前陣子 netflix 上了最新一季的夜魔俠，其中的反派角色很愛在家中擺設畫作，有了藝術品襯托，壞人在我的腦海裡突然就變成看似很有深度的角色。這讓我覺得應該也該擺點畫作在家裡，看看能不能提高自己的層次。 而宅宅如我當然無法做如此的投資，不過如果能夠自己用 Web 技術產生一些藝術作品，然後投影在家中呢？應該很酷吧！然後就在 codepen 上發現了一個有趣的東西： See the Pen Randomly generate Mond
前言上次我們介紹了三種 Rect Component Patterns，包含 Compound component、Render props component 與 Prop collections & getters，而今天要繼續往下介紹剩下的五個 Patterns: State Initializers State Reducer Control Props Provider Higher-order component
前言前不久在 Frontend masters 看到一部影片 Advanced React Patterns，是 Paypal 的工程師 Kent C. Dodds 在某場 workshop 介紹他實作 React component 時所使用的進階 React Patterns（目前似乎要付費觀看，而他在 egghead.io 上也有一系列教學，同樣要收費就是了…），內容非常豐富扎實，若是想提供一些可高度客製化的共用元件，使用這些 P
前陣子正在重構公司的專案，試了一些東西之後發現自己對於 React 的渲染機制其實不太了解，不太知道 render 什麼時候會被觸發。而後來我發現不只我這樣，其實還有滿多人對這整個機制不太熟悉，因此決定寫這篇來分享自己的心得。 其實不知道怎麼優化倒還好，更慘的事情是你自以為在優化，其實卻在拖慢效能，而根本的原因就是對 React 的整個機制還不夠熟。被「優化」過的 component 反而還變慢了！這個就嚴重了。 因此，這篇文章會涵蓋到
先前介紹過 Progressive Web App，我們利用 vanilla js 與 css 刻出一個支援 PWA 的天氣 web app，但現在應該很少人這麼有風格的用純 JS 寫 web app，世俗如我還是會想用 React 來支援前端框架，但 React 的 configuration 就已經頗複雜，要再加上 service-worker 的設定，想想就覺得累。 好在 facebook 先前推出 create-react-ap