快速學習 React.js 和 Redux 的基礎到實踐

如果我完全沒有前端的經驗，可以上這堂課程嗎？

可以，我們會盡可能的顧慮到沒有前端經驗的學生！當然，如果您在哪一個階段卡住了，可以隨時詢問我們，老師會在三天內給回覆你的問題。

本堂課的四大學習色

• 一次包含初、中、高三個階段課程，上完可直接進入業界實戰
• 一次購買永久體驗，您可以自由掌握進度，無限次觀看複習
• 有問題老師幫你解答，學員的問題在提出後三天內會得到老師回覆

為什麼學習 ES6 和 React？

JavaScript 是目前最受歡迎的程式語言之一，近幾年更做了大幅度的翻新，新版的 JavaScript ECMAScript 第六版 ( 簡稱 ES6 ) 語法比起以往更為強大、簡潔，這堂課協助已經學過 JavaScript 基礎的朋友，升級程式開發技能至 ES6。讓您準備好面對未來的挑戰，立於不敗之地！

為什麼要用 React 開發？

jQuery 雖然是目前多數前端工程師的必備工具，但在中大型專案的開發上，容易產生不易管理及效能降低的缺點。所以越來越多的網路公司都轉向 React.js 來開發前端組件，除了性能因素外，很大一部分原因是因為用 jQuery 去寫很複雜的 DOM 操作，後期代碼會變得越來越難維護。另外根據 State of JS 調查，顯示 React.js 的開發者滿意度最高，達到 92％。

React.js 本身的優勢？

1. 由 Facebook 開發維護，具備未來性與擴展性，不會隨意消失或停止更新
2. React.js 擁有 Virtual DOM，能夠減少操作，提高效能，讓您能專注於 UI 設計
3. React Native 使得 Web 應用的邏輯可以直接使用在 iOS 或 Android 等移動端客戶
4. 有足夠多的使用和測試場景來保證框架本身幾乎沒有 bug 和錯誤
5. 模組化開發，架構良好，寫出來的東西易於維護，修改快速
6. 良好優化的程式碼，讓系統載入與反應速度皆快

有哪些公司使用 React 開發

1. Facebook
2. Airbnb
3. Netflix

為什麼選 Redux？

坊間的 React.js 課程中，對於資料流的概念僅止於 React.js 中的簡易單向資料流，然而單向資料流只能應付小規模的應用程式，因此我們選用市場上歷經千錘百煉的 Redux 來解決資料模型的問題，Redux 的概念簡單易上手，不但功能強大、維護性高且除錯容易，能為開發者省下大量的時間和維護成本。

授課進行與學習方式

【電腦螢幕側錄＋動畫投影片】

線上學習方便大家可以利用空檔進行學習。本堂課講師將用螢幕側錄的方式，一步步帶你實際操作，在重點的部分，會以動畫投影片的方式講解，幫助學員更容易上手。

【問題回覆】

若學員在學習上有遇到任何問題，我們也歡迎學員詢問，講師講在三天內回覆。

課程章節表

單元 1 - 實戰React：課程簡介

• 你能從這堂課學會什麼
• 這堂課適合怎樣的學習者
• 為何你應該上這堂課

單元 2 - Hello React App：環境設定與安裝

• 介紹Node.js
• 安裝Node.js
• npm介紹
• 建立專案與開發環境
• 啟動開發環境
• 安裝Visual Studio Code
• 以VSCode修改專案
• 所見即所得的修改結果

單元 3 - 認識React：過去的問題與現在的解法

• 網頁應用程式技術背景知識介紹：DOM Tree
• 以JavaScript操作DOM Tree及衍生的問題
• 何謂笨拙的DOM Tree操作
• 何謂功能驅動開發
• 功能驅動開發的問題
• 優化DOM Tree操作概述
• 何謂畫面元件驅動開發(Componetn Driven Development)
• 畫面元件驅動開發的優點
• 何謂虛擬DOM Tree (Virtual DOM Tree)
• 圖解虛擬DOM Tree更新流程
• 讓React幫你畫DOM Tree

單元 4 - ECMAScript介紹：發展淵源與新語法

• ECMA Script發展歷史
• ES6新語法：變數與常數
• var與let比較
• 其實你不需要變數
• ES6新語法：樣版字串
• 真的假的？短路求值
• 短路求值常見應用
• 短路求值：函式呼叫防呆
• 短路求值：縮減程式碼
• ES6新語法：其餘參數
• ES6新語法：陣列展開語法

單元 5 - 物件、類別與模組

• 物件介紹
• 類別介紹
• 類別建構式
• 類別中的this概述
• 物件封裝
• ES6靜態屬性寫法與問題
• ES7靜態屬性寫法與用法
• 類別繼承寫法與用法
• ES6模組系統寫法與用法

單元 6 - 解構賦值

• 解構賦值解構賦值基礎語法
• 解構賦值指派式 
• 解構賦值完整語法 
• 解構賦值簡縮語法 
• 解構賦值陣列解構

單元 7 - 預設值

• 預設值的必要性及設計思維
• 預設值寫法：短路求值
• 預設值解法：ES6新語法
• 解構賦值的預設值

單元 8 - 箭頭函式

