Building a Simple To-Do List App with React

Introduction to React To-Do List App

In this tutorial, we will build a simple to-do list application using React. This application will allow users to add, remove, and edit items in their to-do list.

Step 1: Setting Up the Project

First, we need to set up a new React project. We can do this by running the following command in our terminal:

npx create-react-app todo-list-app

Step 2: Creating the To-Do List Component

Next, we need to create a new component for our to-do list. We can do this by creating a new file called TodoList.js in the src directory:

import React, { useState } from 'react';

function TodoList() {
    const [todos, setTodos] = useState([]);
    const [newTodo, setNewTodo] = useState('');

const handleAddTodo = () => {
        setTodos([...todos, newTodo]);
        setNewTodo('');
    };

const handleRemoveTodo = (index) => {
        setTodos(todos.filter((todo, i) => i !== index));
    };

return (
        <div>
            <input type='text' value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
            <button onClick={handleAddTodo}>Add Todo</button>
            <ul>
                {todos.map((todo, index) => (
                    <li key={index}>{todo} <button onClick={() => handleRemoveTodo(index)}>Remove</button></li>
                ))}
            </ul>
        </div>
    );
}

export default TodoList;

Step 3: Rendering the To-Do List Component

Finally, we need to render our TodoList component in the App.js file:

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

function App() {
    return (
        <div>
            <TodoList />
        </div>
    );
}

export default App;