Building a Todo List App with React -

React, a popular JavaScript library for building user interfaces, is a fantastic choice for creating web applications of all kinds. In this tutorial, we’ll guide you through building a simple but functional Todo List application using React. This project is an excellent starting point for those new to React and can be customized and expanded upon for more complex applications.

Prerequisites

Before getting started, make sure you have the following prerequisites in place:

Node.js and npm: You’ll need Node.js installed on your machine, which comes with npm (Node Package Manager). You can download Node.js from nodejs.org.
A Text Editor: Choose a text editor or integrated development environment (IDE) for writing your React code. Popular choices include Visual Studio Code, Sublime Text, and Atom.

Step 1: Setting Up Your React Project

First, you’ll need to create a new React project. You can use create-react-app, a tool that sets up a new React project with a basic structure, build configuration, and development server. To create a new project, open your terminal and run the following command:

npx create-react-app todo-list

This command will generate a new React project in a directory named todo-list. To navigate to your project directory, use:

cd todo-list

Step 2: Building the Todo List Component

In your project folder, navigate to src and open the App.js file. This is the main component of your React application.

Replace the content of App.js with the following code:

import React, { useState } from 'react';
import './App.css';

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

  const addTodo = () => {
    if (input.trim() !== '') {
      setTodos([...todos, input]);
      setInput('');
    }
  };

  const deleteTodo = (index) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <div className="App">
      <h1>Todo List</h1>
      <div className="input-container">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Add a new task"
        />
        <button onClick={addTodo}>Add</button>
      </div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <span onClick={() => deleteTodo(index)}>❌</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Here, we’re using React’s state and functional components. We maintain the list of todos in the todos state variable and the input value in the input state variable. The addTodo function adds a new task to the list, and the deleteTodo function removes a task when the user clicks the “❌” icon.

Step 3: Styling Your Todo List

To make your Todo List look more visually appealing, create a new CSS file for styling. In the src folder, create a file named App.css and add the following styles:

.App {
  text-align: center;
}

input {
  width: 60%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 15px;
  background-color: #0074d9;
  color: #fff;
  border: none;
  border-radius: 5px;
  margin-left: 10px;
  cursor: pointer;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

span {
  cursor: pointer;
}

These styles provide a simple, clean design for your Todo List.

Step 4: Running Your React App

You can now run your Todo List app. In your terminal, navigate to the project folder (todo-list) and run:

npm start

This command starts the development server and opens your app in a web browser. You can now add, view, and delete tasks in your Todo List.

Conclusion

In this tutorial, you’ve built a basic Todo List application using React. You’ve learned how to set up a new React project, create functional components, manage state using hooks, and style your application. This project serves as an excellent starting point for further exploration of React and building more complex web applications. You can extend the functionality, add features like task completion, or connect it to a backend for data persistence. Happy coding!

Building a Todo List App with React