hello reactjs 0~1 bulid my first web app
TRANSCRIPT
Outline
• What is React ?• React 起手式 • Sample demo
– Hello word – Try 分割元件 (card 好友請求)
What is React ?
誰 在 用 ? 不
出處 https://speakerdeck.com/coodoo/flux-in-action-shi-zhan-jing-yan-fen-xiang 引用簡報內容
React 三大主軸
Data Flow
Just the UI
Virtual DOM
Just the UI
• 元件化架構
• MVC / MVVM 裡面的 View – 但是更強大
• 封裝性
HTML
JS CSS
Virtual DOM
• $(“app”) 成本太高
• 虛擬文件模型
• 資料改變，畫面一律重繪
– 畫面保證正確。
• JSX 語法
React
Virtual DOM
DOM畫面改變
Develops
Virtual DOM(記憶體)
JQuery
把 div 文字變紅色
JSXHTML in JavaScript
HTML in JavaScript
JQ / Angular
HTML in JavaScript
React
Data Flow
• 單向資料流，由 Store 開始
• 所有的資料只存在 Store 內– Store = Model
• Flux– 開發架構 ( Pattern / 心法 )
• Flux 實作：
– Flux ( Facebook )– Redux ( 作者已被 Facebook 納入公司 )
MVC vs
Flux
Single source of truth
唯一的真相
小結
• React 負責 View• Flux 負責 Model• 單向資料流
• 一律重繪
Sample demo
React 起手式 .1
• 建立元件：
– React.createClass( Object );• 將元件繪製到 HTML DOM：
– ReactDOM.render( component, getID );• 從 attribute 上面拿資料
– props• 元件的狀態
– state
React 起手式 1-1React.createClass
建立 React 元件：React.createClass( object );
React 起手式 1-2 React.createClass
元件繪製區
React 起手式 .1-3React.createClass
JSX syntax
props 從 attributes 取得資料
{ JavaScript 表達式 }
React 起手式 .1-4ReactDOM.render
component, getElement
元件畫好了怎麼放到 DOM 上面?
React 起手式 .1-5完成第一個 React
AngularJS 比較
JSX 注意事項
HTML JSX<br> <br />class className
style=“color: red” (string) style={{color: “red”}} (object)for htmlFor
onclick onClick
React 起手式 .2Try 元件分割
CardRequest
CardContainer
CardOption
CardName
CardImage
END
reference• https://facebook.github.io/react• https://facebook.github.io/flux• https://github.com/jarsbe/react-simple• https://speakerdeck.com/coodoo/flux-in-action-shi-zhan-jing-yan-fen-xiang• http://blog.littlelin.info/posts/2015/06/14/note-establishing-flux-app-from-scratch-1• https://github.com/gaearon/react-makes-you-sad• https://github.com/jarsbe/react-simple•