Tutorial: React - To Do App Example - Deleting Tasks

In this course, we will create a simple To Do app using React. We will focus particularly on the feature to delete tasks. The To Do app is an excellent example that demonstrates basic CRUD (Create, Read, Update, Delete) operations. The topics we will learn during the development process include the basic structure of React, component management, state management, event handling, and some basic CSS styling.

1. What is React?

React is a UI library developed by Facebook, used for creating user interfaces. React has a component-based structure that enhances reusability and utilizes a virtual DOM to improve performance. Because of these features, many developers use React to develop various web applications.

2. Overview of the To Do App

The To Do app is a simple application that allows users to manage a list of tasks. Users can add new tasks and delete tasks that have already been registered. Through this application, you will understand the basic state management of React and the data flow between components.

3. Setting Up the Development Environment

You need to set up the environment required for developing the To Do app. Follow the steps below:

Install Node.js: Node.js is a JavaScript environment required to run React applications.
Use create-react-app: Enter the following command in the command line to create a new React project.

npx create-react-app todo-app

Once this command is completed, a folder named “todo-app” will be created. You can move into this folder and start the project.

cd todo-app

4. Creating Basic Components

Now let’s create some basic components. The To Do app consists of at least the following components:

App: The main component that contains all other components.
TodoList: The component that displays the list of tasks.
TodoItem: The component that represents an individual task item.
AddTodo: The component that adds a new task.

These components reflect the characteristics of React. Below is how to create each component.

4.1 App Component


import React, { useState } from 'react';
import TodoList from './TodoList';
import AddTodo from './AddTodo';

const App = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = (todo) => {
    setTodos([...todos, todo]);
  };

  const deleteTodo = (index) => {
    const newTodos = todos.filter((_, i) => i !== index);
    setTodos(newTodos);
  };

  return (
    
      My To Do App
      
      
    
  );
};

export default App;

In the above code, we declare a state variable called todos using the useState hook and set its initial value to an empty array. The addTodo function is used to add a new task, and the deleteTodo function is used to delete a task at a specific index.

4.2 AddTodo Component


import React, { useState } from 'react';

const AddTodo = ({ addTodo }) => {
  const [value, setValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue('');
  };

  return (
    
       setValue(e.target.value)} 
        placeholder="Add a new task" 
      />
      
    
  );
};

export default AddTodo;

The above AddTodo component manages the value entered by the user as state and calls the addTodo function on form submission to add a new task.

4.3 TodoList Component


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

const TodoList = ({ todos, deleteTodo }) => {
  return (
    
      {todos.map((todo, index) => (
        
      ))}
    
  );
};

export default TodoList;

The TodoList component receives the todos array and renders the TodoItem component for each todo item. The deleteTodo function is also passed to enable the delete functionality for each item.

4.4 TodoItem Component


import React from 'react';

const TodoItem = ({ todo, index, deleteTodo }) => {
  return (
    
      {todo}
      
    
  );
};

export default TodoItem;

The TodoItem component displays each task item and calls deleteTodo when the delete button is clicked to perform the deletion of that task.

5. Adding Styling

The basic functionality has been completed. Now let’s add CSS styles to make our To Do app look better. You can add styles like the following.


/* App.css */
body {
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
}

form {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

input {
  padding: 10px;
  margin-right: 5px;
}

button {
  padding: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

The above CSS code defines the basic style for the App. It uses Flexbox to help align the form and applies styles to each task item.

6. Final Review and Conclusion

Through this course, you have created a simple To Do app and learned the basic concepts of React. You have implemented basic functionalities for adding and deleting tasks, and I hope this has helped you understand how each component interacts with one another. Build upon this app by adding more features and deepen your knowledge of React.

Tutorial: React – To Do App Example – Deleting Tasks