React is a library developed by Facebook used for building user interfaces. With React, you can create efficient and reusable UI components. In this course, we will learn how to prepare a project using React by using a To Do app as an example. Through this course, we will delve into the basic concepts of React and the process of preparing a project.

1. Project Overview

The To Do app is a simple application that allows users to add and delete tasks. Through this app, we will implement the following features:

• Add task feature
• Delete task feature
• Mark task as completed feature
• Task filtering feature (All, Active, Completed)

This project will be a good exercise for developers who are new to React. You will learn various React concepts as you progress step by step.

2. Setting Up Development Environment

To develop the To Do app, you first need to set up the development environment. Please follow the steps below.

2.1 Installing Node.js

React runs in a Node.js environment. If Node.js is not installed, download and install it from the following link: Official Node.js Site. After the installation is complete, verify that Node.js is properly installed with the following commands.

node -v

npm -v

2.2 Using Create React App

Create React App is used to quickly set up a React project. Create a new project with the following command.

npx create-react-app todo-app

The above command will create a new React project named `todo-app`. Once the creation is complete, move to that directory.

cd todo-app

2.3 Understanding Project Structure

A newly created React project comes with several folders and files by default. The main folder structure is as follows:

• node_modules: A folder where the project’s dependencies are stored.
• public: A folder where static files are stored.
• src: A folder where React components and the main logic of the app reside.
• package.json: A file containing the meta information of the project.

3. Implementing the To Do App

Now we will begin implementing the To Do app. Follow the steps below as you write the code.

3.1 Creating the App Component

Open the `App.js` file inside the `src` folder and modify it as follows.

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

function App() {
    const [todos, setTodos] = useState([]);
    const [inputValue, setInputValue] = useState('');

    const addTodo = () => {
        if (inputValue.trim()) {
            setTodos([...todos, { text: inputValue, completed: false }]);
            setInputValue('');
        }
    };

    return (
        

            
To Do List
             setInputValue(e.target.value)} 
                placeholder="Enter your task"
            />
            Add
            

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

export default App;

3.2 Adding the Delete Task Feature

Now we will add the feature to delete each task. Add the following function below the `addTodo` function.

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

Then, add a delete button inside the `

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

        {todo.text}
         removeTodo(index)}>Delete
    
))}

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

 toggleComplete(index)} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
    {todo.text}
     removeTodo(index)}>Delete

const [filter, setFilter] = useState('all');

const filteredTodos = todos.filter(todo => {
    if (filter === 'completed') return todo.completed;
    if (filter === 'active') return !todo.completed;
    return true;
});

 setFilter('all')}>All
 setFilter('active')}>Active
 setFilter('completed')}>Completed

    {filteredTodos.map((todo, index) => (
        
 toggleComplete(index)} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.text}
             removeTodo(index)}>Delete
        
    ))}

npm start

npm run build