React / Flux 入門班

React / Flux 入門班

厭倦了複雜難學的大型框架與土炮式開發手法?試試這個。

課程介紹

Single Page App 是當今最重要的網路應用主流,Facebook, Yahoo, Instagram, Twitter 與 Pinterest 等知名大站皆重度依賴此技術開發其核心 web 與 mobile 產品,長期以來業界對此技能求才若渴卻總是供不應求。

React + Flux 是當前矽谷最受歡迎的 Single Page App 開發技術,它一舉解決數十年來傳統 MVC 開發概念的迷思,不但能降低大型網頁程式的複雜度與大幅改善頁面運行速度,更能快速提升團隊開發效率,是公認最友善、易學又威力強大的開發工具。

本課程特別針對完全無 React/Flux 基礎的初學者所設計,以深入淺出的方式教授正確觀念與開發手法,讓初心者一次就學會並能立即用於實戰!

不論你目前使用任何框架與開發手法皆可立即從本課程獲益讓技能加倍升級!

更多使用 React/Flux 帶來的好處請看此份簡報

預期效益

課前你完全不需俱備任何 React/Flux 知識,我們將從基礎入門,帶你從空白資料夾開始一步步實作出完整應用程式,以徹底瞭解 React/Flux 的核心觀念、開發手法與工作流程。

當你走出教室時,將俱備完整能力可從零開始建構自動化工作流程、專案目錄架構,並瞭解如何以 React/Flux 實作 Single Page App。

請注意本課程為 workshop 型式,有大量內容需學員親自動手實作,請務必攜帶自已熟悉的開發環境(電腦、編輯器)來上課。

現在就預約

課程大綱 (一日課程)

  • 建立專案架構
    • 安裝 generator
    • 建立專案目錄
    • 啟動開發模式
  • 先備知識
    • Debug 工具與指令
    • React DevTools
    • 其它常用工具
  • Hello World
    • 五分鐘寫好一個元件並讓它會動
  • 撰寫第一個元件
    • 認識 react 元件基本概念
    • 瞭解元件寫法
    • 瞭解如何讓元件顯示在畫面上
    • 瞭解 render() 功能
  • 元件 composition
    • 瞭解元件可層層包覆
    • 瞭解元件間的資料傳遞方式與正確觀念
    • 瞭解 props 的用途與使用時機
    • 熟悉元件的基本指令
    • 熟悉元件 life cycle
  • 進階元件應用
    • 動態小孩生成法
    • key, ref 的用途
    • 元件 callback 的處理方式與進階技巧
  • Container pattern
    • 瞭解 container component pattern
    • 為何需要 container pattern?
    • Container pattern 實作方式
    • Container pattern 應用技巧
    • 瞭解 state 與 props 的差異
  • Controlled component
    • Controlled component 原理
    • Controlled component 應用時機
    • 套用 controlled component 於 form 內
    • 瞭解 state 的次要應用時機
  • 複習 always redraw 觀念
    • 與傳統 stateful DOM 的差異
    • Single source of truth
    • Always redraw 的優勢
  • Flux 入門
    • Flux 簡介
    • 為何需要 flux?
    • Flux 和傳統 MVC 的關係與差異
    • Data Flow + View
  • Flux Data flow 解析
    • 資料流程圖說明
    • ajax call 何時處理?
    • call 取回資料後送去何方?
    • store 內如何處理取回之資料?
    • store 處理完資料後發生何事?
  • AppConstants
    • 集中儲存變數的優點
    • 良好名稱管理技巧
  • Dispatcher
    • 瞭解 Dispatcher 功能
    • 官方 Dispatcher 的優點
  • App Dispatcher
    • 撰寫第一個 AppDispatcher
    • AppDispatcher 的功能與應用技巧
  • Store
    • 瞭解 Store 功能
    • 按 domain 切分不同 Store
    • Store 儲存 collection, model 與 state
    • 建立第一個 Store
  • View 與 Store 結合
    • 瞭解 react 程式如何套用 flux 手法
  • Action Creator
    • 瞭解 actionCreator 的功能
    • ajax call 成功與失敗時的處理手法
    • actionCreator 應用技巧
  • Optimistic update 優化手法
    • Optimistic update 是什麼?
    • 瞭解 optimistic update 手法與傳統方式差異
  • 概念復習與總結
    • 今天學了什麼?
    • 進階學習方向
  • 課後練習
    • 練習:實作 ui 新功能
    • 練習:實作刪除物件的 flux 完整流程

