Mini Project

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

အခုအထိသင်ထားတဲ့ component, props, state, event, conditional rendering, list rendering တို့ကိုပေါင်းပြီး Mini Todo App တစ်ခုတည်ဆောက်ကြည့်ပါမယ်။ Project သေးသေးလေးဖြစ်ပေမယ့် React thinking ကိုတော်တော်ကောင်းကောင်းလေ့ကျင့်ပေးနိုင်ပါတယ်။

jsx

import { useState } from 'react';

function TodoApp() {
  const [text, setText] = useState('');
  const [todos, setTodos] = useState([]);

  function addTodo(event) {
    event.preventDefault();

    const cleanText = text.trim();
    if (!cleanText) return;

    const newTodo = {
      id: Date.now(),
      text: cleanText
    };

    setTodos([...todos, newTodo]);
    setText('');
  }

  return (
    <main>
      <h1>React Todo Mini Project</h1>

      <form onSubmit={addTodo}>
        <input
          value={text}
          onChange={event => setText(event.target.value)}
          placeholder="Write a task..."
        />
        <button type="submit">Add</button>
      </form>

      {todos.length === 0 ? (
        <p>No tasks yet. Add your first task.</p>
      ) : (
        <ul>
          {todos.map(todo => (
            <li key={todo.id}>{todo.text}</li>
          ))}
        </ul>
      )}
    </main>
  );
}

export default TodoApp;

`text` state က input value ကိုထိန်းပြီး `todos` state က task list ကိုထိန်းပါတယ်။ Submit ဖြစ်တဲ့အခါ whitespace ကို trim လုပ်ပြီး task ရှိမှ array ထဲထည့်ပါတယ်။ ထည့်ပြီးတာနဲ့ input ကိုပြန်ရှင်းပါတယ်။

You should see

Task ရိုက်ပြီး Add နှိပ်တိုင်း list ထဲ task အသစ်တစ်ခုထည့်မယ်။ Task မရှိသေးရင် empty message ပြမယ်။

Info

Array state ကို update လုပ်တဲ့အခါ `todos.push()` မသုံးဘဲ `setTodos([...todos, newTodo])` လို့ array အသစ်တည်ဆောက်ပေးထားတာကိုသတိထားပါ။ React state ကို immutable mindset နဲ့ပြောင်းတာကအရေးကြီးပါတယ်။

အနှစ်ချုပ်

ဒီ mini project က React app တစ်ခုရဲ့အရေးကြီးတဲ့ flow ကိုပြထားပါတယ်—user input ကို state ထဲသိမ်း၊ event နဲ့ update လုပ်၊ array ကို list UI အဖြစ်ပြ၊ condition အလိုက် empty state ပြ။