react.js what do you really mean?
TRANSCRIPT
![Page 1: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/1.jpg)
REACT.JSWHAT DO YOU REALLY MEAN?ZeT 周昱安
![Page 2: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/2.jpg)
2 Slides & Demo
▹ Slides
▸ https://goo.gl/5488ov
▹ Demo
▸ https://goo.gl/GjWZbu
![Page 3: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/3.jpg)
3周昱安
● 國立彰化師範大學 資訊工程學系 四年級
● 努力畢業中,準備前往中央資工所軟工碩士班
● 前後端都寫,最近比較喜歡寫前端
● Laravel Taiwan 社群常客
● Production Project:
○ 彰師大國際處官方網站系統
○ SOKO Glove Configurator
○ Mr.Tanaka 田中先生鄉村民宿官網
● Github:github.com/tz5514
About me
![Page 4: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/4.jpg)
REACT.JS ?4
VDOM?Component?
JSX?
One-way Dataflow?
![Page 5: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/5.jpg)
1.從零開始認識REACT.JS
5
![Page 6: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/6.jpg)
”6
React是一個 JavaScript 函式庫,
用來處理前端 UI 的產生與管理。
![Page 7: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/7.jpg)
為何 REACT 要誕生
▹ 前端 UI 的開發變得越來越複雜
▹ 舊有的開發模式缺乏程式碼的可重用性與可預測性
7
![Page 8: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/8.jpg)
”8
在傳統的前端開發,HTML 只扮演了「定義 UI 最初的基礎 DOM 結構」的角色。
所有在 JavaScript 中進行的 DOM 操作,
都是基於最初定義好的 DOM 再另外堆疊上去的變更,
這讓前端程式碼的執行結果變得難以預測與維護。
![Page 9: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/9.jpg)
9
HTML ? DOM ?▹ HTML 是一種方便開發者撰寫的語言,只是純文字
▹ DOM 是瀏覽器渲染引擎中真正存在的物件節點
▹ 頁面初始化時,渲染引擎會依照 HTML 的內容產生出 DOM
![Page 10: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/10.jpg)
10
![Page 11: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/11.jpg)
11
![Page 12: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/12.jpg)
12
▹ React 本身並不是一個完整的前端框架,只是一個函式庫
▹ React 本身只處理 View 的部份,也就是 HTML 的 DOM
▹ React 是一個中間媒介,連結了 UI 純粹的定義層面與 DOM的實際層面
▹ 基本上,React本身只做以下兩件工作;
▸ 讓你定義 UI 要長怎樣
▸ 幫你把這個 UI 印出來到使用者的瀏覽器畫面上
僅僅是 UI
![Page 13: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/13.jpg)
”13
React 捨棄了傳統的 HTML 開發方式,
改成完全由 JavaScript 來代管 DOM 的產生與操作,
實現 100% 純粹的 Client-Side Rendering。
![Page 14: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/14.jpg)
聲明式的定義前端 UI14
▹ 前端 UI 程式碼本身,應該要足以完整的自我表達其擁有的行為與可能的顯
示變化
▹ UI 渲染無法避免邏輯,將 UI 的定義直接在 JavaScript 中進行,有助於提高 UI
的自我表達能力
![Page 15: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/15.jpg)
15 JSX▹ JSX 是 React 在使用的一種特殊 JavaScript 語法,看起來像是在 JavaScript
程式碼中直接寫 HTML
▹ 能幫助開發 React 應用,因可讀性高、很類似 HTML
▹ 重要的語法差異:class → className
▹ 瀏覽器看不懂,需要翻譯成原生的 JS 程式碼才能正常的在瀏覽器上執行
▹ 通常使用 Babel 來進行翻譯的工作
![Page 16: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/16.jpg)
Component16
▹ 以 Component 的形式來表
達與拼裝 UI ,能夠讓前端
UI 程式碼有更好的可組合
性與可重用性
![Page 17: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/17.jpg)
Component17
![Page 18: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/18.jpg)
18
Virtual DOM開發者在思考處理 UI 變動的流程時,
「這個 UI 會應該會有什麼變化」與
「要用什麼手段來讓 UI 達到這個變化」
是兩回事。
![Page 19: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/19.jpg)
”19
DOM is Slow.Really Fxxking Slow.
所以我們提供了 Virtual DOM 來當作預先的彩排場地
![Page 20: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/20.jpg)
20 Virtual DOM▹ Virtual DOM 是一份純資料的 Tree 物件,對應到實際的 DOM
▹ Virtual DOM 為自定義 Component 提供了中介的虛擬層,讓開發者能描述 UI 樣
貌與邏輯
▹ 我們透過定義 Component 來表達「UI 什麼情況該如何呈現」。而「要用什麼手
段來達到這個畫面改變(如何操作 DOM)」 ,React 則會自動幫你做,而且絕大
多數情況下都比你自己來要做的更好
![Page 21: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/21.jpg)
21
Always Redraw F5,就對了。
![Page 22: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/22.jpg)
”22
When something go wrong.
![Page 23: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/23.jpg)
23 Always Redraw
▹ Single Source of Truth
▸ UI 要長得如何,應當是取決於當時的 Model 資料以及 UI 狀態而決定
▹ 把畫面全部洗掉重新再畫,顯示結果通常一定是正確的
▹ 每次都重繪全部的實體 DOM 顯然是不可行,但是重繪 VDOM 則相對高效許多
![Page 24: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/24.jpg)
24 Always Redraw
![Page 25: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/25.jpg)
”25
當畫面需要改變時,根據最新的 UI 狀態重繪出新的 VDOM Tree
並與改變前的舊 VDOM Tree 進行全面式的比較與計算
其中新舊差異的地方,才真的會在實際的 DOM 上發生操作改變
![Page 26: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/26.jpg)
Flux & One-way dataflow26
![Page 27: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/27.jpg)
27 Props
▹ Component 外部(父 Component)傳遞給 Component 內部的靜態參數
▹ 抽象化出跟問題有關的參數,方便 Component 進行重用
▹ Props 傳遞到 Component 內部後,應是不可變更的固定值
▹ 當 Component 外部改變傳遞進來的 Props 時,Component 內部會自動發起重繪
![Page 28: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/28.jpg)
28 Props
![Page 29: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/29.jpg)
29 State
▹ Component 內部私有的動態狀態值
▹ 在內部使用 this.setState 方法進行修改
▹ 在內部調用修改後,Component 會自動發起畫面重繪
![Page 30: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/30.jpg)
30 State
![Page 31: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/31.jpg)
31Component Lifecycle
![Page 32: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/32.jpg)
2.REACT.JS生態系與發展
32
![Page 33: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/33.jpg)
REACT 的開源生態系
React 之所以發展到如此強大的狀態,跟其活躍而開放的週
邊生態系有密不可分的關聯
33
![Page 34: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/34.jpg)
Redux34
▹ Single Store
▹ 簡化 Flux 流程
![Page 35: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/35.jpg)
React Router35
▹ Front-End Routing,
幫助解決 SPA 的路
由問題
![Page 36: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/36.jpg)
Isomorphic36
▹ Why
▸ React 是百分之百的 Client-Side Rendering
▸ Client-Side Rendering 有 SEO 問題
▸ 初次載入頁面時速度不理想
![Page 37: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/37.jpg)
Isomorphic37
▹ How
▸ Isomorphic 是指前後端執行同一份程式碼來 Render View
▸ 後端必須使用 Node.js(才能夠運行 React)
▸ 使用 ReactDOMServer.renderToString 方法
▹ Example with Redux
▸ https://github.com/erikras/react-redux-universal-hot-example
![Page 38: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/38.jpg)
React Native38
▹ React 利用 VDOM 實現了 UI 邏輯以
及 HTML DOM 之間中介的虛擬層
▹ Facebook 希望 React 能對應的實際
層不僅止於 Web,而實作出了對
應 Android & iOS 原生元件的實際
層,並進行部份的元件共用
▹ 大幅降低兩大行動平台之間的開
發成本
![Page 39: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/39.jpg)
Why React is so awesome?39
▹ 組件化的設計
▹ 聲明式風格
▹ 單向資料流
▹ Isomorphic 讓 Server-Side Rendering 變成可能
▹ React Native 統一行動裝置平台開發
▹ 在普遍的情境下效能表現不錯
![Page 40: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/40.jpg)
React 的罩門40
▹ React 本身學習門檻不高,但環境建置困難,且其生態系複雜,導致剛開始學
習時容易混亂無頭緒
▹ 不易於進行細微的 DOM 操作
▹ React 的效能瓶頸
▸ Tree 節點過多過深時,遍歷所有節點的效能成本很高
▸ 實作 shouldComponentUpdate 來減少不需要的遍歷
![Page 41: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/41.jpg)
你應該如何學習 React41
▹ 必修
▸ React 本身
▸ NPM & Module System
▸ JS 打包工具:Webpack
▸ Routing:React Router
▸ Flux:Redux
▹ 選修
▸ ES6
▸ Isomorphic
▸ React Native
▸ Inline-style CSS
▸ Immutable.js
![Page 42: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/42.jpg)
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
學習曲線 平滑 陡峭
![Page 43: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/43.jpg)
3.建立 REACT.JS開發環境
43
![Page 44: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/44.jpg)
44
React 的開發環境需求
▹ JSX
▹ ES6 to ES5
▹ HMR(Hot Module Replacement)
![Page 45: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/45.jpg)
45
React 常見的開發環境方案
▹ In-Browser Compile(Babel 6 之後不支援)
▹ Online Playgrond
▹ Module Bundler(Webpack、Browserify、Gulp)
![Page 46: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/46.jpg)
46
● Wepack 是一個前端模組的整合與打包工具
○ 同時支援 AMD、CommonJS、ES6 Module 等模組規範
○ 可以自由的配置打包出多個 output JS 檔案
○ 高效能的 Bundle 速度
○ 整合樣式表(CSS/SCSS/LESS 等)
○ 能夠處理圖片以及字型檔
○ 豐富的額外插件
Webpack
![Page 47: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/47.jpg)
47 安裝 Webpack● npm install webpack -g
![Page 48: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/48.jpg)
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
![Page 49: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/49.jpg)
49
● Wepack 的設定檔,我們將運行的配置寫在這段程式碼中,然後 webpack 執
行時就會按照該配置來進行 bundle 的動作並產出靜態檔案。
● 可以自行命名,運行 Webpack 時指定設定檔名稱即可
● 通常會將開發用以及 production 用的設定分開寫
○ webpack.config.dev.js
○ webpack.config.prod.js
webpack.config.js
![Page 50: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/50.jpg)
50
● 通常我們寫 React Project 都是 Single Page Application,因此只需要
把全部程式碼 Bundle 成一個個體就好
entry
![Page 51: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/51.jpg)
51 output● path:Bundle 出的個體靜態檔案存放的位置
● publicPath:CSS 中引入 URL 時參考的路徑
● filename:Bundle 出的個體靜態檔案的名稱
![Page 52: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/52.jpg)
52 resolve● root
○ require 時路徑省略
● extensions
○ require 時副檔名省略
![Page 53: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/53.jpg)
53 module - loader
![Page 54: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/54.jpg)
54 devtool● 產生 JavaScript檔案的 Source map,以便開發時 Debug
![Page 55: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/55.jpg)
55 plugins
![Page 56: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/56.jpg)
56 index.html
![Page 57: React.js what do you really mean?](https://reader034.vdocuments.net/reader034/viewer/2022051706/587bfcc81a28ab7c668b5b95/html5/thumbnails/57.jpg)
Thank you for listening !
57