Project: Task Tracker Setup

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

ဒီ mini project series မှာ Task Tracker app တစ်ခုကို အဆင့်လိုက် build လုပ်ကြမှာပါ။ Part 1 မှာတော့ app ရဲ့ skeleton structure ကို components အဖြစ်ခွဲပြီး props နဲ့ data ကို parent ကနေ child ကို ဘယ်လိုပို့မလဲဆိုတာ ပြန်လေ့ကျင့်ပါမယ်။ TaskTracker (parent) component တစ်ခုက task list state ကို hold လုပ်ပြီး၊ TaskItem (child) component က task တစ်ခုချင်းစီကို UI ပေါ်မှာ render လုပ်ပါတယ်။ ဒီအဆင့်မှာ real feature (add/delete) မထည့်သေးဘဲ static sample data နဲ့ layout ကိုပဲ အာရုံစိုက်ဆောက်မှာပါ။ Component boundary ကို ကောင်းကောင်းပိုင်းထားရင် နောက် part တွေမှာ feature ထပ်ထည့်တာ အများကြီးလွယ်သွားပါလိမ့်မယ်။

လက်တွေ့ ဆောက်ကြည့်မယ်

src/components/ ထဲမှာ TaskTracker.jsx နဲ့ TaskItem.jsx ဆိုပြီး file နှစ်ခု ဆောက်ပါ။ TaskTracker မှာ useState နဲ့ sample task array (id, text, done fields ပါတဲ့ object list) တစ်ခု ကြိုထားပါ။ .map() သုံးပြီး task list ကို TaskItem တစ်ခုချင်းစီအဖြစ် render လုပ်ပါ - key prop အဖြစ် task.id ကို ပေးဖို့မမေ့ပါနဲ့။ TaskItem က task text, done status ကို props အနေနဲ့ လက်ခံပြီး done ဖြစ်ရင် strikethrough style ပြပါ (conditional class name သုံးပါ)။ App.jsx ထဲမှာ TaskTracker ကို import ခေါ်သုံးပြီး app ကို run ကြည့်ပါ။

• TaskTracker နဲ့ TaskItem component နှစ်ခုကို သီးခြား file အဖြစ်ခွဲထားနိုင်ပြီ
• task array ကို .map() နဲ့ key prop ပါအောင် render လုပ်နိုင်ပြီ
• props ကနေ done status လက်ခံပြီး conditional style ပြနိုင်ပြီ

Code နမူနာ

// src/components/TaskItem.jsx
function TaskItem({ text, done }) {
  return (
    <li className={done ? "task-item done" : "task-item"}>
      <span>{text}</span>
      {done && <span className="badge">Done</span>}
    </li>
  );
}

export default TaskItem;

// src/components/TaskTracker.jsx
import { useState } from "react";
import TaskItem from "./TaskItem";

function TaskTracker() {
  const [tasks] = useState([
    { id: 1, text: "Learn React basics", done: true },
    { id: 2, text: "Build Task Tracker project", done: false },
    { id: 3, text: "Add filtering feature", done: false },
  ]);

  return (
    <div className="task-tracker">
      <h2>My Tasks</h2>
      <ul>
        {tasks.map((task) => (
          <TaskItem key={task.id} text={task.text} done={task.done} />
        ))}
      </ul>
    </div>
  );
}

export default TaskTracker;

Browser မှာ task list သုံးခု list item အနေနဲ့ ပေါ်လာပြီး done: true ဖြစ်တဲ့ task မှာ strikethrough style နဲ့ Done badge ပေါ်လာပါလိမ့်မယ်။