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. 

When you mix React (JavaScript) with HTML and CSS, you can develop cool modular web applications — like a to-do app.

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

Try out my React Todo List for yourself.

I’ve added mobile-responsive styling, so it will work whether you’re on a smartphone or desktop computer.