Skip to content

Instantly share code, notes, and snippets.

@tswicegood

tswicegood/React-Todo-Example-in-CoffeeScript.markdown

Last active August 29, 2015 14:13
Show Gist options
  • Save tswicegood/99349a87c91e9df6f8c6 to your computer and use it in GitHub Desktop.
Save tswicegood/99349a87c91e9df6f8c6 to your computer and use it in GitHub Desktop.
Download ZIP
React Todo Example in CoffeeScript
Raw
index.html
<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<script src="http://fb.me/react-0.12.2.min.js"></script>
</html>
<body>
<div class="row">
<div class="columns small-6">
<div id="example"></div>
</div>
</div>
</body>
</html>
Raw
React-Todo-Example-in-CoffeeScript.markdown
Raw
script.coffee
{ul, li, div, h2, form, input, a, button} = React.DOM
TodoList = React.createClass
displayName: "TodoList"
render: ->
createItem = (itemText) ->
li {}, itemText
ul {}, @props.items.map createItem
TodoApp = React.createClass
getInitialState: ->
{items: [], text: ""}
displayName: "TodoApp"
onChange: (e) ->
console.log "changing to #{e.target.value}"
@setState text: e.target.value
handleSubmit: (e) ->
console.log "handleSubmit", e
e.preventDefault()
nextItems = @state.items.concat [@state.text]
nextText = ""
@setState {items: nextItems, text: nextText}
render: ->
div({},
(h2 {}, "Todo List"),
(TodoList {items: @state.items}),
(form {onSubmit: @handleSubmit},
# TODO Turn all these div calls into helpers
(div {className: "row"},
(div {className: "columns large-12"},
(div {className: "row collapse postfix-radius"},
(div {className: "small-9 columns"},
(input {onChange: @onChange, value: @state.text, placeholder: "add task…", type: "text"})
),
(div {className: "small-3 columns"},
(a {className: "button postfix", onClick: @handleSubmit}, "Add ##{@state.items.length + 1}")
)
)
)
)
)
)
example = document.getElementById "example"
todoApp = React.createElement TodoApp, null
React.render todoApp, example
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment