More Related Content Similar to React.js what do you really mean? (20) React.js what do you really mean?2. 2 Slides & Demo
▹ Slides
▸ https://goo.gl/5488ov
▹ Demo
▸ https://goo.gl/GjWZbu
3. 3
周昱安
● 國立彰化師範大學 資訊工程學系 四年級
● 努力畢業中,準備前往中央資工所軟工碩士班
● 前後端都寫,最近比較喜歡寫前端
● Laravel Taiwan 社群常客
● Production Project:
○ 彰師大國際處官方網站系統
○ SOKO Glove Configurator
○ Mr.Tanaka 田中先生鄉村民宿官網
● Github:github.com/tz5514
About me
9. 9
HTML ? DOM ?
▹ HTML 是一種方便開發者撰寫的語言,只是純文字
▹ DOM 是瀏覽器渲染引擎中真正存在的物件節點
▹ 頁面初始化時,渲染引擎會依照 HTML 的內容產生出 DOM
12. 12
▹ React 本身並不是一個完整的前端框架,只是一個函式庫
▹ React 本身只處理 View 的部份,也就是 HTML 的 DOM
▹ React 是一個中間媒介,連結了 UI 純粹的定義層面與 DOM的實際層面
▹ 基本上,React本身只做以下兩件工作;
▸ 讓你定義 UI 要長怎樣
▸ 幫你把這個 UI 印出來到使用者的瀏覽器畫面上
僅僅是 UI
14. 聲明式的定義前端 UI14
▹ 前端 UI 程式碼本身,應該要足以完整的自我表達其擁有的行為與可能的顯
示變化
▹ UI 渲染無法避免邏輯,將 UI 的定義直接在 JavaScript 中進行,有助於提高 UI
的自我表達能力
15. 15 JSX
▹ JSX 是 React 在使用的一種特殊 JavaScript 語法,看起來像是在 JavaScript
程式碼中直接寫 HTML
▹ 能幫助開發 React 應用,因可讀性高、很類似 HTML
▹ 重要的語法差異:class → className
▹ 瀏覽器看不懂,需要翻譯成原生的 JS 程式碼才能正常的在瀏覽器上執行
▹ 通常使用 Babel 來進行翻譯的工作
20. 20 Virtual DOM
▹ Virtual DOM 是一份純資料的 Tree 物件,對應到實際的 DOM
▹ Virtual DOM 為自定義 Component 提供了中介的虛擬層,讓開發者能描述 UI 樣
貌與邏輯
▹ 我們透過定義 Component 來表達「UI 什麼情況該如何呈現」。而「要用什麼手
段來達到這個畫面改變(如何操作 DOM)」 ,React 則會自動幫你做,而且絕大
多數情況下都比你自己來要做的更好
23. 23 Always Redraw
▹ Single Source of Truth
▸ UI 要長得如何,應當是取決於當時的 Model 資料以及 UI 狀態而決定
▹ 把畫面全部洗掉重新再畫,顯示結果通常一定是正確的
▹ 每次都重繪全部的實體 DOM 顯然是不可行,但是重繪 VDOM 則相對高效許多
27. 27 Props
▹ Component 外部(父 Component)傳遞給 Component 內部的靜態參數
▹ 抽象化出跟問題有關的參數,方便 Component 進行重用
▹ Props 傳遞到 Component 內部後,應是不可變更的固定值
▹ 當 Component 外部改變傳遞進來的 Props 時,Component 內部會自動發起重繪
37. Isomorphic37
▹ How
▸ Isomorphic 是指前後端執行同一份程式碼來 Render View
▸ 後端必須使用 Node.js(才能夠運行 React)
▸ 使用 ReactDOMServer.renderToString 方法
▹ Example with Redux
▸ https://github.com/erikras/react-redux-universal-hot-example
38. React Native38
▹ React 利用 VDOM 實現了 UI 邏輯以
及 HTML DOM 之間中介的虛擬層
▹ Facebook 希望 React 能對應的實際
層不僅止於 Web,而實作出了對
應 Android & iOS 原生元件的實際
層,並進行部份的元件共用
▹ 大幅降低兩大行動平台之間的開
發成本
39. Why React is so awesome?39
▹ 組件化的設計
▹ 聲明式風格
▹ 單向資料流
▹ Isomorphic 讓 Server-Side Rendering 變成可能
▹ React Native 統一行動裝置平台開發
▹ 在普遍的情境下效能表現不錯
40. React 的罩門40
▹ React 本身學習門檻不高,但環境建置困難,且其生態系複雜,導致剛開始學
習時容易混亂無頭緒
▹ 不易於進行細微的 DOM 操作
▹ React 的效能瓶頸
▸ Tree 節點過多過深時,遍歷所有節點的效能成本很高
▸ 實作 shouldComponentUpdate 來減少不需要的遍歷
41. 你應該如何學習 React41
▹ 必修
▸ React 本身
▸ NPM & Module System
▸ JS 打包工具:Webpack
▸ Routing:React Router
▸ Flux:Redux
▹ 選修
▸ ES6
▸ Isomorphic
▸ React Native
▸ Inline-style CSS
▸ Immutable.js
42. React 與 Angular 的比較42
React Angular 1.x
性質 Library Framework
Dataflow One-way dataflow Two-way binding
Template
HTML in JS
(JSX)
JS in HTML
管理 Model 與 DOM 之
間的對應
Virtual DOM Dirty Checking
Isomorphic Yes No
學習曲線 平滑 陡峭
46. 46
● Wepack 是一個前端模組的整合與打包工具
○ 同時支援 AMD、CommonJS、ES6 Module 等模組規範
○ 可以自由的配置打包出多個 output JS 檔案
○ 高效能的 Bundle 速度
○ 整合樣式表(CSS/SCSS/LESS 等)
○ 能夠處理圖片以及字型檔
○ 豐富的額外插件
Webpack
48. 48 Demo Repo
▹ https://goo.gl/GjWZbu
▹ npm install
▸ Run
⬩ npm run dev
⬩ npm run build
▸ Webpack
▸ Babel
▸ HMR
▸ React 15.0.1
▸ React-Router
▸ SASS
▸ Bootstrap
49. 49
● Wepack 的設定檔,我們將運行的配置寫在這段程式碼中,然後 webpack 執
行時就會按照該配置來進行 bundle 的動作並產出靜態檔案。
● 可以自行命名,運行 Webpack 時指定設定檔名稱即可
● 通常會將開發用以及 production 用的設定分開寫
○ webpack.config.dev.js
○ webpack.config.prod.js
webpack.config.js
50. 50
● 通常我們寫 React Project 都是 Single Page Application,因此只需要
把全部程式碼 Bundle 成一個個體就好
entry