Create a To-Do List App Using React and Material UI
By: Souvik Paul
Tags: Reactjs, Front End Development, Nodejs, Create React App, Material Ui

In this article, we’ll create a responsive To-Do list application in which we will be able to add our tasks and delete all of them.

The final look of this project is shown in the following videos.

To understand the basics of React in a simple way, please visit this article.

The code for this project is also available in my GitHub repository.

Now, let’s dive into the project.

Initial setup

First of all, we have make sure that Node.js is installed in our system. If so, we’ll create a directory with name React_Projects and then, we’ll open the terminal and navigate into that directory. There, we’ll run the following command —

npx create-react-app myapp

The above command will set up our development environment so that we can use the latest JavaScript features, provides a nice developer experience, and optimizes our app for production. We’ll need to have Node >= 8.10 and npm >= 5.6 on our machine.

Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so we can use it with any backend we want. Under the hood, it uses Babel and webpack, but we don’t need to know anything about them.

When we’re ready to deploy to production, running npm run build will create an optimized build of our app in the build folder.

After running the above command, the directory structure will be -

And after customizing it, the final directory structure will look like the following —

Procedure

Step 1: First of all, we’ll open the index.html file in the public directory and modify the <header> section and include a style attribute in the <body> tag as follows —

Step 2: In this step, we’ll create the app bar for our application. For this, we’ll create a folder components in the src directory. In this directory, we’ll create a file named appBar.js . Then, we’ll open the App Bar section of material-ui.com and copy the JS code and modify it as follows.

Now, we’ll install Material-UI’s source files via NPM using the following commands —

npm install @material-ui/core

and npm intall @material-ui/icons .

Step 3: Now, we’ll create another file todoList.js in the components directory. This file will contain the main logic for our application.

In the above code, we’ve used a new feature of React ( useState ) called as Hook. It lets us add React state to function components. Otherwise, earlier we have to use class components for using the state feature of React.

So, If we write a function component and realize we need to add some state to it, previously we had to convert it to a class. Now we can use a Hook inside the existing function component.

To style the above component, we’ll create another file todoList.css in the same directory.

Step 4: Finally, we’ll install Bootstrap and add into the index.js file.

To install Bootstrap, we’ll use the following command -

npm install bootstrap@4.0.0 --save

So, the index.js file will be modified as -

Step 5: At last, we’ll start the development server using command — npm start . It will automatically open a webpage on the system’s default browser rendered by localhost:3000 .

References