How to Build a React Todo App: Step-by-Step Tutorial
TL;DR: Initialize a new React project using Vite and create a component that manages a list of tasks with local state. Add event handlers for adding, removing, and toggling items to ensure the UI updates instantly whenever the underlying data changes.
Building a Todo App is the perfect starting point for understanding React’s core concepts, specifically state management and component composition. This guide will walk you through creating a functional, clean application from scratch. By following these steps, you will gain hands-on experience with JSX, state hooks, and event handling, which are fundamental to building any modern web interface with React.
If you want to dig deeper, check out our guide on Neurofeedback Apps: Boost Deep Work & Clarity for Remote Tea.
Step 1: Initialize Your Project
First, ensure you have Node.js installed on your machine. Open your terminal and run the command npm create vite@latest todo-app. Select the JavaScript template to keep things simple. Once the project is created, navigate into the directory and run npm install to install dependencies. Finally, start the development server with npm run dev. This sets up a fast, optimized environment for building your React application without unnecessary boilerplate.
Step 2: Structure Your Components
Open the App.jsx file and remove the default content. You will create a single component for this tutorial to keep it concise, but in larger apps, you might split this into TodoList, TodoItem, and TodoInput. Define a constant array named initialTodos with a few sample tasks. This helps you test your UI immediately without waiting to type in new items. Ensure your component returns a basic HTML structure, including a heading, an input field, and a list container.
Step 3: Implement State Management
Use the useState hook to manage two pieces of state: the list of todos and the current input text. Initialize the todo state with your initialTodos array and the text state as an empty string. This declarative approach allows React to track changes and re-render the component whenever the state updates. Avoid using local variables for data that needs to persist across renders, as they will be reset every time the component re-renders.
Step 4: Add Event Handlers
Create a function called addTodo that is triggered when the user presses the Enter key or clicks a button. Inside this function, check if the input text is not empty. If valid, create a new todo object with a unique ID, the text content, and a completed flag set to false. Use the spread operator to create a new array that includes the existing todos plus the new one, and update the state. Remember, state is immutable, so you must always return a new object or array rather than mutating the existing one directly.
Step 5: Handle Removal and Toggling
Add a delete button to each list item. Create a removeTodo function that filters out the todo with the matching ID from the current list. For toggling completion, create a function that maps over the todos and flips the completed boolean for the specific ID. These functions demonstrate how to update complex state structures efficiently. The UI will automatically reflect these changes because React compares the new state with the old state to determine which DOM elements need updating.
Pro Tips for Better Code
Always use a unique ID for each todo item, such as a timestamp or a UUID, rather than relying on array indices. Indices can change if you reorder items, leading to bugs. Additionally, consider adding basic CSS to style the completed items with strikethrough text. This visual feedback improves user experience and makes the app feel more polished. Keep your components small and focused on a single responsibility to make them easier to test and maintain.
<h