ReactJS introduction - Hello word - sample 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 引用簡報內容

6. React 三大主軸
Data
Flow
Just the
UI
Virtual
DOM

7. Just the UI
• 元件化架構
• MVC / MVVM 裡面的 View
– 但是更強大
• 封裝性
HTML
JS CSS

8. Virtual DOM
• $(“app”) 成本太高
• 虛擬文件模型
• 資料改變，畫面一律重繪
– 畫面保證正確。
• JSX 語法

9. React
Virtual DOM
DOM
畫面改變
Develops
Virtual DOM
(記憶體)
JQuery
把 div 文字變紅色

10. JSXHTML in JavaScript

11. HTML in JavaScript
JQ / Angular

12. HTML in JavaScript
React

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 );

20. React 起手式 1-2
React.createClass
元件繪製區

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
•