Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
react message start
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 =
# 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' }, [
ref: 'toggleActionBtn'
onClick: toggleAction.bind @, data
, if showSubhead then 'hide subhead' else 'show subhead'
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.