React-Redux 🚀 火箭 🚀 快速教學 🤘

這是一個 React-Redux 快速教學，讓你快速體驗從無到有建構一個 React Single Page App.

手把手從無到有

前情提要 💬

❗❗❗ 請注意，此堂課為快速教學，故需要必備一些基本技能如下：

1. JavaScript 基本能力
2. React 基本概念 (ex: Component 導向)
3. JavaScript 模組化
4. npm / yarn 基本觀念
5. Webpack 基本概念
6. Babel 基本概念
7. Node.js 基本觀念

Q：WTF 😧，這些必備技能我都有了的話我為什麼還要學？

A：欸豆 😅，我會教你怎麼把這些東西組裝起來！

課程導覽 📚

1. Class-01 基礎建設
   • npm / yarn
   • Webpack
   • Babel
   • React-hot-loader
   • create-react-app
2. Class-02 React 的奧義
   • props / state
   • this / bind
   • React 心法
   • propTypes
   • Life cycle
3. Redux 從開始到放棄
   • Flux
   • Redux
   • redux-devtools-extension
   • Middleware (redux-thunk)
4. React-Redux 與他們的小夥伴們
   • High-Order Component
   • Async / Await
   • Class decorator
   • react-router
   • history
5. React 16 新功能與特性複習

Lab 導覽 🔧

1. Class-01
   1. lab-01

      CDN 引用 React, ReactDOM, Babel-browser，並用 React Component 寫出 Hello World.

   2. lab-02

      利用 npm 引用模組的 libs 並建構 webpack 與 Babel 開發環境

   3. lab-03

      加上 react-hot-loader 加強開發環境

2. Class-02
   1. lab-01

      Component 傳 props 與設定 state.

   2. lab-02

      重用 React component.

   3. lab-03

      propTypes 檢查 props 與預設 props.

   4. lab-04

      Component 的生命週期

3. Class-03
   1. lab-01

      Flux 資料流範例

   2. lab-02

      Redux 資料流範例

   3. lab-03

      Redux + redux-devtools-extension 監聽 action

   4. lab-04

      Redux + Middleware 處理非同步事件

4. Class-04
   1. lab-01

      HOC 範例

   2. lab-02

      React-router: Router, Route, parameter, parameter validation 範例

   3. lab-03

      React-router: Link, NavLink, Nested Route, Switch, Redirect, Prompt 範例

   4. lab-04

      history 範例

5. Class-05

沒有

投影片導覽 📃

1. Class-01 基礎建設
2. Class-02 React 的奧義
3. Class-03 Redux 從開始到放棄
4. Class-04 React-Redux 與他們的小夥伴們
5. React 16 新功能與特性複習

其他的呢？

教材使用

• Reveal.js 作為 web slides.
• RawGit 來 serve Github 上的 slides.

其他

此課程用於 Xuenn SBK team 內部訓練！:metal::metal::metal: