React JS: Building a Simple To-Do List App

Written by

javascriptfundamentals

in

In the world of web development, creating interactive and dynamic user interfaces is a constant pursuit. React JS, a powerful JavaScript library, has become a cornerstone for building these interfaces. One of the best ways to learn React is by building a practical project. This tutorial will guide you through creating a simple, yet functional, To-Do List application using React. We’ll cover the essential concepts, from setting up your project to managing state and handling user interactions. By the end, you’ll have a solid understanding of React fundamentals and a working To-Do List application to showcase your skills.

Why Build a To-Do List App?

A To-Do List app is the perfect project for beginners. It allows you to grasp core React concepts without getting bogged down in complex features. You’ll learn how to:

  • Create and render components.
  • Manage and update the application’s state.
  • Handle user input and events.
  • Structure your application effectively.

These are fundamental skills applicable to any React project. Building this app will give you a hands-on experience that will accelerate your learning journey and provide a tangible project for your portfolio.

Prerequisites

Before you begin, ensure you have the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (Node Package Manager) installed on your system.
  • A code editor (like VS Code, Sublime Text, or Atom).

Setting Up Your React Project

We’ll use Create React App to quickly set up our project. This tool provides a pre-configured environment with all the necessary tools and dependencies.

Open your terminal and run the following command:

npx create-react-app todo-app

This command creates a new directory named “todo-app” and installs all the required packages. Navigate into the project directory:

cd todo-app

Now, start the development server:

npm start

This command will open your app in your default web browser, usually at http://localhost:3000. You should see the default React app’s welcome screen.

Project Structure Overview

Before diving into the code, let’s understand the basic structure of the project created by Create React App:

  • src/: This directory contains the source code of your application.
  • src/App.js: The main component of your application.
  • src/index.js: Renders the App component into the DOM.
  • public/index.html: The HTML file that serves as the entry point for your app.

Building the To-Do List Components

Our To-Do List app will consist of a few key components:

  • App.js: The main component that manages the overall state and renders the other components.
  • TodoList.js: Displays the list of to-do items.
  • TodoItem.js: Represents a single to-do item.
  • TodoForm.js: Allows users to add new to-do items.

1. Creating the TodoItem Component

Let’s start by creating the TodoItem component. This component will display a single to-do item and handle the functionality to mark it as complete.

Create a new file named TodoItem.js inside the src/ directory and add the following code:

import React from 'react';

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

export default TodoItem;

Explanation:

  • We import the React library.
  • The TodoItem component receives two props: todo (an object representing the to-do item) and onToggleComplete (a function to handle marking the item as complete).
  • We use inline styles to apply a line-through to the text if the item is completed.
  • An input element of type “checkbox” is used to represent the completion status. When the checkbox changes, the onToggleComplete function is called with the item’s ID.
  • The item’s text is displayed using a span element.

2. Creating the TodoList Component

The TodoList component will display a list of TodoItem components.

Create a new file named TodoList.js inside the src/ directory and add the following code:

import React from 'react';
import TodoItem from './TodoItem';

function TodoList({ todos, onToggleComplete }) {
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem key={todo.id} todo={todo} onToggleComplete={onToggleComplete} />
      ))}
    </ul>
  );
}

export default TodoList;

Explanation:

  • We import React and the TodoItem component.
  • The TodoList component receives two props: todos (an array of to-do items) and onToggleComplete.
  • We use the map method to iterate over the todos array and render a TodoItem component for each item. The key prop is essential for React to efficiently update the list.

3. Creating the TodoForm Component

The TodoForm component will provide a form for users to add new to-do items.

Create a new file named TodoForm.js inside the src/ directory and add the following code:

import React, { useState } from 'react';

function TodoForm({ onAddTodo }) {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim()) {
      onAddTodo(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</button>
    </form>
  );
}

export default TodoForm;

Explanation:

  • We import React and the useState hook.
  • The TodoForm component receives the onAddTodo prop (a function to add a new to-do item).
  • We use the useState hook to manage the input field’s text.
  • The handleSubmit function is called when the form is submitted. It prevents the default form submission behavior, calls the onAddTodo function with the input text, and clears the input field.
  • The form contains an input field and a submit button. The input field’s value is bound to the text state, and the onChange event updates the state as the user types.

4. Modifying the App Component

Now, let’s modify the App.js file to integrate these components and manage the application’s state.

Open src/App.js and replace its content with the following code:

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

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

  const addTodo = (text) => {
    const newTodo = {
      id: Date.now(),
      text: text,
      completed: false,
    };
    setTodos([...todos, newTodo]);
  };

  const toggleComplete = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  return (
    <div>
      <h1>My To-Do List</h1>
      <TodoForm onAddTodo={addTodo} />
      <TodoList todos={todos} onToggleComplete={toggleComplete} />
    </div>
  );
}

export default App;

Explanation:

  • We import React, the useState hook, the TodoList component, and the TodoForm component.
  • We use the useState hook to manage the todos state, which is an array of to-do item objects.
  • The addTodo function creates a new to-do item object with a unique ID (using Date.now()), the provided text, and a completed status of false. It then updates the todos state by adding the new item.
  • The toggleComplete function toggles the completed status of a to-do item with the given ID. It uses the map method to create a new array with the updated item.
  • The App component renders the TodoForm and TodoList components, passing the necessary props to them.

