{ul, li, div, h3, form, input, button} = React.DOM TodoList = React.createClass render: -> createItem = (itemText) -> (li {}, [itemText]) (ul {}, [@props.items.map createItem]); TodoApp = React.createClass getInitialState: -> items: [] text: '' onKey: React.autoBind (e) -> @setState text: e.target.value handleSubmit: React.autoBind (e) -> e.preventDefault(); nextItems = @state.items.concat [this.state.text] nextText = '' @setState items: nextItems, text: nextText render: -> (div {}, [ (h3 {}, ['TODO']), (TodoList {items: @state.items}) (form {onSubmit: @handleSubmit}, [ (input {onKeyUp: @onKey, value: @state.text}), (button {}, ['Add #' + (@state.items.length + 1)]) ]) ]) React.renderComponent (TodoApp {}), document.body