React.js TODO List Example App in Browser Using CoffeScript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be building a todo list web app in react.js using coffescript.All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

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="https://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>

 

 

 

script.coffee

 

 

{ul, li, div, h2, form, input, a, button} = React.DOM

TodoList = React.createClass
  displayName: "TodoList"

  render: ->
    console.log "TodoList.render called"
    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

Leave a Reply