What You’ll Need Before You Begin

Before diving into the code, make sure you have the following:

• Fundamental JavaScript and React Knowledge: Familiarity with JSX, components, and props is essential.
• Node.js and npm (or yarn) Installed: These are required for running and managing your React project.
• A Code Editor: VS Code (recommended) or your preferred code editor.

Project Setup: Creating a New React App

Let’s begin by setting up a new React project using Create React App:

npx create-react-app task-manager
cd task-manager
npm start

These commands will:

1. Create a new React project named “task-manager.”
2. Navigate into the project directory.
3. Start the development server, which will automatically open your app in the browser.

Next, install the uuid package to generate unique IDs for our tasks:

npm install uuid

Structuring Your Task Management App: Component Breakdown

We’ll break down our app into three main components: Task, TaskList, and TaskForm. This modular approach makes the code easier to manage and understand.

import React from "react";
 
const Task = ({ task, onDelete, onToggle }) => {
  return (
    <div className={`task ${task.completed ? "completed" : ""}`}>
      <h3>{task.text}</h3>
      <button onClick={() => onDelete(task.id)}>Delete</button>
      <button onClick={() => onToggle(task.id)}>
        {task.completed ? "Undo" : "Complete"}
      </button>
    </div>
  );
};
 
export default Task;

import React from "react";
import Task from "./Task";
 
const TaskList = ({ tasks, onDelete, onToggle }) => {
  return (
    <div className="task-list">
      {tasks.map((task) => (
        <Task
          key={task.id}
          task={task}
          onDelete={onDelete}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
};
 
export default TaskList;

import React, { useState } from "react";
 
const TaskForm = ({ onAdd }) => {
  const [text, setText] = useState("");
 
  const handleSubmit = (e) => {
    e.preventDefault();
    if (!text.trim()) return;
    onAdd(text);
    setText("");
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Add a new task..."
      />
      <button type="submit">Add Task</button>
    </form>
  );
};
 
export default TaskForm;

State Management with React Hooks in the App Component

The App component will manage the overall state of the application using the useState hook. This includes storing the list of tasks and handling the logic for adding, deleting, and toggling tasks.

import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";
import TaskForm from "./TaskForm";
import TaskList from "./TaskList";
 
function App() {
  const [tasks, setTasks] = useState([]);
 
  const addTask = (text) => {
    setTasks([...tasks, { id: uuidv4(), text, completed: false }]);
  };
 
  const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };
 
  const toggleComplete = (id) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };
 
  return (
    <div className="app">
      <h1>Task Manager</h1>
      <TaskForm onAdd={addTask} />
      <TaskList tasks={tasks} onDelete={deleteTask} onToggle={toggleComplete} />
    </div>
  );
}
 
export default App;

• useState([]) initializes the tasks state variable as an empty array.
• addTask creates a new task object with a unique ID (using uuidv4), the task text, and an initial completed status of false. It then updates the tasks state using the spread operator to create a new array.
• deleteTask filters the tasks array to remove the task with the matching ID.
• toggleComplete maps through the tasks array and updates the completed status of the task with the matching ID.
• Finally, the App component renders the TaskForm and TaskList components, passing the necessary props.

Basic Styling with CSS

Let’s add some basic CSS to style our app. Create an index.css file (or similar) and add the following styles:

.app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
 
.task {
  background: #f4f4f4;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.task.completed {
  text-decoration: line-through;
  opacity: 0.7;
}
 
button {
  background: #333;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 5px;
}
 
input {
  padding: 8px;
  width: 70%;
  margin-right: 10px;
}

Remember to import this CSS file into your App.js or index.js file: import './index.css';

Taking Your Task Manager to the Next Level (Optional Enhancements)

Once you have the basic app working, consider these enhancements:

• Local Storage Persistence: Use localStorage to save tasks and load them when the app reloads.
• Drag and Drop Reordering: Implement drag-and-drop functionality to allow users to reorder tasks.
• Categories or Tags: Add the ability to categorize tasks for better organization.
• Due Dates and Reminders: Include due dates and potentially integrate with a notification system.

Conclusion: You’ve Built a Task Management App!

Congratulations! You’ve successfully built a functional task management app with React. This project has provided valuable practice in state management, component architecture, and handling user interactions. This is a great foundation for further exploration and development.

Remember, the best way to learn is by doing. Don’t hesitate to experiment with the code, add new features, and explore different approaches. Happy coding!