Some time ago, I had built a simple standalone ToDo list in React, which stores its data in the browser localstorage, and I thought it came together quite neatly. Its actually less than 200 lines of javascript code (wasn't deliberately trying to play golf with the line count - link to the code near the bottom).

The use of local storage allows the list to retain its data across client restarts. So it kind of works like the apps of old days, when we didn't have a backend server syncing the data on different devices.

Try it out below...

Some features : You can click on an item text to modify it. You can also move items across lists by clicking on the arrows. Item deletion uses the red 'x'. Doesn't have drag and drop as yet.

You need Javascript to run this program

The source code for the todo list is here (or view source of this page in dev tools - its unminified). Also, all the components are in a single file (there are only a handful), but I am not using webpack, so had little option. Its terrible... I know (the horror :-)). Fair warning... the React JSX has been transpiled, so its going to look a bit different from your typical React code you are used to.


comments powered by Disqus