HomePortfolio → Simple To Do List with ReactJS

Simple To Do List with ReactJS

December 26, 2018

Made with: ReactJS

Project Summary:

A very basic To Do app made with ReactJS

Source Files | Live Demo

This is a simple implementation of a To Do list to show ReactJS's basic features: components, props and state.

As starting point, we used create-react-app, a node package developed by the creators of ReactJS that provides the basic scaffolding you need to create a ReactJS site. If you don't have it installed you can get instructions here.

Once that's done, we go to the App.js component and remove everything we don't need. The App.js component will hold all the elements and components we need to render the web page of the application.

Aside from App.js, we need two other components: ToDoList.js, which contains our TODO list, and ToDo.js, which contains an individual TODO item.

The state of our application will reside in our main App.js component, and passed to the other components via props.

We can add TODO's through an input field. Each new TODO is added to our state and stored in an array which is also monitored by our app's state. When an item is added to the TODO list array, the array is passed to the ToDoList.js component via props, and the ToDoList.js component will map through the array and pass each task to the individual ToDo.js compenent so that it can render it to the screen as a checkbox form item.

When a task is completed, you can just click on the checkbox next to the task, and instructions to remove that item from the TODO list array is passed from our ToDo.js component to our ToDoList.js component, and from there to our main App.js component using event handlers and callback functions passed via props. App.js will then update state and re-render page: the TODO list will be re-rendered, this time without the item we just removed.

To make the app look nicer, we have also added some Bootstrap classes.

Bear in mind that this app is only the front end of a TODO list (there is no database) so your TODO list will disappear once you close your browser. For the purposes of this project, however, that is perfectly fine, since we only want to showcase a simple implementation of ReactJS components, props and state.

tech javascript react

© 2020 Crafted with Metalsmith and deployed to a DigitalOcean VPS.