ToDo app with ReactJS

In Last article we covered a basic intro to ReactJS and its jargon. Along with that we saw a basic component that was interacting with input element. This week we will see ReactJS complex component structure.

A Todo app with ReactJS and Bootstrap CSS will walk you through the multi-component app. This will also set up a basic understanding of how the components communicate with each other. In the very same context of communication between components in ReactJS, closures are the key things that get it to working.

Closures:
Closures are the functions which remember their creation context.

In react, one thing is straightforward that data flow is one directional, from up in hierarchy to downwards like in upper level nodes to lower level nodes in DOM tree. So you can’t define a method that will update the state of components upper in hierarchy.

So, other way you will have methods defined in the Parent Components to change the Parent’s data and these methods will be provided to Child Components to interact with the messaging between components. The methods passed will be closures defined in the Parent’s contest and will be executed in the Child’s context.

As in the previous tutorial; intro to reactjs; we saw a simple one Component application. The same small reactJS app can be broken to components like WelcomeApp, WelcomeInput, WelcomeMessage. Here the WelcomeApp will contain the WelcomeInput and WelcomeMessage components. The following code demonstrates how the methods are passed as properties to the child components and other components are updated in similar way.

In the similar way, ToDo app components will be coded and arranged.

The above file is the main file of application. In industry scale project, it is good idea to keep the components in separate files and use the bundling library like Browserify or Webpack to create a bundle of all files of your application.

In the application:

App Component is holding the data and methods to act on that data.

ToDoForm Component is having the form controls of the ToDo app. This will serve creation of new todo items and edition the existing todo items.

ToDoAction Component provides and maps the actions for a todo item. This component will be consumed by the component which will generate the Todo items’ list. In this component, there is a control block which will generate different types of button for todo item, depending upon the status of the todo item.

ToDoList Component will create the list of todo items and add the actions to the items with the help of ToDoAction Component. Inside component, it will decide class name of the item on the basis of todo item’s status. These classes are already defined in Bootstrap CSS.

Here is how it looks on browser and in the ReactToolbar