Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reactjs @ MOSUT x Tainan.py

Reactjs @ MOSUT x Tainan.py

Yuanhsiang Cheng

August 25, 2014
Tweet

More Decks by Yuanhsiang Cheng

Other Decks in Technology

Transcript

  1. var HelloMessage = React.createClass({
 render: function({ return ! }); });

    React.renderComponent( , mountNode); React.DOM.div(null, “Hello “, this.props.name); HelloMessage({name: “John”})
  2. {div} = React.DOM HelloMessage = React.createClass do render: -> div

    {}, “Hello #{@props.name}” React.renderComponent ( HelloMessage name: ‘John’), mountNode
  3. {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
  4. {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
  5. 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 ]>
  6. 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’