generator-react-gulp-browserify-less/app/templates/app.coffee

A Yeoman Generator for facebook's React framework. It includes gulp, browserify,babel,source maps, livereload and famous official Twitter bootstrap LESS version.

React = window.React = require("react")
ReactDOM = require("react-dom")
Timer = require("./ui/Timer.coffee")
mountNode = document.getElementById("app")
TodoList = React.createClass(
  displayName: "TodoList"
  render: ->
    createItem = (itemText) ->
      React.createElement "li", null, itemText

    React.createElement "ul", null, @props.items.map(createItem)
)
TodoApp = React.createClass(
  displayName: "TodoApp"
  getInitialState: ->
    items: []
    text: ""

  onChange: (e) ->
    @setState text: e.target.value
    return

  handleSubmit: (e) ->
    e.preventDefault()
    nextItems = @state.items.concat([@state.text])
    nextText = ""
    @setState
      items: nextItems
      text: nextText

    return

  render: ->
    React.createElement "div", null, React.createElement(TodoList,
      items: @state.items
    ), React.createElement("form",
      onSubmit: @handleSubmit
    , React.createElement("input",
      onChange: @onChange
      value: @state.text
    ), React.createElement("button", null, "Add #" + (@state.items.length + 1))), React.createElement(Timer, null)
)
ReactDOM.render React.createElement(TodoApp, null), mountNode