現在就預約

課程特色

  • 全中文化講義、範例與程式註解
  • 所有課程皆為實戰中淬取之經驗,百分之百符合業界實務需求,不浪費時間
  • 課程內容與授課順序皆經細心規畫,以深入淺出方式教授,保証能在短時間內快速吸收並產生即戰力
  • 實戰與教學經驗豐富的講師現場中文解說,不懂立即問到會
  • 課程設計只求實戰,其餘免談,要學就學最好的

你正為下列現象所苦嗎?

  • 英文能力不佳無法主動吸收最新外文資訊?
  • 網路上充斥各種大小框架,看的眼花瞭亂也不知該選哪個?
  • 傳統 MVC 手法總讓專案到後來變的龐大複雜而逐漸失控?
  • 客戶總是抱怨進度太慢、問題太多、效能不好,搞的自已心力焦悴?
  • 大型框架難學、易忘又經常犯錯,導入後常覺礙手礙腳也無法發揮該有的效能?
  • 即使用了現成框架也因為每人手法不同最後團隊還是難以協同工作,彼此也很難互相支援?
  • 市場上人才難尋,就算招到人也難以快速進入狀況產生即戰力?
  • 技術變化好快舊的還沒學完新的已經出來,要是有專家幫忙盯著隨時提供最新且正確的資訊有多好?
  • 網路上到處是零碎片段資訊 四處亂看卻總是連貫不起來也無法實際應用?
  • 隨處找來的範例總是跑不起來,有的還是老舊版號根本浪費時間?
  • 好希望有完整的教程規畫一步步帶領入門一次就學會正確手法?

如果上述任何一點符合你的心聲,這門課將帶你脫離苦海,真正成為忍者級開發大師!

這課程適合你嗎?

  • 對剛學會 javascript 的入門新手
    • 這課太難不適合你,至少需一年以上實際開發經驗為佳
    • 請先上 Front End 開發起手式 班再銜接此課程較能聽懂
  • 對主要使用 jquery 進行開發的人員
    • 希望有良好的架構來管理程式碼
    • 希望能學習中大型 web app 開發的良好手法
  • 對使用 Backbone, Ember, Knockout 的開發人員
    • 希望能進一步簡化 MVC 的開發流程以降低程式複雜度並提升系統穩定性
    • 希望能讓 view 的效能有十倍速增長
  • 對目前使用 angular 的開發人員
    • 雙向 data-binding 造成資料亂流最後難以管理?
    • watcher 的 dirty checking 總是不精準又耗用大量資源?
    • service/provider/factory 總是搞不懂何時該用哪個?
    • directive 怎樣都寫不好,也很難真的重覆使用?
    • 一大堆 module 總是不知道該如何良好規畫大型專案結構?
    • 無法在 server 預先繪好頁面以加快第一頁顯示速度?
    • 學的好辛苦但成果卻有限而且實作上還一直出錯,到底該怎麼辦?
    • 每次框架改版就要從頭來過實在沒那麼多生命可一直苦苦追趕?

    我們是過來人,以上煎熬我們都經歷過,React+Flux 可以完美解決這些問題,讓你跟我們一樣晚上睡的更安穩,詳情請參考這份簡報

為何要參加此課程?

  • 做為開發者
    • 我們提供全中文化教材與範例幫助你快速學習
    • 不需再浪費時間上網摸索未經驗証的片斷資訊
    • 課程內容皆是精心挑選並通過實戰驗証的開發手法
    • 一次到位學會專業級開發流程進身高手行列
    • 提高工作效率可早點下班回家陪家人小孩
  • 做為老闆或主管
    • 團隊開發效率不佳?
    • 總是選錯工具導致產品時程延誤?
    • 不知如何訓練新進員工提升本職學能?
    • 四處招不到適用人才很苦惱?
    • 或許你只是沒找對方向,我們提供務實的培訓課程幫你一次解決這些問題
    • 花一次時間直接學最好的知識,不要省小錢反而浪費生產力賠更大
  • 做為 startup 創辦人
    • 團隊人少事雜就更需力求個人質量精良俱高度即戰力
    • 擁有正確知識與高效率戰技是爭取速度與節省成本最佳法門
    • 想快速開發 MVP 以驗証市場與客戶就更需應用高效率工法
    • 我們的實戰課程幫你短時間內大幅提升開發人員技能,立即從二兵變身海豹部隊

現在就預約

Last update: 4/10/2015, 3:01:36 PM

有問題嗎?詢問我們!