react message start

react-message.coffee

TU = React.addons.TestUtils

# Component actions
toggleAction = (state) ->
  val = state.get 'showSubhead'
  newState = state.set 'showSubhead', not val
  render newState

incrementCounter = (state) ->
  val = state.get 'count'
  newState = state.set 'count', val + 1
  render newState

# React component definition
Message = React.createClass
  render: ->
    data             = @props.data
    # Breaking our immutable property into variables
    count            = data.get 'count'
    subhead          = data.get 'subhead'
    message          = data.get 'message'
    showSubhead      = data.get 'showSubhead'
    toggleAction     = data.get 'toggleAction'
    incrementCounter = data.get 'incrementCounter'
    # Template with values plugged in
    React.DOM.div null, [
      React.DOM.h1 { ref: 'messageTitle' }, "hi #{message} #{count}"
      React.DOM.h3 { ref: 'subhead' }, subhead if showSubhead
      React.DOM.div { className: 'u-displayFlex u-spaceBy--5px' }, [
        React.DOM.button
          ref: 'toggleActionBtn'
          onClick: toggleAction.bind @, data
        , if showSubhead then 'hide subhead' else 'show subhead'
        React.DOM.button
          ref: 'incrementCounterBtn'
          onClick: incrementCounter.bind @, data
        , 'increment counter'
      ]
    ]

# Generic function to render our component into the body tag
render = (state) ->
  mountNode = document.getElementsByTagName('body')[0]
  message = React.createElement Message, data: state
  React.render message, mountNode

# The map of values we pass to our component to display
state = Immutable.fromJS
  count: 0
  message: 'world!'
  subhead: 'im the subhead'
  showSubhead: false
  toggleAction: toggleAction
  incrementCounter: incrementCounter

# Render the component onto the page
render state