✅ React useState & useEffect — Simple Todo App

 

📌 Title: Build a Simple React Todo App using useState & useEffect

🔹 Introduction

In this tutorial, you’ll learn how to build a simple Todo application using React’s useState and useEffect hooks. This is a great project for beginners to understand React state management and side effects.

---

🔧 Step 1: Setup React Project

npx create-react-app todo-app
cd todo-app
npm start

---

🛠 Step 2: Create App.js

import React, { useState, useEffect } from 'react';

function App() {
  const [task, setTask] = useState('');
  const [todos, setTodos] = useState(() => {
    // Get saved todos from localStorage
    const saved = localStorage.getItem('todos');
    return saved ? JSON.parse(saved) : [];
  });

  const handleAdd = () => {
    if (task.trim()) {
      setTodos([...todos, task]);
      setTask('');
    }
  };

  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  return (
    <div style={{ padding: '20px' }}>
      <h2>React Todo App</h2>
      <input value={task} onChange={(e) => setTask(e.target.value)} />
      <button onClick={handleAdd}>Add</button>
      <ul>
        {todos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

---

✅ Output Preview

• Add tasks

• Tasks stay saved even after refresh (via useEffect and localStorage)

---