Building a Responsive Todo List App with React and Material-UI

Creating a todo list application is a great way to get started with building web applications with React. In this tutorial, we’ll walk through the process of building a simple todo list application using React and Material-UI, a popular UI library for React.

Requirements

To follow along with this tutorial, you’ll need a basic understanding of React and JavaScript. You’ll also need to have Node.js and npm (Node Package Manager) installed on your computer.

Setting up the Project

First, we’ll create a new React project using create-react-app, a tool that sets up a new React project with a basic file structure and some commonly used packages. To create a new project, open a terminal and run the following command:

npx create-react-app my-todo-app

This will create a new directory called my-todo-app with the basic file structure for a React application. Next, navigate into the project directory:

cd my-todo-app

Installing Material-UI

We’ll be using Material-UI to style our application. To install it, run the following command in the terminal:

npm install @material-ui/core @material-ui/icon;

This will install the core Material-UI package and the icons package, which includes the DeleteIcon component that we’ll be using in our application.

Creating the TodoList Compon

Now that we have our project set up, we can start building our todo list component. Create a new file called TodoList.js in the src directory and add the following code:

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Checkbox from '@material-ui/core/Checkbox';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Input from '@material-ui/core/Input';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({
  form: {
    display: 'flex',
    alignItems: 'center',
    width: '100%',
    marginBottom: theme.spacing(2),
  },
  formControl: {
    marginRight: theme.spacing(1),
    flex: 1,
  },
  box:{
    margin: "20px auto",
    maxWidth: "500px",
    boxShadow: "1px 1px 10px #ddd",
    padding: "15px 20px"
  }
}));

function TodoList() {
  const classes = useStyles();
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    setTodos([...todos, { text: input, completed: false }]);
    setInput('');
  }

  const handleDelete = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  }

  const handleCheck = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
  }

  return (
    <div className={classes.box}>
      <form className={classes.form} onSubmit={handleSubmit}>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="todo-input">Add Todo</InputLabel>
          <Input
            id="todo-input"
            value={input}
            onChange={e => setInput(e.target.value)}
          />
        </FormControl>
        <Button type="submit" variant="contained" color="primary">
          Add
        </Button>
      </form>
      <List>
        {todos.map((todo, index) => (
          <ListItem key={index}>
            <Checkbox
              checked={todo.completed}
              onChange={() => handleCheck(index)}
            />
            <ListItemText
              style={{ textDecoration: todo.completed ? 'line-through' : 'none'
    }}
            >
              {todo.text}
            </ListItemText>
            <IconButton onClick={() => handleDelete(index)}>
              <DeleteIcon />
            </IconButton>
          </ListItem>
        ))}
      </List>
    </div>
  );
}

export default TodoList;

In this component, we’re using the useState hook to manage the state of the todo list and the input field. We’re also using Material-UI components to create a polished and responsive design. The handleSubmit function is called when the form is submitted and it adds the current input to the list of todos and clears the input field. The handleDelete function is called when the delete button for a todo is clicked and it removes the corresponding todo from the list. The handleCheck function is called when the checkbox for a todo is clicked and it toggle the status of the task as completed.

Using the TodoList Component

To use the TodoList component in our application, we need to import it into the src/App.js file and render it. Open the src/App.js file and replace the existing code with the following:

import React from 'react';
import TodoList from './TodoList';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

Running the Application

Now that we have our application set up, we can start it by running the following command in the terminal:

npm start

This will start a development server and open the application in a web browser. You should now be able to add, check and delete items in the todo list.

Conclusion

In this tutorial, we’ve built a simple todo list application in React using Material-UI for styling. We’ve covered the basics of creating a new React project, installing Material-UI, creating a custom component and managing the state of the application. This is a simple example, but you can extend it to add more features such as filtering or searching.

To optimize SEO, you need to provide good title, meta description, keywords, and structured content. Also, you should make sure that the code is properly formatted, semantic, and accessible. It’s also important to make sure that your website is mobile-friendly, fast-loading and has a good user experience.

I hope this tutorial was helpful and that you now have a better understanding of how to build a simple todo list application in React with Material-UI.