Coding a to-do list project is kind of like a right of passage when you’re learning how to use React.
In creating a to-do list React app, you can learn about state, props, and components. State holds persistent data, so the GUI can be manipulated without refreshing the page or server-side rendering. Props is the data that is set and passed through the state. Components are the building blocks that the app is composed of.
What’s the Todo List Do?
I think the React to-do list is pretty awesome.
In real-time (no page refresh), you can add, modify, delete, and filter to-do items. It lets you keep track of what you need to do, what you’ve already done, and everything all together.
- add items to do
- mark todo items as complete
- delete todo items
- filter todo items
In addition, it’s using local storage functionality. That means the items you add to the list are stored locally — on your web browser — and will still be available to you if you refresh the page. It’s a little bit of magic to make this simple app feel more like a database-driven application (even though it’s not) — oh, the possibilities!
Build Your Own Todo List
For the basis of this to-do list project, I followed along with a tutorial I found on YouTube. It’s a thorough how-to guide that helped refresh my memory about some of the basics of React and taught me a few new tricks, too. The tutorial video is an hour and a half long, but it’s great to watch another developer do a live-coding session and absorb their troubleshooting process when something doesn’t go as planned.
My version is very similar, but I’ve added my own spin to do a few things differently — like adding responsive styling, so it also works on mobile devices and makes a better example for my blog.
If you’re trying to learn react — or just like watching coders code — then I recommend checking out the tutorial from Dev Ed on YouTube.
Try the Demo
I’ve added mobile-responsive styling, so it will work whether you’re on a smartphone or desktop computer.