/ reactjs

Sample ToDo app using React.js

Recently I started learning React.js and developed this sample ToDo list App fully in React.js

Here is my github repo for this ToDo app.

The app has basic ToDo functionality to add new todo, edit (inline), delete a todo item, drag & drop to sort or change order.....without any backend to keep things simple for now. Its vanilla html css react.js and jQuery. I have used jQuery plugin jquery-editable for inline text editing of todo.

Rohan Pujari helped me to fix couple of bugs along with guiding me how we should not think jQuery way to implement UI in React.js. That in-turn helped clear few doubts and it also helped me to implement or mix jQuery in right way with React.js (i.e. without attaching any ids’s or iterating over id’s to manipulate DOM) So this ToDo app is 95% React.js and remaining is css, html, js, jQuery.

The jQuery editable plugin is attached to the DOM using componentDidMount() method and refs to attach it to a DOM node. Here is a snippet for the EditableField component in this ToDo App.

var EditableField = React.createClass({
    componentDidMount: function() {
      $(this.refs.editable.getDOMNode()).editable()
    },
    render: function() {
      return (
        <a href="#" ref="editable" id="edit-item" data-type="text" data-title="Edit value">{this.props.item}</a>
      );
    }
});

Here is how this simple ToDo app looks like.

enter image description here
enter image description here

This React.js article has helped me to learn basic concepts of React.js along with how state & props work. I rate this article 10 out of 10 :)

Rohan Daxini

Rohan Daxini

Founder at Kiprosh | Ruby, Elixir, JS & C lover | Life Long Learner | Books | Technology | Mindfulness | Gratitude

Read More