The last article I read which mentioned the words
todo app and
React in one sentence began with: "Every time you write a todo app in React, a bunny dies" 😂. But hear me out:
Yes, this is an article about how to write a todo app, but I chose a different approach for beginners.
I'm currently working as an assistant coach at a
boot camp company which teaches awesome people who are willing to learn coding web frontend technologies. At some point we are, of course, teaching them React. Every weekend, the students get a homework in order to reflect on the topics they learned over the week and deepen their knowledge. And what better way to learn
useState and thinking in React while coding a todo app. <- I said the two words again in one sentence. 😂
I know from my experience that, as a beginner, it is hard to learn these things. Because you not only have to learn "how to think as a programmer", but you also have to learn the syntax of a new language. And as a complete beginner, a React functional component can look very strange.
Therefore, I created a repo where I documented the whole process of creating a simple todo app in React. Every important feature such as
add a todo,
delete a todo,
toggle a todo,
edit a todo lives in their own pull request. So you are able to see how the project would evolve. I also wrote a detailed pull request description where I describe, why I coded it this way (in every pull request). And I also committed very often. You can see in the branches how I added the code to the project.
If you are just beginning to learn React and are also having trouble tackling a problem, I hope this repo helps you understand how you would solve such task. You are not sure if you should take a look? Allow me a little self-advertising (this is the message I got from my head coach after checking the repo)
Here is a list of things I recommend you should know in order to get the best out of your journey through this repo:
- have a basic understanding of Git & GitHub
- have a basic understanding of HTML
- have a basic understanding of CSS
- have read the React documentation (hook version here) and understand (and maybe tried it out)
- have read Thinking in React
What you will learn:
- reading and understanding
- how to navigate through pull requests in a GitHub repo
- read code from another programmer
- how to start a project
- how to structure your coding process
- how to write good commit messages
- React functional components
- learn the usage of
- where and how to handle
I probably could have used other advanced React tools to solve the tasks, such as
custom hooks or
useReducer instead of
useState, but my goal was to show you how to solve this with just a bare minimum of React understanding.
Here is the repo link: https://github.com/mpagels/react-todo-app-walkthrough
If you have any questions on how and why I solved it this way, please start a review and ask your question there. (It's good for your GitHub statistics, and other people with the same question can join the discussion).
I hope you have fun with it, and I wish you all the best on your journey to becoming a React developer.