Hello! In this course, we will learn how to create a To Do app using React. React is a library for building user interfaces, and its component-based architecture allows developers to create reusable UI components. A To Do app is a suitable project for those who are learning React for the first time, helping to understand basic CRUD (Create, Read, Update, Delete) operations.

1. Project Overview

In this project, we will create a simple To Do app where users can add, delete, and check the completion status of tasks. This app will be useful for understanding the basics of state management and event handling in React.

2. Required Tools and Libraries

• Node.js: A JavaScript runtime environment. It is required to set up and run the React project.
• npm: The Node.js package manager, used to install the necessary libraries.
• React: A JavaScript library for building user interfaces.
• Visual Studio Code: A code editor used to set up the development environment.

3. Environment Setup

First, check if Node.js is installed. If not, download and install it from the official Node.js website.

Once the installation is complete, create a new React app using the following command:

npx create-react-app todo-app

After the app creation is complete, navigate to the created directory and run the app:

cd todo-app
npm start

Opening http://localhost:3000 in your browser should display the default React app.

4. Understanding Project Structure

Once the project is created, you will find the following folder structure:

todo-app/
├── node_modules/
├── public/
└── src/
    ├── App.css
    ├── App.js
    ├── index.css
    ├── index.js
    └── logo.svg

The primary file to modify is src/App.js. We will implement the functionality of the To Do app by modifying this file.

5. Component Design

The To Do app will be composed of the following components:

• ToDoApp: The main component of the app that includes all subcomponents.
• ToDoList: Displays the list of added tasks.
• ToDoItem: Represents individual tasks, supporting completion and deletion functionalities.
• AddToDo: Provides a form to add new tasks.

5.1 Setting Up the ToDoApp Component

Open the src/App.js file and modify its content as follows:

import React, { useState } from 'react';
import ToDoList from './ToDoList';
import AddToDo from './AddToDo';
import './App.css';

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

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

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

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

    return (
        

            
To Do List
            
            
        
    );
};

export default ToDoApp;

5.2 Creating the ToDoList Component

To create the task list component, create a file named src/ToDoList.js and add the following content:

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

const ToDoList = ({ todos, deleteTodo, toggleTodo }) => {
    return (
        

            {todos.map((todo, index) => (
                
            ))}
        
    );
};

export default ToDoList;

5.3 Creating the ToDoItem Component

To create a component that displays individual task items, create a file named src/ToDoItem.js and write the following:

import React from 'react';

const ToDoItem = ({ todo, deleteTodo, toggleTodo, index }) => {
    return (
        

             toggleTodo(index)}>{todo.text}
             deleteTodo(index)}>Delete
        
    );
};

export default ToDoItem;

5.4 Creating the AddToDo Component

To create a form for adding new tasks, create a file named src/AddToDo.js and add the following code:

import React, { useState } from 'react';

const AddToDo = ({ addTodo }) => {
    const [inputValue, setInputValue] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        if (inputValue.trim()) {
            addTodo({ text: inputValue.trim(), completed: false });
            setInputValue('');
        }
    };

    return (
        

             setInputValue(e.target.value)} type="text" value={inputValue}
                placeholder="Enter a task"
            />
            Add
        
    );
};

export default AddToDo;

6. Styling

Now that the basic functionality has been implemented, let’s add some styling to make the app look nicer. Modify the src/App.css file to add the following styles:

.todo-app {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

form {
    display: flex;
    justify-content: space-between;
}

form input {
    flex: 1;
    margin-right: 10px;
}

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

li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.completed {
    text-decoration: line-through;
    color: gray;
}

7. Running and Testing the App

Now that all components and styles are ready, run the app. Open http://localhost:3000 in your browser and check if the functionalities for adding, deleting, and changing the completion status of tasks work correctly.

8. Conclusion and Additional Features

Now the basic To Do app is complete. However, you may want to consider additional features to make better use of React. For example:

• Save the task list in local storage so it persists after a refresh.
• Add a feature to edit tasks.
• Add a filter feature to view only completed tasks.

Apply your ideas based on what you learned in this course! Thank you!