BUILDING A TODO APP WITH REACT
React Todo App Tutorial
A ReactJS Tutorial for Building Awesome Todo App
In this post, I’ll explain how to create a Todo app using React (a JavaScript library for building user interfaces), with ES6 syntax and React hooks from scratch. This will be a very basic app, with an input field for inputting the Todo item and a delete button next to each item to delete the item. Additionally, we will use the useState
hook from React to preserve the state of our application and some advanced JavaScript features such as map()
, arrayspread
, ternary operator
and filter()
methods. The goal of this tutorial is to assist you in getting started with React.
The complete project code can be found here.
Prerequisites
Please make sure to have the following installed:
- NodeJS and NPM — Download page
- Create React App — Installation guide
Setup
The first step is to create a new React app using thecreate-react-app
command-line tool. We will create a new directory and then create a React app inside the newly-created directory. You may the following commands to accomplish this task.
1 $ mkdir react-todo-app
2 $ cd react-todo-app
3 $ create-react-app ./
To get started from the scratch, let’s remove everything from the src
folder except App.js
and index.js
files. Inside the App.js
, remove everything except the parent heading and add an h1
element to it <h1> React Todo App </h1>
. To see your app in action, run npm start
in the terminal window at the root of your project.
This GitHub commit reflects the changes till this point.
CSS and Style
So far, we have created a very basic app that contains only one h1
element. But before moving on, let’s give our app some basic styles to make it appear great. Create a fileApp.css
in the src
directory and import it into the App.js
file. Add the styles from this gist to the App.css
file.
You can compare your project with this GitHub commit.
Creating the Initial Mockup
We will start with a simple mockup that has an input
field and a button
for adding a new Todo item. In the App.js
file, create a new div
with the class input-wrapper
within the parent div
.
Create and Display Todos
This section consists of the following steps:
1. Create a New Todo Item
To maintain track of the state inside the React component, we’ll use the useState
hook. The useState
hook takes a state’s initial value and returns an array with two values: the first is a getter function that displays the defined state’s current value, and the second is a setter function that updates the state.
We’ll utilize useState
in this app to keep track of every new Todo item and Todo list. But first, inside the App.js
file, we’ll import the useState
hook as follows:
import { useState } from "react";
To begin, we’ll create a todo
state (getter) with an undefined
value and a setTodo
(setter) method to set the current todo
item’s value:
const [todo, setTodo] = useState("");
The input fields have an onChange
event handler which is triggered every time the value of that field changes. This event handler does not provide the value directly but instead provides an event
object that can be used to get the value using event.target.value
.
The setTodo
setter function will be attached to the onChange
event handler, which will pass the value of the input to the setter function through event.target.value
. The value from the input is subsequently used by the setter method to update the state of todo
.
You can compare your project with this GitHub commit.
2. Add Todo Item to Todos List
After creating a new Todo, we need to add it to the Todos list. We’ll proceed in the same manner as we did when generating a new Todo item. We’ll create a new useState hook to keep track of the status of the Todos array and add new items to it.
const [todos, setTodos] = useState([]);
Next, let’s create an onClick
functionaddTodo
to add todo
item to the Todos array. This function will be triggered when the Add
button is clicked. It’s important to remember that the state should never be directly mutated. Therefore, we’ll need to make a copy of the Todos array before adding todo items to it. To copy the Todos array and add the todo item to it, we’ll use the Array spread operator.
const addTodo = () => {
setTodos([...todos, todo]);
};
We want to ensure that the value isn’t empty when adding a new Todo item to the list. This may be done with an if statement in our addTodo
function, which checks for an empty value. Also, after the value of the input is added to the Todos list, we want to clear the input field.
Finally, we will pass this function to the onClick
handler of the Add
button.
<button className="add-button" onClick={addTodo}>
This GitHub commit reflects the complete code till this point.
3. Display Todo Items
We’ll make an ul
with the class todo-list
to display the entries from the Todos list. We’ll iterate over the elements in the array with the map()
method and then show them as li
inside the ul
element. We will call the map()
method with two arguments, the value of the current item being processed in the array and its index. For our purpose, the index
will be utilized as the key of li
.
We’ll make a new div
with the class todo
for each item in the Todos list. This div
will have an li
item and a delete
button for removing it.
We want to make sure that the list isn’t empty just before we display it. The ternary operator will be used to display the list items as well as a message if the list is empty.
You can compare your project with this GitHub commit to this point.
Deleting Todo Items
Let’s start by creating a onClick
function that triggers when the delete button is clicked. The filter()
method will be used in this delete function, which will construct a new array with all the entries that meet the stated criteria. In our example, we want to make a new Todos array that has all of the items except the one that is being deleted. Finally, update the state with newly created Todos.
Pass the deleteTodo
method to the onClick
handler of the delete
button.
You can find the code to this point here.
Code Refactoring
To gather the user input and show Todos items, we may rebuild our app by building two independent components, TodoInput
and TodoList
. In the src
directory, create two files: TodoInput.js
and TodoList.js
. Fill each file with the content indicated in the code snippets below:
Finally, import these two components in the App.js
component:
Now that you’re familiar with the basics, it’s time to get your hands dirty and start building your first React app. Good luck and Happy coding🎉🎉🎉