第0章  先備知識 – 使用React 需要知道的Javascript



第1章  什麼是「前端框架」？



第2章  認識React 和環境建置

2.1  React 從class 到function 的歷史

2.2  環境設定

2.3  建立專案與開發流程



第3章  Hello, React !

3.1  第一個React 程式 - Hello world

3.2  解析程式之前 - 談談React Virtual DOM

3.3  解析程式

3.4  JSX

3.5  React 17 之後



第4章  基礎Function Component

4.1  元件化的程式

4.2  props - 以外部參數控制元件

4.3  用useState 創造在內部控制元件的state 變數

4.4  生命週期與useEffect

4.5  React 的輸入元素事件

4.6  非控制組件與useRef / forwardRef

4.7  Custom hook

4.8  React 程式的分頁：react -router-dom

4.9  useContext - 多層component 間的state 管理與傳遞

4.10  Styled-Components： React 的CSS 解決方案



第5章  React-Developer-Tools



第6章  Flux 結構 與 React 的狀態管理方案

6.1  簡介Flux 結構與useReducer

6.2  以useContext 進行狀態管理，淺談Context 效能問題

6.3  Redux, useDispatch 與useSelector



第7章  前端專案的架構設計

7.1  元件的劃分 – 以Atomic design 為例

7.2  淺談React.js 專案結構 – 以React-starter 為例



第8章  React 進階 - 效能處理

8.1  以useMemo 避免不必要的運算

8.2  以React.memo 避免不必要的渲染

8.3  以useCallback 避免函式不必要的重新定義

8.4  以key 避免陣列元件的重複渲染

8.5  用lazy 和Suspense 實現動態載入元件



第9章  React 進階 – 其他的React

9.1  useEffect v.s useLayoutEffect

9.2  封裝forwardRef 的useImperativeHandle

9.3  Custom hook 與useDebugValue

9.4  React 中的傳送門 - createPortal

9.5  總結  

第0章  先備知識 – 使用React 需要知道的Javascript

第1章  什麼是「前端框架」？

第2章  認識React 和環境建置
2.1  React 從class 到function 的歷史
2.2  環境設定
2.3  建立專案與開發流程

第3章  Hello, React !
3.1  第一個React 程式 - Hello world
3.2  解析程式之前 - 談談React Virtual DOM
3.3  解析程式
3.4  JSX
3.5  React 17 之後

第4章  基礎Function Component
4.1  元件化的程式
4.2  props - 以外部參數控制元件
4.3  用useState 創造在內部控制元件的state 變數
4.4  生命週期與useEffect
4.5  React 的輸入元素事件
4.6  非控制組件與useRef / forwardRef
4.7  Custom hook
4.8  React 程式的分頁：react -router-dom
4.9  useContext - 多層component 間的state 管理與傳遞
4.10  Styled-Components： React 的CSS 解決方案

第5章  React-Developer-Tools

第6章  Flux 結構 與 React 的狀態管理方案
6.1  簡介Flux 結構與useReducer
6.2  以useContext 進行狀態管理，淺談Context 效能問題
6.3  Redux, useDispatch 與useSelector

第7章  前端專案的架構設計
7.1  元件的劃分 – 以Atomic design 為例
7.2  淺談React.js 專案結構 – 以React-starter 為例

第8章  React 進階 - 效能處理
8.1  以useMemo 避免不必要的運算
8.2  以React.memo 避免不必要的渲染
8.3  以useCallback 避免函式不必要的重新定義
8.4  以key 避免陣列元件的重複渲染
8.5  用lazy 和Suspense 實現動態載入元件

第9章  React 進階 – 其他的React
9.1  useEffect v.s useLayoutEffect
9.2  封裝forwardRef 的useImperativeHandle
9.3  Custom hook 與useDebugValue
9.4  React 中的傳送門 - createPortal
9.5  總結  

第0章  先備知識 – 使用React 需要知道的Javascript



第1章  什麼是「前端框架」？



第2章  認識React 和環境建置

2.1  React 從class 到function 的歷史

2.2  環境設定

2.3  建立專案與開發流程



第3章  Hello, React !

3.1  第一個React 程式 - Hello world

3.2  解析程式之前 - 談談React Virtual DOM

3.3  解析程式

3.4  JSX

3.5  React 17 之後



第4章  基礎Function Component

4.1  元件化的程式

4.2  props - 以外部參數控制元件

4.3  用useState 創造在內部控制元件的state 變數

4.4  生命週期與useEffect

4.5  React 的輸入元素事件

4.6  非控制組件與useRef / forwardRef

4.7  Custom hook

4.8  React 程式的分頁：react -router-dom

4.9  useContext - 多層component 間的state 管理與傳遞

4.10  Styled-Components： React 的CSS 解決方案



第5章  React-Developer-Tools



第6章  Flux 結構 與 React 的狀態管理方案

6.1  簡介Flux 結構與useReducer

6.2  以useContext 進行狀態管理，淺談Context 效能問題

6.3  Redux, useDispatch 與useSelector



第7章  前端專案的架構設計

7.1  元件的劃分 – 以Atomic design 為例

7.2  淺談React.js 專案結構 – 以React-starter 為例



第8章  React 進階 - 效能處理

8.1  以useMemo 避免不必要的運算

8.2  以React.memo 避免不必要的渲染

8.3  以useCallback 避免函式不必要的重新定義

8.4  以key 避免陣列元件的重複渲染

8.5  用lazy 和Suspense 實現動態載入元件



第9章  React 進階 – 其他的React

9.1  useEffect v.s useLayoutEffect

9.2  封裝forwardRef 的useImperativeHandle

9.3  Custom hook 與useDebugValue

9.4  React 中的傳送門 - createPortal

9.5  總結