Creating a To-Do List Application with React

If you're eager to dive into the world of React, this article serves as a practical training guide to help you create your first project—a fully functional To-Do List application. Designed for intermediate and professional developers, we’ll explore React concepts such as component design, state management, and interactivity. By the end of this tutorial, you'll have a solid grasp of React fundamentals and a deployable application. Let’s get started!

Setting Up React Development Environment

Before we begin coding, we need to set up the development environment. React requires Node.js and npm (Node Package Manager) as its foundation. To install them, download the latest version of Node.js from nodejs.org. Once installed, verify the installation using the following commands:

node -v
npm -v

Once Node.js is ready, install the create-react-app utility. This tool scaffolds a React project with a pre-configured build structure. Run the following command to install it globally:

npm install -g create-react-app

Having the right tools in place ensures a smooth development experience.

Creating the React App Structure

To start, create a new React app using the create-react-app command. Open your terminal and run:

npx create-react-app todo-app

This command creates a folder called todo-app with the necessary files and dependencies. Navigate into the folder:

cd todo-app

In this scaffolded project, you'll find essential files like index.js, App.js, and App.css. These files form the foundation of your React application. Now, launch the development server:

npm start

This will spin up a local server, and you’ll see a boilerplate React app running in your browser at http://localhost:3000.

Building the Core Components

React applications are built using components. For our To-Do List app, the primary components include:

• Header – Displays the title of the application.
• ToDoInput – Allows users to input new tasks.
• ToDoList – Displays all the tasks.
• ToDoItem – Represents a single to-do item.

Create a components folder inside src and break down your app into these components. For example, the Header component can look like this:

// src/components/Header.js
import React from 'react';

const Header = () => {
  return <h1 className="header">To-Do List</h1>;
};

export default Header;

Following a modular approach ensures your app is maintainable.

Managing State for To-Do Items

In React, state is used to manage dynamic data. To manage the list of tasks, use the useState hook, which allows functional components to handle state.

Example:

const [tasks, setTasks] = React.useState([]);

Here, tasks represents the current list, and setTasks is a function to update it. Any changes to the state automatically re-render the component, keeping the UI in sync with the data.

Adding New To-Do Items

To capture user input and add new tasks, create a form in the ToDoInput component. Use the onSubmit event to handle form submissions:

const ToDoInput = ({ addTask }) => {
  const [input, setInput] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (input.trim() !== '') {
      addTask(input);
      setInput('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Add a new task"
      />
      <button type="submit">Add</button>
    </form>
  );
};

export default ToDoInput;

Pass the addTask function as a prop to update the list of tasks in the parent component.

Displaying To-Do Items in the UI

To display tasks, map through the tasks array and render each item as a ToDoItem component. This can be implemented in ToDoList:

const ToDoList = ({ tasks }) => {
  return (
    <ul>
      {tasks.map((task, index) => (
        <ToDoItem key={index} task={task} />
      ))}
    </ul>
  );
};

This approach efficiently renders the tasks while keeping the code readable.

Implementing Complete and Delete Functionality

Interactive features like marking tasks as complete or deleting them are critical for any to-do application. Add a completeTask and deleteTask function in your parent component, and pass these as props to ToDoItem:

const ToDoItem = ({ task, completeTask, deleteTask }) => {
  return (
    <li>
      <span
        style={{ textDecoration: task.completed ? 'line-through' : 'none' }}
        onClick={() => completeTask(task.id)}
      >
        {task.text}
      </span>
      <button onClick={() => deleteTask(task.id)}>Delete</button>
    </li>
  );
};

This makes the application interactive and user-friendly.

Styling the To-Do List Application

To enhance the visual appeal, use CSS to style your application. For example, add styles to App.css:

.header {
  font-size: 2rem;
  text-align: center;
  margin: 20px 0;
}

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

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

Styling transforms a basic app into a polished product.

Testing To-Do List Application

Testing ensures your application works as intended. Use React Testing Library and Jest to write unit tests for your components. For example, test if the Header component renders correctly:

import { render, screen } from '@testing-library/react';
import Header from './Header';

test('renders header', () => {
  render(<Header />);
  const headerElement = screen.getByText(/To-Do List/i);
  expect(headerElement).toBeInTheDocument();
});

Thorough testing minimizes bugs and improves reliability.

Deploying To-Do List Application

Once your app is complete, it’s time to deploy! Use Vercel or Netlify for a seamless deployment experience. First, build the application:

npm run build

Then, upload the build folder to your hosting platform. Both Vercel and Netlify offer free tiers for hosting React applications, making them beginner-friendly.

Summary

Congratulations! You’ve built and deployed your first React project—a functional To-Do List application. Along the way, you learned to set up a React environment, manage state, handle user input, and style your app. This project not only equips you with practical React skills but also serves as a solid foundation to build more complex applications. Don’t stop here—keep exploring React’s ecosystem, and let your creativity shine in your next project!

Last Update: 24 Jan, 2025