The Ultimate Guide to Build a Todo App with React’s useReducer Hook

The React Build Tutorial: Here is how this works!

Screenshot by Author

A Todo app is a software that allows you to create todos, read them, delete them, and sometimes toggle if done or not. In this article, we'll be building a Todo app that possesses all the functionalities above.

In this React build, we are going to be using:

• Node.js
• VScode
• React
• The useReducer hook.
• VScode extensions like prettier, Es6/Es7 React code snippets
• Firebase for hosting

So without further ado, Let's get started!

Contents
· 1. Creating a React App
  ∘ React App Installation
  ∘ Here is how this works!
  ∘ React Project Clean-up
· 2. Setting the Todo App’s Main Layout
  ∘ Now the styling!
· 3. Creating the todos Component
  ∘ The State
  ∘ The Reducer and the Actions
  ∘ The Mutability
  ∘ The Payload
  ∘  Reading the todos
  ∘ Now the styling!
· 4. Creating the Todo Component
  ∘ Destructed props
  ∘ The Toggle and Delete Functionalities
  ∘ Now the styling!
· 5. Deployment to Firebase
  ∘ The Required Steps 
  ∘ Project Setup
  ∘ Firebase Deployment Steps Begins
  ∘ The Questionnaire
· In Conclusion

1. Creating a React App

Now, let’s create a new folder and name it todo-app. Right click on the folder and click open with code. This step is to ensure that the right folder is opened on your Editor.

Now that you have your editor open, press ctrl + j on windows or command + j on Mac to open your terminal.

Now, let's install and setup the React app.

React App Installation

For me, this process is by far the most easiest configuration/ installation I have ever worked with. It is so sleek. Thank you Facebook!

So Facebook developers, the creators of React made a script which installs and sets up a React app for you without any stress. To use this script, just run this on your terminal.

npx create-react-app  .

So, this will take some time to set up, so let me explain what it does.

Here is how this works!

npx is a part of the Node Package Manager (npm), which installs React and other third party libraries like:
* The light weight development server
* Web pack for bundling our files
* Babel for compiling our JavaScript code and some other tools.

Here is the fun part!

npx runs a remote script that ensures you have the latest version of React installed in your project instead of installing it locally. By the way, create-react-app is the name of the remote script.

"." specifies we want the script to create the React app in the same folder we're in now, and not make another folder to create the React app.

If you had to make a new folder name, you could just provide the folder's name in place of "." , and it will make the folder for you and create the React app in it.

You will know the installation process is complete if you see "Happy Hacking!" on your terminal. Relax! We aren’t hacking any thing😂.

At the end of the installation process, You will see these words.

We suggest that you begin by typing:
cd todo-app
npm start
Happy hacking!

Now, Our React app is installed, and it's time to start it.

On your terminal, run npm start.

npm start

As soon as the command is done running, your local host will open on your default browser. I will suggest you use Google chrome because its developer tools is a blessing.

Your React app will be running on http://localhost:3000.

http://localhost:3000

React Project Clean-up

Now, we need to delete these files from our src folder in our todo-app directory or folder.
* App.test.js
* logo.svg
* setupTests.js.

We are deleting these files because they are not useful to us.

In your App.js file, remove the following:

Import logo from "./logo.svg";

Then go ahead and delete everything in the <div> tag with the className of app, and replace what you removed with a h1 tag that contains "I am a todo app".

In your App.css file, delete everything in there. Save the changes and check your browser. If you did everything correct, you will see the text "I am a todo app" on your screen.

Yeah, that’s great, we are making progress!

Now, you will see some space at the top and left side of the text. So, in your index.css file, add this piece of code to the top.

*{
  margin:0 ;
  padding:0;
}

This will get rid of the margin and padding of the page.

Now, you don’t want the title of your app to be React app, do you?

Go to your index.html file, and in the header tag, create a title tag and put “My Todo app” in it.

<title>My Todo app</title>

2. Setting the Todo App’s Main Layout

Before we get right into the various elements of our Todo app, let's setup the main layout, so we have the colours and other important stuffs ready in our main CSS file.

In your App.js file, the code snippet below is going in there.

Now the styling!

In your App.css file, the code snippet below is going in there.

Now we are going to work on the components of the todo app:
* todos
* todo

3. Creating the todos Component

Let’s create a new component. We will be using the BEM convention as the naming convention. So, we need to create a file named Todos.js and its own CSS file named Todos.css.

