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