React with Coffeescript (No JSX)

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<div id="container"></div>

CSS

body{
  font-family: sans-serif;
}
#container{
  background: lightgoldenrodyellow;
  border: 0.5px solid gray;
  margin: 30px;
  padding: 20px;
}

CoffeeScript

R = React.DOM

TodoList = React.createClass
  render: ->
    createItem = (itemText, index) -> 
      R.li {key: index + itemText}, itemText
    R.ul {}, @props.items.map(createItem)
    
R.TodoList = (props) ->
  React.createElement(TodoList, props) 

TodoApp = React.createClass
  getInitialState: -> items: [], text: ''
  onChange: (e) -> @setState text: e.target.value
  handleSubmit: (e) ->
    e.preventDefault()
    nextItems = @state.items.concat @state.text
    nextText = ''
    @setState items: nextItems, text: nextText
  render: ->
    R.div {},
      R.h3 {}, "TODO"
       R.TodoList {items: @state.items}
       R.form {onSubmit: @handleSubmit},
         R.input {onChange: @onChange, value: @state.text}
         R.button {}, "Add #{@state.items.length + 1}"  



ReactDOM.render(
  React.createElement(TodoApp), 
  document.querySelector("#container")
)