Building a Simple To-Do List App with React

Introduction

To get started with this tutorial, you'll need to have Node.js and npm installed on your computer.

Step 1: Create a new React app

Create a new React app using create-react-app by running the following command in your terminal:

npx create-react-app todo-list-app

Step 2: Create the To-Do List Component

Create a new file called TodoList.js and add the following code:

import React, { useState } from 'react';

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

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

return (
    <div>
      <h1>To-Do List</h1>
      <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}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

Step 3: Render the To-Do List Component

Open the App.js file and replace the existing code with the following:

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

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

export default App;

Conclusion

You now have a basic to-do list app up and running. You can customize and extend this app as per your requirements.