Build a simple to-do app in React (Part 1)
In this how-to, I’ll walk you through building a simple to-do app in React. It’s a great Javascript library for building small interfaces like this one, and a good way to get started developing and testing your skills.
Part 1: Display a list of default todos or a message when all todos are cleared.
Prerequisite: You will need some familiarity with HTML5, ES6 and have a beginner level introductory knowledge of React.
Why should you build a to-do app as an aspiring React developer?
From a beginner’s perspective, I found that a to-do app is a small enough project to manage and it really helps solidify the concept of when to use props versus state throughout your app. Understanding what is going in the app while building it, will help boost your confidence moving towards bigger and more complex apps.
What can you look forward to?
We will make use of arrow functions ()=>{}, map method map(), the filter method filter() and the spread operator ... in this exercise. These are all ES6 features. If you are not familiar with ES6, here is a great article to get you started: Shape-Shifting Cats — Intro to ES6.
We’ll break this app into 3 parts.
Part 1: Display a list of default todos or a message when all todos are cleared.
Part 2: Delete an item in the list by clicking directly on it.
Part 3: Add an input field to add new todos to the list.
You can also move to a different part of the article if you would like to or find the completed to-do app on my GitHub repository.
Getting started
Create a new project using create-react-app. The first thing we are going to do is clean up the App.js file by removing unwanted content from the default project. It should look like this before starting the to-do app:
We will use our App.js file as the root container for our entire app.
The App.js a component is a stateful component, and hence, it requires us to import the Component Class from ‘react’ module. We can then implement the Component class in our App.js component by using the ‘extends’ keyword. This was already done for us by create-react-app.
Part 1: Display a list of default todos or a message when all todos are cleared.
An important thing about stateful components is that they manage states. So, in our, App.js, we will start by creating the state of the App.js component.
We add state above our render methodrender () like so:
Explanation:
Inside our state, we have created an array called todos — which contains a list of 3 objects. Each of the 3 objects consists of an id and content key-value pair. The content of the 3 objects will be our 3 default todos upon opening the app.
We’ve also added a title for presentation purposes.
Displaying our list of default todos
Next, we need to loop through our list of objects to display them. We will do that by using the map() method. Let’s first create a new component called TodoList.js which will now be a functional component.
Now we need to map through our default list of todos which is situated inside of our App.js component. To do that, we need to send it from App.js through to our child component, i.e the TodoList.js component. We do that using props .
Explanation:
First, we pass propsthrough as an argument to our functional component.
We then assign todos to props and map over it. Bear in mind, that we will have to use our new props in our App.js component soon.
We map through our todos and we allocate the id of our todos to the key of our wrapping tag. We’ve also created a <span> where we can display the content of our individual todos. To display dynamic content, we use curly brackets.
Display a message when all todos are cleared
Let us now add a bit of complexity to our project by adding a ternary statement that will either display our list of objects OR, if all objects have been cleared, it will display a message. This will be useful for part 2 of this article.
Note: A ternary statement is a short alternative for using an if…else statement.
Next step is to go back to our App.js file, and import our TodoList.js component, and pass our todos props to it.
We can now start our app in our terminal with npm start and we will see our list of the 3 default todos from our state being displayed in the browser.
By following these steps, you should now be able to display a list of default todos or a message when all todos are cleared.
Part 2: Delete an item in the list by clicking directly on it.
Part 3: Add an input field to add new todos to the list.
You can also find the completed to-do app on my GitHub repository.
Please send through your thoughts on the subject and feel free to show this post some appreciation so that other developers can find it.
