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 တွေကိုလိုက်နာရပါတယ်။