စိတ်ကူးမှ ပထမဆုံး File အထိ

Idea ကို ပထမဆုံးအလုပ်လုပ်တဲ့ file အဖြစ် ပြောင်းတဲ့ အစဉ်အလာ လက်တွေ့လုပ်မည်။

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

Vibe coding မှာ အကြီးဆုံးအမှားက စိတ်ကူးကို တစ်ခါတည်း စနစ်အပြည့်ခိုင်းတာပါ။ ပထမဆုံး file က သေးရပါတယ်။ UI တစ်ခု၊ data တစ်ခု၊ လုပ်ဆောင်ချက်တစ်ခု။ ဒါမှ AI က လမ်းမလွဲ၊ ကိုယ်ကလည်း စစ်လို့လွယ်ပါတယ်။ Walking skeleton လို့ခေါ်ပါတယ်။ လှတာထက် အလုပ်လုပ်တာကို အရင်ယူပါ။

နေ့စဉ်ဘဝနဲ့ ချိတ်ကြည့်မယ်

Quick Notes အတွက် ပထမဆုံး file က NoteList.tsx ဖြစ်နိုင်ပါတယ်။ Title တစ်ခု၊ add button၊ array state။ Save/delete ကို နောက်မှ။ Prompt မှာ “create only this file, do not add routing or CSS framework” လို့ကန့်သတ်ပါ။ ပထမဆုံး run ပြီးမှ နောက် file ခွဲပါ။

• ပထမဆုံး slice တစ်ခုပဲရွေးပါ
• တစ်ဖိုင် သို့မဟုတ် တစ် component
• Run ပြီးမှ နောက်အဆင့်

အတူတူ လက်တွေ့စမ်းမယ်

export function NoteList() {
  const [notes, setNotes] = useState<string[]>([]);
  const [title, setTitle] = useState("");

  function addNote() {
    const value = title.trim();
    if (!value) return;
    setNotes((current) => [value, ...current]);
    setTitle("");
  }

  return (
    <section>
      <input value={title} onChange={(event) => setTitle(event.target.value)} />
      <button type="button" onClick={addNote}>
        Add
      </button>
      <ul>
        {notes.map((note) => (
          <li key={note}>{note}</li>
        ))}
      </ul>
    </section>
  );
}

အလုပ်လုပ်သော ပထမဆုံး component တစ်ခုကို AI နဲ့ တည်ဆောက်နိုင်မည်။