Components

Component ဆိုတာ UI အပိုင်းတစ်ခုကို သီးခြား function အဖြစ်ခွဲရေးထားတာပါ။ React app ကြီးတစ်ခုကို component လေးတွေဖြစ်အောင်ခွဲလိုက်ရင် code ဖတ်ရလွယ်၊ ပြန်သုံးရလွယ်၊ bug ရှာရလွယ် ဖြစ်သွားပါတယ်။

function WelcomeCard() {
  return (
    <article className="card">
      <h2>React Course</h2>
      <p>Component နဲ့ UI ကိုအပိုင်းလိုက် တည်ဆောက်ကြမယ်။</p>
    </article>
  );
}

function App() {
  return (
    <main>
      <h1>ThutaTech Lessons</h1>
      <WelcomeCard />
      <WelcomeCard />
    </main>
  );
}

`WelcomeCard` component ကိုတစ်ခါရေးပြီး `App` ထဲမှာ နှစ်ခါပြန်သုံးထားပါတယ်။ Real project မှာ product card, course card, blog card တွေကိုဒီလိုပြန်သုံးနိုင်ပါတယ်။

Browser မှာ heading တစ်ခုနဲ့ တူညီတဲ့ card နှစ်ခု ပေါ်လာမယ်။