• 箭頭函式基本語法
• 箭頭函式完整語法
• 箭頭函式的this綁定特色

單元 9 - 異步運算

• 何謂同步運算
• 何謂異步運算
• Promise規格介紹
• Promise類語法
• Promise結果處理
• Promise三態
• Promise錯誤處理
• 連鎖Promise處理

單元 10 - 瀏覽器支援

• 瀏覽器不支援ES6
• 填充技術的介紹
• Babel介紹
• React專案快速建置工具介紹
• Webpack工具介紹

單元 11 - React語法入門：JSX、元件、屬性與狀態

• 不囉唆實戰JSX
• React元件生命週期：掛載
• React元件生命週期：更新
• React元件屬性與狀態介紹
• 實戰React元件生命週期

單元 12 - 實戰：待辦事項App

• 畫面規劃
• 元件切割
• 元件清單
• 何謂容器？何謂元件？
• 歸類聰明物件與笨物件
• 實戰：撰寫基礎畫面元件
• 實戰：資料、資料位置與資料流
• 實戰：資料異動
• 實戰：有控制的輸入元件(Controllerd Input)

單元 13 - React與樣式

• CSS用法語發展歷史介紹
• CSS前置處理器介紹：SASS範例
• CSS樣式的問題
• CSS的可讀性問題
• 讓我們以畫面元件驅動開發
• styled-components用法介紹
• 實戰styled-components
• styled-components與動畫
• styled-compoents與響應式網頁設計(RWD)

單元 14 - 認識Single Page Application

• MPA：舊時代架構優缺點介紹
• SPA：新時代架構優缺點介紹
• MPA與SPA效能上的比較
• 如何設計SPA
• 實戰：以SPA思維來重新設計待辦事項APP

單元 15 - 實戰：待辦事項App SPA

• 實戰：修改撰寫資料模型
• 實戰：修改撰寫分類元件
• 實戰：完成待辦事項App SPA
• 我們需要更多功能

單元 16 - React Router入門

• React Router安裝
• React Router核心三元件
• BrowserRouter語法介紹
• Router元件語法介紹
• Link元件語法介紹
• 實戰：以React Router改善待辦事項App SPA

單元 17 - React與資料流設計

• 資料流設計：MVC架構介紹
• MVC架構的問題：Facebook實際上遇到的困難
• Facebook Messenger Bug介紹

單元 18 - Redux觀念

• React單向資料留所面臨的問題
• Redux絕對真理資料流介紹
• 可預測與不可預設函式介紹
• 可預測資料流的重要
• 單向資料流的行為解析
• Redux跳脫框框的思考邏輯
• Redux三部曲：規劃Action
• 實戰：以待辦事項App來規劃Action
• Redux三部曲：規劃Reducer
• 實戰：以待辦事項App來規劃Reducer
• Reducer鐵律（一）

單元 19 - React與Redux

• Javascript效能致命傷：物件比較
• 為何需要Reducer鐵律（一）
• Immutable Data介紹
• Reducer 鐵律（二）
• 何謂純函式：資料的可預測性
• Redux三部曲：建立Store與資料流
• 如何建立Store
• 透過Store發動Action
• Redux名詞總覽
• 在React中使用Redux
• Connect語法與High Order Component(HOC)介紹
• 何謂Decorator Pattern
• 實戰：改寫待辦事項清單App

單元 20 - React與後端API呼叫

• AJAX歷史簡介：XHR歷史與fetch演化
• fetch語法介紹
• fetch四天王：Request物件介紹
• fetch四天王：Header物件介紹
• fetch四天王：Body物件介紹
• fetch四天王：Response物件介紹

單元 21 - Redux進階：後端資料串接

• Redux中取得後端資料的錯誤範例
• Fat action, slim reducer概念
• 以非同步Action拆解設計同步Action creatror
• 撰寫同步Action
• 撰寫同步Reducer
• Redux Middleware概念介紹
• Middleware寫法：ES5與ES6寫法
• Middleware堆疊特性：類剖面導向程式設計
• redux-thunk介紹
• redux-thunk安裝與設定
• 將非同步Action以redux-thunk改寫成同步Action

單元 22 - 建置與發佈

• 建置
• 發佈前的最後測試

單元 23 - React的效能陷阱

• React元件生命週期的陷阱
• 改用PureComponent
• 效能比較
• 使用時機

單元 24 - 網頁應用程式的未來：Google Progreesive Web Application

• Google PWA介紹
• 網頁效能兩大重點數字
• ES7動態輸入語法介紹
• 啟動PWA
• 效能比較
• PWA的陷阱

《 即將上線課程 》

單元 25 - 出師實戰：使用Keystone.建置完整的內容管理系統

教你使用 React 搭配 Keystone 打造出一套內容管理網站，絕對讓你物超所值。

單元 26 - Immutable Data詳解

•  Immutable.js，Facebook沒跟你說的秘密武器
• 實戰Immutable.js：效能、架構大躍進
• 採用Immutable.js 的問題以及解法

單元 27 - React與SEO

SPA（Single-page application）其中一項缺點是對搜尋引擎不友善，這堂課會教你如何透過建置工具，打造對搜尋引擎友善的單頁式網頁應用程式，一步步優化你的搜尋排序。