Styling the Application

To make the To-Do List app visually appealing, we’ll add some basic styling. You can add the CSS directly into the component files or create a separate CSS file. For simplicity, let’s add the styles directly in the component files.

Styling TodoItem.js

Add the following style directly within the TodoItem.js file, within the component’s return statement, using a style object:

import React from 'react';

function TodoItem({ todo, onToggleComplete }) {
  return (
    <li style={{
      textDecoration: todo.completed ? 'line-through' : 'none',
      listStyle: 'none',
      padding: '5px 0',
    }}>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggleComplete(todo.id)}
      />
      <span>{todo.text}</span>
    </li>
  );
}

export default TodoItem;

Styling TodoList.js

No additional styling is needed for TodoList.js in this example, as it primarily serves as a container.

Styling TodoForm.js

Add the following style directly within the TodoForm.js file, within the component’s return statement, using a style object:

import React, { useState } from 'react';

function TodoForm({ onAddTodo }) {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim()) {
      onAddTodo(text);
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit} style={{ marginBottom: '10px' }}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Add a new task"
        style={{
          padding: '5px',
          marginRight: '5px',
          border: '1px solid #ccc',
          borderRadius: '4px',
        }}
      />
      <button
        type="submit"
        style={{
          padding: '5px 10px',
          backgroundColor: '#4CAF50',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer',
        }}
      >Add</button>
    </form>
  );
}

export default TodoForm;

Styling App.js

Add the following style directly within the App.js file, within the component’s return statement, using a style object:

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

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

  const addTodo = (text) => {
    const newTodo = {
      id: Date.now(),
      text: text,
      completed: false,
    };
    setTodos([...todos, newTodo]);
  };

  const toggleComplete = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  return (
    <div style={{ maxWidth: '500px', margin: '20px auto', fontFamily: 'sans-serif' }}>
      <h1 style={{ textAlign: 'center' }}>My To-Do List</h1>
      <TodoForm onAddTodo={addTodo} />
      <TodoList todos={todos} onToggleComplete={toggleComplete} />
    </div>
  );
}

export default App;

By adding these styles, the application will have a more polished look.

Testing Your Application

After implementing the code and styling, it’s time to test your application. Open your browser and interact with the To-Do List app. You should be able to:

  • Add new to-do items.
  • Mark items as complete by checking the checkboxes.
  • See the completed items with a line-through.

If everything works as expected, congratulations! You’ve successfully built a basic To-Do List app with React.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect import paths: Double-check that your import paths are correct. Ensure that you’re importing components from the correct files.
  • Missing or incorrect keys in map: When rendering lists using map, always provide a unique key prop for each item. This helps React efficiently update the list.
  • Incorrect state updates: When updating state, always use the correct methods (e.g., setTodos) and ensure you’re not directly mutating the state. For example, use the spread operator (...) to create new arrays or objects when updating state.
  • Event handling errors: Ensure that you are handling events correctly (e.g., using e.preventDefault() in forms).
  • Unnecessary re-renders: Be mindful of unnecessary re-renders. Use React.memo or useMemo to optimize performance when needed.

Key Takeaways and Best Practices

In this tutorial, you’ve learned the fundamentals of building a React application. Here are some key takeaways and best practices:

  • Component-Based Architecture: React applications are built using components. Each component is responsible for a specific part of the UI.
  • State Management: State is the data that changes over time. Use the useState hook to manage component state.
  • Props: Props are used to pass data from parent components to child components.
  • Event Handling: Handle user interactions using event listeners.
  • JSX: JSX is a syntax extension to JavaScript that allows you to write HTML-like code within your JavaScript files.
  • Immutability: When updating state, treat it as immutable. Create new arrays or objects instead of directly modifying the existing ones.
  • Code Organization: Organize your code into logical components and files for better readability and maintainability.

FAQ

Here are some frequently asked questions about building a To-Do List app with React:

Q: How can I store the To-Do List data persistently?

A: You can use local storage or a database to store the To-Do List data persistently. For local storage, you can use the localStorage API to save and retrieve data from the user’s browser. For a database, you would need to set up a backend server and use an API to communicate with the database.

Q: How can I add the functionality to delete to-do items?

A: You can add a delete button next to each to-do item. When the delete button is clicked, you would call a function that updates the todos state by filtering out the item to be deleted.

Q: How can I add the functionality to edit to-do items?

A: You can add an edit button next to each to-do item. When the edit button is clicked, you can display an input field to edit the item’s text. When the user saves the changes, update the todos state with the updated item.

Q: How can I deploy this application?

A: You can deploy this application using platforms like Netlify, Vercel, or GitHub Pages. These platforms provide easy-to-use deployment options for React applications.

Next Steps

This To-Do List app is just the beginning. You can extend it by adding more features such as:

  • Deleting to-do items.
  • Editing to-do items.
  • Filtering to-do items (e.g., by status).
  • Adding due dates and priorities.
  • Implementing drag-and-drop functionality for reordering items.

Experiment with these features to deepen your understanding of React and enhance your skills.

Mastering React involves practice. This To-Do List app is a stepping stone. Continue to build more complex projects, explore more advanced React concepts such as React Router, Redux, and Context API, and you’ll become proficient in no time. The journey of a thousand miles begins with a single step, and you’ve just taken a significant one in your React journey. Keep coding, keep learning, and keep building!

More posts