Building a Todo app with React.js
In this article, we’ll build an extremely simple app using Facebook’s react.js. If you are unfamiliar with this library, then I would strongly recommend reading the complete tutorial on building a Comment system using React.
This article has been updated several times in the past few months, to prevent it from becoming outdated in lieu with the rapid changes in the react.js library
Thinking in components
The fundamental way of building a React.js app is to break down your app into bunch of useful components and then work your way backwards to build them separately. Once the individual components are ready, we can wire them up to exchange data between the components. For instance, our Todo app can be decomposed into the following components and hierarchies,
React ofcourse needs the
react.js library and the JSX Transformer for sugar syntax. Before, we proceed we’ll add these dependencies
head of our document.
Component 1 - TodoApp
This component will hold a list of todo items that will be shared by its child components in various forms. The initial state
items will be a blank list. The list will be updated as soon as a new item is added via the
Component 2 - TodoBanner
It simply contains a heading tag. Nothing fancy here!
Component 3 - TodoList
It accepts a list of items and wraps each item around a
TodoListItem component. The final result is then wrapped with
Component 4 - TodoListItem
It wraps list elements with
<li> so that it renders as a list block in the final HTML.
this.props.children predictably contains
all the descendents passed to the
TodoListItem tag from its parent component.
Component 5 - TodoForm
It contains a text field followed by a button to trigger the addition of item in the Todo list. This component will hold the
item entered in the textfield and both of them are kept in sync using the
onChange event. As soon as the submit
button is pressed, the
item is passed to its parent component and the focus is returned back to the textfield.
The complete working demo can be found here on Codepen. Ofcourse there’s lot to improve but the code is modular enough to handle any kind of enhancement.
Did you enjoy reading this article? I'd love to hear your thoughts. Shoot me an email or send me a tweet if you've got any comments.
‹ Back to Home