Hello reactJS 0~1 Bulid my first web app
- 1. Hello React 從 0 ~ 1 建立第一個 app Jacky.H.Hung 2016.04.02 hungjie19@gmail.com
- 2. Outline • What is React ? • React 起手式 • Sample demo – Hello word – Try 分割元件 (card 好友請求)
- 3. What is React ?
- 4. 誰 在 用 ?不
- 5. 出處 https://speakerdeck.com/coodoo/flux-in-action-shi-zhan-jing-yan-fen-xiang 引用簡報內容
- 7. Just the UI • 元件化架構 • MVC / MVVM 裡面的 View – 但是更強大 • 封裝性 HTML JS CSS
- 8. Virtual DOM • $(“app”) 成本太高 • 虛擬文件模型 • 資料改變，畫面一律重繪 – 畫面保證正確。 • JSX 語法
- 11. HTML in JavaScript JQ / Angular
- 13. Data Flow • 單向資料流，由 Store 開始 • 所有的資料只存在 Store 內 – Store = Model • Flux – 開發架構 ( Pattern / 心法 ) • Flux 實作： – Flux ( Facebook ) – Redux ( 作者已被 Facebook 納入公司 )
- 14. MVC vs Flux
- 15. Single source of truth 唯一的真相
- 16. 小結 • React 負責 View • Flux 負責 Model • 單向資料流 • 一律重繪
- 17. Sample demo
- 18. React 起手式 .1 • 建立元件： – React.createClass( Object ); • 將元件繪製到 HTML DOM： – ReactDOM.render( component, getID ); • 從 attribute 上面拿資料 – props • 元件的狀態 – state
- 19. React 起手式 1-1 React.createClass 建立 React 元件： React.createClass( object );
- 21. React 起手式 .1-3 React.createClass JSX syntax props 從 attributes 取得資料 { JavaScript 表達式 }
- 22. React 起手式 .1-4 ReactDOM.render component, getElement 元件畫好了怎麼放到 DOM 上面?
- 23. React 起手式 .1-5 完成第一個 React
- 24. AngularJS 比較
- 25. JSX 注意事項 HTML JSX <br> <br /> class className style=“color: red” (string) style={{color: “red”}} (object) for htmlFor onclick onClick
- 26. React 起手式 .2 Try 元件分割 CardRequest CardContainer CardOption CardName CardImage
- 27. END
- 28. 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 •