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
You can’t perform that action at this time.