So, in your Todos.js file, we use the snippet rfce to create a new functional component and set the <div> element of the component to have a className of todos.

The State

In the code snippet above, the form is created — the input and the create/add button. Then, event handlers are created to handle the form’s submission and the change of the input value.

The state change of the input value is managed by its state created via the useState hook .

The useReducer hook manages the state of the todos. This hook contains the parameters which are:
* The state it is managing (todos)
* The function (reducer)
* The initial state of the todos, and 
* Dispatch that calls the reducer function containing certain conditions.

The Reducer and the Actions

The reducer takes in the todos( The state) and action as parameters. The switch case method is used to set the conditions of the each action called, as specified by the variable – ACTIONS.

The Mutability

The mutation of the todos' state without having the initial state of the todos at each point is not advisable. Hence, in the conditions where the todos has to be mutated, the todos' state is duplicated by using the spread method denoted by the triple dots in front of todos […todos].

The Payload

The function newTodo takes in the object comprising of the id, name and complete elements. The payload acts as the object variable encompassing these elements.

Reading the todos

The map function iterates through each todo in the array of todos, where each todo, its key, id and dispatch are passed as props.

Now the styling!

In your Todos.css file, this code snippet goes in.

4. Creating the Todo Component

Let’s create another component. Again, we will be using the BEM convention as the naming convention. So, we need to create a file named Todo.js and its own CSS file named Todo.css.

So, in your Todo.js file, we use the snippet rfce to create a new functional component and set the <div> element of the component to have a className of todo.

Destructed props

In the code snippet above, the ACTIONS variable is imported and the todo and dispatch are destructed as the props.

The Toggle and Delete Functionalities

For each todo, you have 2 buttons – the toggle and delete button. Each todo has a condition for its style (color) which is toggled by the condition laid in the reducer function called by dispatch.

Also, when the delete button of a todo is clicked, as expected, the todo will be deleted in accordance with the condition in the reducer function called by dispatch.

Now the styling!

In your Todo.css file, this code snippet goes in.

Now we are pretty much done with the functionalities

Screenshot by Author

You can change your styles — Background, Button colour, and so on, according to your taste.

5. Deployment to Firebase

We will the using firebase for the deployment.

The Required Steps

Now, go to https://firebase.goggle.com ,then click go to console. You will be expected to log in to your Google account. Once you are logged in, follow the following steps:

Project Setup

Click on "add project":

Screenshot by Author

Give your project a name:

Screenshot by Author

You can enable your Google analytics. If you don’t want to, there is no problem. But in this case, we will just enable it.

Screenshot by Author

Screenshot by Author

Then click continue. Once you see the picture below, your project is ready, so click continue.

Screenshot by Author

Click on the web icon </>

Screenshot by Author

Register your app then click continue.

Screenshot by Author

Proceed to click on continue to console. Now on the side bar menu, click on hosting then click get started.

Screenshot by Author

Firebase Deployment Steps Begins

So go on your command line (cmd) on windows or terminal on Mac.

Run npm install -g firebase-tools.

If you did everything correct, you will see no errors meaning it has been installed.

Then run firebase login.

If it returns logged in as "the email you used", you are good to go.

Then cd to the directory of your project.

If you don’t know where it is, go to where you save the folder on your file explorer on your PC. Then, click on the bar on top of that folder, copy the path and cd to that path on your terminal.

The highlighted text is the path.

Screenshot by Author

Then run firebase init

Screenshot by Author

Screenshot by Author

Screenshot by Author

The Questionnaire

It will give you a questionnaire. y is for yes, n is for no.
# Are you ready to proceed? Type y.

# Navigate to “hosting” using the arrow keys, select using the space bar once you’ve reached “hosting” then confirm by pressing the enter key.

# Select “use an existing project”.

# Select the project you just registered.

* On your terminal on VS code, run npm run build.

Once the process is complete, go back to your command line or terminal to finish the questionnaire.

# For your public directory, type in “build”.

# Allow to rewrite all URLs to index.html.

# Say no to overwriting.

Then your init process will be completed.

* The final step is to run firebase deploy on your command line or terminal.

Once it's deployed, you will get your URL to access your Todo app any where you want.

Congratulations, you just built your very own Todo app that’s fully hosted.

In Conclusion

We built your very own Todo app with React where we learnt how to create a React app, create components, use React hooks especially the useReducer hook, style our project and deploy our App to firebase.

So has this been fun? Has it been helpful? Thanks for your time!

More content at plainenglish.io