HTML ትምህርት - ክፍል 12 | React Todo App Project

🎯

ምን እንሰራለን? // What We're Building

React ተጠቅሞ ሙሉ Todo App ከዜሮ! Add, Toggle, Delete, Filter, Priority, Progress bar ሁሉም አብሮ!
A complete React Todo App with all features — from scratch!

01

App Structure — Components ማዋቀር

App → TodoHeader + TodoList + TodoItem components

02

useState — Tasks Array

const [tasks, setTasks] = useState([]) — ሁሉም tasks ይቀመጣሉ

03

addTask / toggleTask / deleteTask

3 ዋና functions — task ማስተዳደሪያ

04

Filter + useEffect + localStorage

Filter all/active/done + save to browser

🧩

Step 1 — Component Structure // App Layout

App.jsx — Component Tree

// ── App.jsx — ዋና Component ──────────────────────
import { useState, useEffect } from 'react';

function App() {
  const [tasks, setTasks]   = useState([]);
  const [input, setInput]   = useState('');
  const [filter, setFilter] = useState('all');
  const [priority, setPriority] = useState('medium');

  return (
    <div className="app">
      <TodoHeader
        input={input}
        setInput={setInput}
        onAdd={addTask}
        priority={priority}
        setPriority={setPriority}
      />
      <TodoList
        tasks={filteredTasks}
        onToggle={toggleTask}
        onDelete={deleteTask}
        filter={filter}
        setFilter={setFilter}
      />
    </div>
  );
}

⚙️

Step 2 — State & Functions // Logic

functions.jsx — addTask / toggleTask / deleteTask

// ── addTask ─────────────────────────────────────
function addTask() {
  if (!input.trim()) return; // ባዶ ከሆነ ቁም
  setTasks([...tasks, {
    id:       Date.now(),
    text:     input.trim(),
    done:     false,
    priority: priority,
  }]);
  setInput('');        // input አጽዳ
}

// ── toggleTask ──────────────────────────────────
function toggleTask(id) {
  setTasks(tasks.map(t =>
    t.id === id ? { ...t, done: !t.done } : t
  ));
}

// ── deleteTask ──────────────────────────────────
function deleteTask(id) {
  setTasks(tasks.filter(t => t.id !== id));
}

// ── filter ──────────────────────────────────────
const filteredTasks = tasks.filter(t => {
  if (filter === 'active') return !t.done;
  if (filter === 'done')   return t.done;
  return true; // 'all'
});

💾

Step 3 — useEffect + localStorage // Save Data

localStorage — Browser ውስጥ ውሂብ ለማስቀመጥ! Page ሲዘጋ ቢሆንም tasks ይቀራሉ!
localStorage saves data in the browser — tasks persist even after page reload!

localStorage.jsx — useEffect ተጠቅሞ Save & Load

// ── Load — App ሲጫን tasks ጫን ──────────────────
useEffect(() => {
  const saved = localStorage.getItem('tasks');
  if (saved) setTasks(JSON.parse(saved));
}, []); // [] = አንድ ጊዜ ብቻ (on mount)

// ── Save — tasks ሲቀየር ሁሌ save ──────────────────
useEffect(() => {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}, [tasks]); // tasks ሲቀየር ብቻ ይሰራ

// ── TodoItem Component ──────────────────────────
function TodoItem({ task, onToggle, onDelete }) {
  return (
    <li key={task.id}
         className={task.done ? 'done' : ''}>

      <button onClick={() => onToggle(task.id)}>
        {task.done ? '✅' : '⬜'}
      </button>

      <span>{task.text}</span>

      <span className={`pri-${task.priority}`}>
        {task.priority}
      </span>

      <button onClick={() => onDelete(task.id)}>
        🗑️
      </button>

    </li>
  );
}

🎮

Live Demo — ሙሉ React Todo App! // Try It Now

ሁሉም ያለፉ ትምህርቶች አብሮ ቆሟል! Add, toggle, delete, filter, priority, progress — ሙሉ ነው! 🔥
This combines: Components + Props + useState + useEffect + .map() + Conditional!

⚛️ React Todo App

0 total 0 done 0 left

📌

ምን ተማርን? // Key Takeaways

✓

useState — Tasks Array ማስተዳደር

const [tasks, setTasks] = useState([]) — add, toggle, delete, filter

✓

useEffect — localStorage Save & Load

Page ሲዘጋ ቢሆን tasks ይቀራሉ! JSON.stringify / parse

✓

.map() — List Rendering + key prop

tasks.map(t => <TodoItem key={t.id} ... />)

✓

Conditional — done class, empty state, filter

t.done ? '✅' : '⬜' | filter === 'done' ? tasks.filter(t => t.done) : tasks

✓

Props — Component ን ተለያይቶ ስራ

TodoItem ን Props ተጠቅሞ ተለያይቶ ሰራ — reusable!

🎯

Quiz // ምን ተማርን?

❓ React ውስጥ task ለ toggle (done/undone) ማድረጊያ ትክክለኛ ኮድ የቱ ነው?
Which is the correct React way to toggle a task's done status?

A tasks[0].done = true

B setTasks(tasks.map(t => t.id === id ? {...t, done: !t.done} : t)) ✅

C tasks.done = !tasks.done

D useState(tasks.done)

React Todo App ⚛️ከዜሮ እንስራ! 🚀