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: Set up the project

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

npx create-react-app todo-list

Then, navigate into the project directory:

cd todo-list

Step 2: Create the TodoList component

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

import React, { useState } from 'react';

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

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

return (
    <div>
      <h1>Todo List</h1>
      <form onSubmit={handleSubmit}>
        <input type='text' value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
        <button type='submit'>Add Todo</button>
      </form>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

Step 3: Update the App 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;

Step 4: Run the application

Finally, start the development server by running the following command:

npm start

Your todo list app should now be running on http://localhost:3000.