Building a To-Do App with React

Introduction

One of the best ways to get comfortable with React is by building a simple to-do app. In this tutorial, you’ll create a fully functional React to-do app from scratch. We’ll cover state management, handling user input, updating lists, and best practices for structuring React components.

Setting Up Your Project

1. Install Node.js and npm if you haven’t already.
2. Use npx create-react-app todo-app to scaffold your project.
3. cd todo-app and npm start to run your development server.

Planning App Structure

• App – main component, holds state for all todos
• TodoList – lists all todo items
• TodoItem – displays individual todo with a remove button
• TodoForm – input to add a new todo

Building the Components

App.js

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

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

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

  const removeTodo = id => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div>
      <h1>To-Do App</h1>
      <TodoForm addTodo={addTodo} />
      <TodoList todos={todos} removeTodo={removeTodo} />
    </div>
  );
}

export default App;

TodoForm.js

import React, { useState } from 'react';

function TodoForm({ addTodo }) {
  const [value, setValue] = useState('');

  const handleSubmit = e => {
    e.preventDefault();
    if (!value.trim()) return;
    addTodo(value);
    setValue('');
  };

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

export default TodoForm;

TodoList.js

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

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

export default TodoList;

TodoItem.js

import React from 'react';

function TodoItem({ todo, removeTodo }) {
  return (
    <li>
      {todo.text}
      <button onClick={() => removeTodo(todo.id)}>Remove</button>
    </li>
  );
}

export default TodoItem;

Enhancements

• Add completion toggling (with a line-through style)
• Save todos in localStorage for persistence
• Add editing capability
• Improve the UI with CSS frameworks like TailwindCSS or Material UI

Conclusion

Building a to-do app in React is a fantastic way to learn the basics of building components, managing state, and handling events. As you gain confidence, try adding more features to make your app truly unique. Happy coding!