How to Create a Simple To-Do List with React

Building a To-Do list is one of the most popular beginner projects for those learning React. It’s simple enough to get you comfortable with React’s concepts while still giving you a tangible and useful app at the end. Today, we’ll create a basic To-Do list app that allows users to add and remove tasks.

1. Setting Up Your Environment

Before diving into the code, you need to ensure that your development environment is ready:

• Node.js and npm installed: React requires Node.js, so head over to nodejs.org to download the latest version.
• A text editor or IDE: Visual Studio Code is a great choice for React development.
• Create-React-App: This is the easiest way to start a React project. We’ll use it to set up our project structure.

2. Creating the React App

Let’s kick things off by creating our React app.

1. Create a new React project:Open your terminal or command prompt and run the following command:

   npx create-react-app my-todo-list

   Once the command finishes, you’ll have a new directory named my-todo-list with all the files and folders needed to start a React project.

2. Navigate into the project directory:

   cd my-todo-list

3. Start the development server:

   npm start

   Your new React app should open automatically in your default browser, displaying the default React welcome page.

3. Creating the To-Do List Component

Now, let’s create the main component for our To-Do list.

1. Navigate to the src folder:Open the src folder in your text editor. This is where we’ll do most of our work.
2. Delete unnecessary files:Delete the App.css, App.test.js, logo.svg, and index.css files. This will keep things clean.
3. Modify App.js:Open App.js and replace its content with the following code:

   import React, { useState } from 'react';
   
   function App() {
    const [tasks, setTasks] = useState([]);
    const [task, setTask] = useState('');
   
    const addTask = () => {
      setTasks([...tasks, task]);
      setTask('');
    };
   
    const removeTask = (index) => {
      const newTasks = tasks.filter((_, i) => i !== index);
      setTasks(newTasks);
    };
   
    return (
      <div className="App">
        <h1>To-Do List</h1>
        <input
          type="text"
          value={task}
          onChange={(e) => setTask(e.target.value)}
          placeholder="Add a new task"
        />
        <button onClick={addTask}>Add</button>
        <ul>
          {tasks.map((task, index) => (
            <li key={index}>
              {task} <button onClick={() => removeTask(index)}>Remove</button>
            </li>
          ))}
        </ul>
      </div>
    );
   }
   
   export default App;

   Here’s a quick breakdown of what the code does:

   • useState: React’s useState hook is used to manage the state of the tasks and the current input.
   • addTask: Adds a new task to the list and clears the input field.
   • removeTask: Removes a task from the list based on its index.

4. Styling the App

You can add some basic styling to make your To-Do list look better.

1. Create a new CSS file:Create a file named App.css in the src folder.
2. Add the following styles:

   .App {
    text-align: center;
    margin-top: 50px;
   }
   
   input {
    padding: 10px;
    font-size: 16px;
    width: 300px;
   }
   
   button {
    padding: 10px;
    margin-left: 10px;
    cursor: pointer;
   }
   
   ul {
    list-style-type: none;
    padding: 0;
   }
   
   li {
    margin: 10px 0;
   }
   
   li button {
    margin-left: 20px;
   }

3. Import the CSS file:At the top of your App.js file, import the CSS file:

   import './App.css';

5. Running the App

Save all your files and make sure your development server is running (npm start if it isn’t). Head to your browser and see your To-Do list in action! Try adding and removing tasks to see how everything works together.

6. Conclusion: You’ve Built a To-Do List with React!

And there you have it—a simple yet functional To-Do list built with React. This project is a great starting point for learning React basics like state management and component structuring. Plus, it’s something you can build upon, adding features like task editing, local storage, or even syncing with a backend.