搞搞就懂

大多數使用 redux 都是以狀態改變來驅動畫面渲染，但有時候我要的不是狀態的變化，而是想接收事件並執行後續處理，此時就可以透過 addListener 來達成。

使用 Yeoman 建立屬於自己的 React TypeScript 專案範本

使用 jest 進行單元測試的起手式

理解分別以 useRef / useState 建立組件變數時的差異，並感受各自的適用情境。

使用 ReactDOM.createPortal 可將子元素渲染到外部任意 DOM 節點中，避免子元素因父元素的樣式影響無法正常顯現，其中最常受父元素屏蔽影響的例子就是 Modal 彈跳視窗，本文簡單介紹如何實作通用性的 Modal 組件。

透過 React.cloneElement 注入新 props 至組件中的特性，賦予 Wizard 組件中各步驟子組件的操作功能。

體驗使用 FORMIK 搭配 Yup 實作表單驗證的開發模式

以實例理解來父子組件互相溝通方式及 getDerivedStateFromProps 生命週期所扮演的角色。

為代碼品質把關的重點在於檢查與修正，千萬不要奢求大家遵循所謂的規範文件來執行，因為就連自己也會很容易就犯錯了，而最好的方式就是讓開發人員無感，自動地修正一些無關緊要的錯誤，例如排版及分號等問題，真正需要提示的訊息在列出即可，因此可透過 Eslint 來解決這類問題。

透過實例理解 Hook 技術要點，實際體驗 useState 及 useEffect 操作方式及重點所在。

讓 create-react-app 產出的專案支援 IE 11

如何在 create-react-app 產出專案中依據建置環境來切分各自的組態參數

在 React 16 版本後新增錯誤邊界 (Error Boundary) 的概念，新加入 componentDidCatch 組件生命週期方法來捕捉「子組件」錯誤，當邊界內層子組件發生不預期錯誤時，不會影響到邊界外層父組件；當然也會有一些限制存在，本篇文章來針對 Error Boundary 進行說明。

在開發具有登入功能的網站時，各功能頁面將所屬不同權限用戶使用，因此進入頁面前都需進行權限檢核；這篇文章將在 React Router 4 版本中實作一個符合基本需求的 PrivateRoute 組件，讓用戶在切換路由時進行權限的檢核，達到頁面功能權限控管的需求。

筆者近期因專案需求而開始使用 React 作為前端開發框架，說真的剛接觸 ES6+ 語法時，面對完全無法腦補出的程式語意，猛然發現 JavaScript 世界真的已經變了 (其實是自己腳步慢了)，因此本篇稍微整理了一些比較常用的功能，希望能幫助讀者對這些語法有一定的熟悉度，這樣在學習任何前端框架時才不會陌生感太重。