http://jsfiddle.net/Neson/mgb0zgzo/

ReactUserForm.coffee

# https://gist.github.com/Neson/b90301900ed0d09ed4af
# http://jsfiddle.net/Neson/mgb0zgzo/

{a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, circle, cite, code, col, colgroup, data, datalist, dd, defs, del, details, dfn, div, dl, dt, ellipse, em, embed, fieldset, figcaption, figure, footer, form, g, h1, h2, h3, h4, h5, h6, head, header, hr, html, i, iframe, img, input, Objectinput, ins, kbd, keygen, label, legend, li, line, linearGradient, link, main, map, mark, mask, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, path, pattern, polygon, polyline, pre, progress, q, radialGradient, rect, rp, rt, ruby, s, samp, script, section, select, small, source, span, stop, strong, style, sub, summary, sup, svg, table, tbody, td, text, textarea, tfoot, th, thead, time, title, tr, track, tspan, u, ul, video, wbr} = React.DOM


Input = React.createClass
  getDefaultProps: ->
    initialValue: ''
    onChange: (value) ->
      console.log value
  getInitialState: ->
    value: @props.initialValue
  handleChange: (e) ->
    @value(e.target.value)
  value: (value = @state.value) ->
    if value != @state.value
      @setState value: value
      @props.onChange(value)
    value
  render: ->
    value = @state.value
    input {type: "text", value: value, onChange: @handleChange}

UserForm = React.createClass
  render: ->
    form {},
      label({}, 'Please enter your name: '),
      Input({ref: 'UserInput', onChange: @props.handleUserNameChange}),
      p({}, '')

Timer = React.createClass
  getDefaultProps: ->
    start: new Date()
  getInitialState: ->
    elapsed: 0
  componentDidMount: ->
    @timer = setInterval(@tick, 100)
  componentWillUnmount: ->
    clearInterval @timer
  tick: ->
    @setState(elapsed: (new Date() - @props.start))
  render: ->
    seconds = (@state.elapsed / 1000).toFixed(1)
    span {class: 'timer'}, seconds

WelcomeBox = React.createClass
  greeting: ->
    now = new Date()
    hour = now.getHours()
    if hour < 12
      return 'Good morning'
    else if hour < 18
      return 'Good afternoon'
    else
      return 'Good night'
  render: ->
    div {id: "hello-box"}, @greeting() + ', ' + @props.name + '.',
      p({}, "Have a good day!"),
      p {},
        'You had wasted ',
        Timer({ref: 'TimeSpentTimer'}),
        ' seconds on watching this.'

UserBox = React.createClass
  getDefaultProps: ->
    UserName: ''
  getInitialState: ->
    UserName: @props.UserName
  componentDidMount: ->
    @refs.UserForm.refs.UserInput.value(@state.UserName)
  handleUserNameChange: (text) ->
    @setState UserName: text
  render: ->
    div {class: "user-box"},
      UserForm({ref: 'UserForm', handleUserNameChange: @handleUserNameChange}),
      if @state.UserName
        WelcomeBox({name: @state.UserName})


window.userApp = React.renderComponent UserBox(
  UserName: "Neson"
), document.body