Skip to content

Instantly share code, notes, and snippets.

Embed
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 = @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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment