Thuta Learning
ရှာဖွေရန်
BasicWeb Developmentintermediate

What is JSX?

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

JSX ဆိုတာ JavaScript ထဲမှာ HTML လို markup ရေးနိုင်စေတဲ့ syntax ပါ။ React မှာ UI ကိုဖော်ပြတဲ့အခါ JSX ကိုအသုံးများပါတယ်။ JSX ထဲမှာ JavaScript expression ကို `{}` နဲ့ထည့်နိုင်တာကြောင့် data နဲ့ UI ကို သန့်သန့်ရှင်းရှင်း ချိတ်နိုင်ပါတယ်။

jsx
function Greeting() {
  const name = 'Aung Aung';
  const isLearning = true;

  return (
    <section>
      <h1>Hello, {name}!</h1>
      <p>{isLearning ? 'React ကိုလေ့လာနေပါတယ်' : 'နောက်မှစမယ်'}</p>
    </section>
  );
}

`name` variable တန်ဖိုးကို `{name}` နဲ့ UI ထဲထည့်ထားပါတယ်။ `isLearning` က true ဖြစ်ရင် ပထမစာသား၊ false ဖြစ်ရင် ဒုတိယစာသားကို ternary operator နဲ့ပြပါတယ်။

You should see
Browser မှာ `Hello, Aung Aung!` နဲ့ `React ကိုလေ့လာနေပါတယ်` ဆိုတဲ့စာသား ပေါ်လာမယ်။

Info

JSX ဟာ HTML နဲ့တူပေမယ့် JavaScript syntax ထဲမှာရှိတာကြောင့် `className`, `htmlFor`, self-closing tag စတဲ့ React rule တွေကိုလိုက်နာရပါတယ်။

ဒီနေရာမှာ လူအများမှားတတ်တယ်

  • JSX ထဲမှာ `{if (...) { ... }}` လိုရေးလို့မရပါ။ Conditional UI အတွက် ternary operator, `&&`, သို့မဟုတ် return မတိုင်ခင် variable တစ်ခုထဲမှာ JSX သိမ်းပြီးသုံးပါ။
What is JSX? | Thuta Learning