如果我完全沒有前端的經驗，可以上這堂課程嗎？ 可以，我們會盡可能的顧慮到沒有前端經驗的學生！當然，如果您在哪一個階段卡住了，可以隨時詢問我們，老師會在三天內給回覆你的問題。 本堂課的四大學習色 一次包含初、中、高三個階段課程，上完可直接進入業界實戰一次購買永久體驗，您可以自由掌握進度，無限次觀看複習有問題老師幫你解答，學員的問題在提出後三天內會得到老師回覆 為什麼學習 ES6 和 React？ JavaScript 是目前最受歡迎的程式語言之一，近幾年更做了大幅度的翻新，新版的 JavaScript ECMAScript 第六版 ( 簡稱 ES6 ) 語法比起以往更為強大、簡潔，這堂課協助已經學過 JavaScript 基礎的朋友，升級程式開發技能至 ES6。讓您準備好面對未來的挑戰，立於不敗之地！ 為什麼要用 React 開發？ jQuery 雖然是目前多數前端工程師的必備工具，但在中大型專案的開發上，容易產生不易管理及效能降低的缺點。所以越來越多的網路公司都轉向 React.js 來開發前端組件，除了性能因素外，很大一部分原因是因為用 jQuery 去寫很複雜的 DOM 操作，後期代碼會變得越來越難維護。另外根據 State of JS 調查，顯示 React.js 的開發者滿意度最高，達到 92％。 React.js 本身的優勢？ 由 Facebook 開發維護，具備未來性與擴展性，不會隨意消失或停止更新React.js 擁有 Virtual DOM，能夠減少操作，提高效能，讓您能專注於 UI 設計React Native 使得 Web 應用的邏輯可以直接使用在 iOS 或 Android 等移動端客戶有足夠多的使用和測試場景來保證框架本身幾乎沒有 bug 和錯誤模組化開發，架構良好，寫出來的東西易於維護，修改快速良好優化的程式碼，讓系統載入與反應速度皆快 有哪些公司使用 React 開發 FacebookAirbnbNetflix 為什麼選 Redux？ 坊間的 React.js 課程中，對於資料流的概念僅止於 React.js 中的簡易單向資料流，然而單向資料流只能應付小規模的應用程式，因此我們選用市場上歷經千錘百煉的 Redux 來解決資料模型的問題，Redux 的概念簡單易上手，不但功能強大、維護性高且除錯容易，能為開發者省下大量的時間和維護成本。 授課進行與學習方式 【電腦螢幕側錄＋動畫投影片】 線上學習方便大家可以利用空檔進行學習。本堂課講師將用螢幕側錄的方式，一步步帶你實際操作，在重點的部分，會以動畫投影片的方式講解，幫助學員更容易上手。 【問題回覆】 若學員在學習上有遇到任何問題，我們也歡迎學員詢問，講師講在三天內回覆。 課程章節表 單元 1 - 實戰React：課程簡介 你能從這堂課學會什麼這堂課適合怎樣的學習者為何你應該上這堂課 單元 2 - Hello React App：環境設定與安裝 介紹Node.js安裝Node.jsnpm介紹建立專案與開發環境啟動開發環境安裝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、元件、屬性與狀態 不囉唆實戰JSXReact元件生命週期：掛載React元件生命週期：更新React元件屬性與狀態介紹實戰React元件生命週期 單元 12 - 實戰：待辦事項App 畫面規劃元件切割元件清單何謂容器？何謂元件？歸類聰明物件與笨物件實戰：撰寫基礎畫面元件實戰：資料、資料位置與資料流實戰：資料異動實戰：有控制的輸入元件(Controllerd Input) 單元 13 - React與樣式 CSS用法語發展歷史介紹CSS前置處理器介紹：SASS範例CSS樣式的問題CSS的可讀性問題讓我們以畫面元件驅動開發styled-components用法介紹實戰styled-componentsstyled-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來規劃ActionRedux三部曲：規劃Reducer實戰：以待辦事項App來規劃ReducerReducer鐵律（一） 單元 19 - React與Redux Javascript效能致命傷：物件比較為何需要Reducer鐵律（一）Immutable Data介紹Reducer 鐵律（二）何謂純函式：資料的可預測性Redux三部曲：建立Store與資料流如何建立Store透過Store發動ActionRedux名詞總覽在React中使用ReduxConnect語法與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撰寫同步ReducerRedux 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與SEOSPA（Single-page application）其中一項缺點是對搜尋引擎不友善，這堂課會教你如何透過建置工具，打造對搜尋引擎友善的單頁式網頁應用程式，一步步優化你的搜尋排序。