Building a Simple Todo List App with React

Introduction to React Todo List App

In this tutorial, we will build a simple Todo List application using React. This application will allow users to add, remove, and edit tasks.

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 Todo List Component

Next, we need to create a new component for our Todo 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 [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

const addTask = () => {
    setTasks([...tasks, newTask]);
    setNewTask('');
  };

const removeTask = (index) => {
    setTasks(tasks.filter((task, i) => i !== index));
  };

return (
    <div>
      <input type='text' value={newTask} onChange={(e) => setNewTask(e.target.value)} />
      <button onClick={addTask}>Add Task</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task} <button onClick={() => removeTask(index)}>Remove</button></li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

Step 3: Rendering the Todo List Component

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

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

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

export default App;