Intro

React 做為前端炙手可熱的御三家，基於它而發展的生態系套件非常多。

當建立一個 Angular 專案時，它幾乎包含了製作一個完整的大型應用程序所需的每一個東西。Vue 則是其次，它是一個介於 React 和 Angular 之間的 Framework。

不同於其他已經納入固有技術選型的 Framework，React 的核心功能比較像是 Library，如果想要加上更多額外的功能，則需要靠開發人員去組裝。

因為 React 是 Library 你必需自己做工具的技術選型

正因為 React 是 Library 而不是 Framework，所以成為一名熟練的 React 開發人員需要對 Third-party React Libraries 有很好的了解。

在 React 專案開發過程中，針對專案的大小及特性，評選出適用的技術選型十分重要。理解 React 生態系相關的套件，並且分析出是否適用於預計要開發的專案，就是此次寫文的目的。

專注於 React Hooks

在設計前端網頁專案架構的過程中，我們會把經常重複出現的UI元件設計成可以共用的元件，所以 React 提供了 React Component 的概念，而 React Component 又可以用二種型式做設計：

• Class Component：使用 ES6 class 語法運作
• Function Component：使用 Function + React Hooks 運作

因為 Function Component 上手快速，且 Functional Progamming 近年來已漸漸成為開發主流趨勢，Class Component 開始漸漸被社群捨棄，所以接下來介紹的生套系套件也都會以 Function Component + React Hooks 做為主要的內容介紹。

大綱

列出未來30天要介紹的內容大綱，也歡迎大家留言討論與我分享

Create React App & Webpack

• Day 02 Create React App & Webpack
• Day 03 在 Create React App 中修改 Webpack 設定
• Day 04 使用 Create React App 的 Template

React Component & Hooks

• Day 05 React Component And Hooks
• Day 06 React Hooks - 使用 Hook 的原則
• Day 07 useState
• Day 08 useEffect 語法及使用情境
• Day 09 useEffect 實際應用
• Day 10 使用 useEffect 的 Tips
• Day 11 建立可重複在專案使用的客製化 React Hook
• Day 12 useRef
• Day 13 React.forwardRef (HOC)、useImperativeHandle
• Day 14 useId、useLayoutEffect
• Day 15 Memorized Hook - useMemo、useCallback
• Day 16 React.memo (HOC)

React 狀態管理

• Day 17 初探狀態管理 - Flux 架構 與 useReducer
• Day 18 多層級元件間的狀態管理 - Context & useContext
• Day 19 全站狀態管理的利器 - Redux (一)
• Day 20 全站狀態管理的利器 - Redux (二)
• Day 21 全站狀態管理的利器 - Redux (三)
• Day 22 Redux Middleware 基本運作原理
• Day 23 Redux 非同步 Action 解決方案 - redux-thunk
• Day 24 Redux 非同步 Action 解決方案 - redux-observable
• Day 25 更有效率撰寫 Redux - Redux Toolkit
• Day 26 zustand

React 技術選型

• Day 27 React 的 CSS 解決方案
• Day 28 React Router
• Day 29 基於 React 的前端框架
• Day 30 React 技術選型及總結

Next

接下來會介紹使用 create-react-app 來建置 React 專案，並介紹一個 React 專案會有的專案架構。

Reference

Angular vs React vs Vue.js: Which is the Best Choice for 2022?

Is React a Library or a Framework? Here's Why it Matters