Building a Simple To-Do App with React

Learn how to build a simple, functional to-do app with React in just a few steps. Perfect for beginners looking to master React basics!

Tweet
Share
Share
Pin

React is a popular JavaScript library for building user interfaces, and one of the best ways to start learning it is by creating a small, functional app like a to-do list. In this tutorial, we’ll guide you through building a simple to-do app step by step. Let’s dive in!

Prerequisites

Before starting, make sure you have the following installed:

Once Node.js and npm are set up, we’ll use Create React App to quickly scaffold our React application.

Step 1: Setting Up the Project

To create a new React app, open your terminal and run the following commands:

npx create-react-app todo-app
cd todo-app
npm start

This will generate a new React project and start the development server on http://localhost:3000/.

Step 2: Building the To-Do App

We’ll now modify the default files to create our to-do app. The main logic will be placed in App.js.

App.js

Replace the content of App.js with the following:

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

function App() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  // Function to add a new task
  const addTask = () => {
    if (task.trim() !== '') {
      setTasks([...tasks, { id: Date.now(), text: task, completed: false }]);
      setTask(''); // Clear the input field
    }
  };

  // Function to mark a task as completed
  const toggleTaskCompletion = (id) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  // Function to delete a task
  const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

  return (
    <div className="App">
      <h1>React To-Do List</h1>
      <div className="task-input">
        <input
          type="text"
          placeholder="Enter a task..."
          value={task}
          onChange={(e) => setTask(e.target.value)}
        />
        <button onClick={addTask}>Add Task</button>
      </div>
      <ul className="task-list">
        {tasks.map((task) => (
          <li key={task.id} className={task.completed ? 'completed' : ''}>
            <span onClick={() => toggleTaskCompletion(task.id)}>
              {task.text}
            </span>
            <button onClick={() => deleteTask(task.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Step 3: Styling the App

Next, let’s add some basic styling to make the app look better. Create a App.css file or modify the existing one as follows:

.App {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.task-input {
  margin: 20px 0;
}

.task-input input {
  padding: 10px;
  width: 80%;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.task-input button {
  padding: 10px;
  background-color: #74a352;
  color: white;
  border: none;
  border-radius: 4px;
  margin-left: 10px;
  cursor: pointer;
}

.task-list {
  list-style-type: none;
  padding: 0;
}

.task-list li {
  background-color: #f4f4f4;
  padding: 10px;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
}

.task-list li.completed {
  text-decoration: line-through;
  color: #888;
}

.task-list button {
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}

Step 4: Testing Your App

At this point, your to-do app should be fully functional. You can:

  • Add new tasks by typing in the input field and clicking the “Add Task” button.
  • Mark tasks as completed by clicking on the task text.
  • Delete tasks using the “Delete” button.

Each action updates the state and re-renders the list of tasks.

Step 5: Optional Features

To enhance your to-do app, you can add features such as:

  • Persistent tasks: Store tasks in localStorage so they don’t disappear when the page is refreshed.
  • Edit tasks: Add an edit button to modify existing tasks.
  • Categories or filters: Allow users to categorize tasks or filter between completed and active tasks.

Conclusion

Building a to-do list app is a great introduction to React’s core concepts like state, props, and event handling. You now have a functional app that can be expanded upon to suit your needs!