TL;DR: Initialize a new React project with Vite and create a functional component that manages a list of tasks using the useState hook. Render the list with map and add event handlers to capture user input for adding new todos.
How to Build a React Todo App: Step-by-Step Tutorial
Building a simple Todo App is the perfect way to understand core React concepts like state management and list rendering. This guide walks you through creating a fully functional application from scratch.
First, set up your development environment. Open your terminal and run `npm create vite@latest my-todo-app — –template react`. Navigate into the directory and install dependencies with `npm install`. This command scaffolds a modern React project optimized for performance and simplicity.
Next, open your code editor and focus on the `App.js` file. Remove the default boilerplate code to start fresh. You need to import the `useState` hook from React at the top of the file. This hook allows your component to maintain state across renders, which is essential for storing the list of todos and the current input text.
Define your state variables inside the component function. Create a state variable named `todos` initialized as an empty array. Also, create a state variable named `input` initialized as an empty string. These two pieces of state will drive the entire functionality of your application.
Create a function called `addTodo` that handles the logic for adding a new item. Inside this function, check if the input is not empty. If there is text, use the spread operator to create a new array with the existing todos and the new item appended to the end. Update the `todos` state with this new array and reset the `input` state to an empty string to clear the text box.
Now, build the user interface using JSX. Start with a form element that includes an input field and a button. Bind the input field’s value to the `input` state and attach an `onChange` handler to update the state whenever the user types. When the user clicks the add button or presses enter, trigger the `addTodo` function.
To display the list of tasks, use the `map` method on the `todos` array. Render each todo item inside a list item element. You can add basic styling to make the interface look cleaner, such as adding borders and padding to the list items.
Finally, run your development server by executing `npm run dev` in the terminal. Open your browser to the local URL provided. You can now type in a task and click add to see it appear in the list.
FAQ
Q: Why use useState for the todo list?
A: useState is essential because it allows the component to remember changes between renders, ensuring the list persists while the user interacts with the app.
If you want to dig deeper, check out our guide on 10 Simple Lifestyle Hacks for a Happier, Healthier You.
Q: Can I delete items in this basic setup?
A: Yes, you can add an index parameter to the map function and create a delete function that filters out the item at that specific index from the state array.
Q: Is Vite the only way to start a React project?
A: No, Create React App is another popular tool, but Vite is generally faster for development and has become the modern standard for new projects.
Leave a Reply