Practice: Core Concepts

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

ဒီ lesson က teaching content အသစ်မဟုတ်ဘဲ Basic chapter မှာ သင်ခဲ့တဲ့ component, props, state, event handling, conditional rendering concept တွေကို လက်တွေ့ practice task များနဲ့ ပြန်လည်အသုံးချကြည့်ဖို့ ရည်ရွယ်ထားပါတယ်။ Task တစ်ခုချင်းစီက concept တစ်ခုစီကို short-form နဲ့ စမ်းသပ်စေပြီး၊ solution ကို ကိုယ်တိုင် code ရေးကြည့်ဖို့ တိုက်တွန်းပါတယ်။ Component ကို ဘယ်လို reusable ဖြစ်အောင် ဆောက်မလဲ၊ props ကို ဘယ်လို pass လုပ်မလဲ၊ event handler ကို state update နဲ့ ဘယ်လို ချိတ်မလဲဆိုတာ ပြန်စစ်ဆေးနိုင်ပါလိမ့်မယ်။ Solution တစ်ခုတည်းသာ မဟုတ်ဘဲ ကိုယ့်ပုံစံနဲ့ ရေးလို့ရပါတယ်။

လေ့ကျင့်ခန်းများ

Task 1: Counter component တစ်ခု ဆောက်ပါ - useState နဲ့ count တန်ဖိုးထားပြီး "+" and "-" button နှစ်ခုနှိပ်ရင် count တိုး/လျော့စေပါ။ Task 2: Greeting component တစ်ခု ဆောက်ပါ - name prop လက်ခံပြီး name ရှိရင် "Hello, {name}!" ဖော်ပြ၊ name မရှိရင် "Hello, Guest!" ဖော်ပြအောင် conditional rendering သုံးပါ။ Task 3: ColorPicker component ဆောက်ပါ - red/green/blue button သုံးခု click လုပ်ရင် div တစ်ခုရဲ့ background color ကို state update ကနေ ပြောင်းအောင် လုပ်ပါ။

• useState နဲ့ increment/decrement counter logic ကို ကိုယ်တိုင် ရေးနိုင်ပြီ
• props value ရှိ/မရှိအလိုက် conditional rendering (&&, ternary) သုံးနိုင်ပြီ
• button click event ကနေ state update ဖြစ်ပြီး UI ချက်ချင်း ပြောင်းသွားတာ မြင်ရပြီ

Code နမူနာ

// Task 1 starter - Counter.jsx
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  // TODO: add increment and decrement handlers here

  return (
    <div>
      <button>-</button>
      <span>{count}</span>
      <button>+</button>
    </div>
  );
}

export default Counter;

// Task 2 starter - Greeting.jsx
function Greeting({ name }) {
  // TODO: conditional rendering - "Hello, {name}!" or "Hello, Guest!"
  return <h3></h3>;
}

export default Greeting;

// Task 3 starter - ColorPicker.jsx
import { useState } from "react";

function ColorPicker() {
  const [color, setColor] = useState("lightgray");

  // TODO: three buttons that call setColor("red") / ("green") / ("blue")

  return <div style={{ background: color, height: 100 }}></div>;
}

export default ColorPicker;

Task သုံးခုစလုံး ပြီးရင် counter, greeting message, color box တို့က user interaction အလိုက် screen ပေါ်မှာ ချက်ချင်း update ဖြစ်နေပါလိမ့်မယ်။