To-Do App with React

To-Do App with React: A step-by-step guide. In this article, we will walk through the steps to create a simple To-Do application using React, A popular Javascript library for building user interfaces. React’s component-based architecture makes it an excellent choice for developing interactive web applications. By the end of this guide, you will have a basic To-Do app where users can add, delete, and mark tasks as completed.

Prerequisites for To-Do App with React

Before we start make sure you have the following software installed on your machine:-

• Node.js and npm (Node Package Manager).
• Any code editor (VS Code, Sublime Text, etc).

Setting Up the React App

First, we will create a new React application using create-react-app, a tool that sets up a new React project with sensible defaults.

Open your termianl or command promot and run the following command

npx create-react-app todo-app

Navigate into your new project root directory.

cd todo-app

Start the development server

npm start

Now your react app should be running on http://localhost:3000

Building the To-Do App

Seeting up the Project Structure

Inside your react project navigate to the ‘src’ folder. This is where we will spend most of our time. create two files: ‘TodoList.js’ and ‘TodoItem.js’. These will be our main components.

Building the TodoList component

Open the TodoList.js file and write the following code.

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

function TodoList() {
    const [tasks, setTasks] = useState([]);
    const [inputValue, setInputValue] = useState('');

    const addTask = () => {
        if (!inputValue.trim()) return; // Avoid adding empty tasks
        setTasks([...tasks, { id: Date.now(), text: inputValue, completed: false }]);
        setInputValue(''); // Clear input field after adding
    };

    const deleteTask = (id) => {
        setTasks(tasks.filter(task => task.id !== id));
    };

    const toggleCompletion = (id) => {
        setTasks(tasks.map(task => task.id === id ? { ...task, completed: !task.completed } : task));
    };

    return (
        <div>
            <input
                type="text"
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                placeholder="Add a new task"
            />
            <button onClick={addTask}>Add Task</button>
            <ul>
                {tasks.map(task => (
                    <TodoItem
                        key={task.id}
                        task={task}
                        deleteTask={deleteTask}
                        toggleCompletion={toggleCompletion}
                    />
                ))}
            </ul>
        </div>
    );
}

export default TodoList;

In this component, we are using React’s useState hook to manage the state of our task and the input field. We also provided the functionality to add, delete, and toggle task completion status.

Building the TodoItem Component

Open the TodoItem.js file and write the following code.

import React from 'react';

function TodoItem({ task, deleteTask, toggleCompletion }) {
    return (
        <li>
            <input
                type="checkbox"
                checked={task.completed}
                onChange={() => toggleCompletion(task.id)}
            />
            <span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
                {task.text}
            </span>
            <button onClick={() => deleteTask(task.id)}>Delete</button>
        </li>
    );
}

export default TodoItem;
 

This component represents a single Todo item. This component receives task, delete task, and toggleCompletion as props and renders a list of items with a checkbox, task text, and a delete button.

Integrating TodoList Component in App.js

Finally, open the App.js file and replace its content with the following code.

import './App.css';
import TodoList from './TodoList';

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

export default App;

In App.js, we are importing and rendering our Todo list component. This is the main component that will be displayed to the user.

Adding Some Styles

For basic styling, open the App.css file and the following code.

.App {
  text-align: center;
}

input[type='text'] {
  margin-right: 10px;
}

li {
  list-style-type: none;
  margin: 5px 0;
}

This will center our app content and add some spacing around the tasks.

Congratulations!! You have just built a simple to-do application using React. This app demonstrates the basics of React, including component structure, state management, and end-event handling. Feel free to expand upon this project by adding extra features such as task editing, due dates, or different priorities. React’s modular nature makes it easy to scale and expand your applications.

Happy Coding & Learning

See Also

• 2d Array Input in Java
• Shell Sort in Java