Reactjs @ MOSUT x Tainan.py

Transcript

1. Reactjs yhsiang @ MOSUTxTainan.py 8/23 Sat.
2. Who am I?
3. 〳腋僽㔔捀し➮㣖랔✫
4. HWꅾ䏞♳涗罏 将虋䊨玑䌌
5. React
6. MVC but V
7. templates but components
8. update DOM reconciliation
9. Features
10. Virtual DOM also render on server-side
11. Data Flow one-way reactive data
12. JSX XML-like syntax
13. var HelloMessage = React.createClass({
 render: function({ return <div>Hello {this.props.name}</div>; }); }); React.renderComponent( <HelloMessage name="John" />, mountNode);
14. var HelloMessage = React.createClass({
 render: function({ return ! }); }); React.renderComponent( , mountNode); React.DOM.div(null, “Hello “, this.props.name); HelloMessage({name: “John”})
15. React+LiveScript
16. {div} = React.DOM HelloMessage = React.createClass do render: -> div {}, “Hello #{@props.name}” React.renderComponent ( HelloMessage name: ‘John’), mountNode
17. A stateful component
18. {div} = React.DOM Timer = React.createClass do getInitialState: -> secondsElapsed: 0 tick: -> @setState secondsElapsed: @state.secondsElapsed + 1 componentDidMount: -> @interval = setInterval @tick, 1000 componentWillUnmount: -> clearInterval @interval render: -> div {}, “Seconds Elapsed: #{@state.secondsElapsed}” React.renderComponent Timer!, mountNode
19. props vs state external v.s. internal
20. Lifecyle
21. componentWillMount() componentDidMount() componentWillReceiveProps() Mounting Updating this.getDOMnode(), setTimeout, xhr shouldComponentUpdate() componentWillUpdate() componentDidUpdate() Unmounting componentWillUnmount()
22. {div} = React.DOM Timer = React.createClass do getInitialState: -> secondsElapsed: 0 tick: -> @setState secondsElapsed: @state.secondsElapsed + 1 componentDidMount: -> @interval = setInterval @tick, 1000 componentWillUnmount: -> clearInterval @interval render: -> div {}, “Seconds Elapsed: #{@state.secondsElapsed}” React.renderComponent Timer!, mountNode
23. React-boostrap
24. More? propTypes, mixins, statics
25. Flux application architecture
26. unidirectional data flow
27. Action Controller Model View Model Model Model Model View View View View
28. Action Dispatcher Store View Action
29. https://github.com/facebook/flux
30. callbacks waitFor
31. Action Dispatcher action = type: ‘NEW_THREAD’ to: ‘hychen’ text: ‘嗨懂’ threadID: ‘78123’ messageID: ‘1234’ Message Store Thread Store Message View Thread View ‘78123’: participants: <[ hychen ly ]> messageList: <[ 1234 ]>
32. Action Dispatcher action = type: ‘NEW_THREAD’ to: ‘hychen’ text: ‘嗨懂’ threadID: ‘78123’ messageID: ‘1234’ Message Store Thread Store Message View Thread View ‘1234’: text: ‘嗨懂’ thread: ‘78123’ author: ‘ly’
33. flux, fluxxor, fluxy
34. reactjs.tw on Facebook @lyforever
35. CC-BY 4.0