JSX ကို တုံ့ပြန်ပါ။

JSX ဆိုတာဘာလဲ။

JSX သည် JavaScript XML ကို ကိုယ်စားပြုသည်။

JSX သည် ကျွန်ုပ်တို့အား React တွင် HTML ရေးနိုင်စေပါသည်။

JSX သည် React တွင် HTML ရေးရန်နှင့် ထည့်ရန် ပိုမိုလွယ်ကူစေသည်။

Coding JSX

createElement()  JSX သည် ကျွန်ုပ်တို့အား JavaScript တွင် HTML ဒြပ်စင်များကို ရေးသားနိုင်ပြီး ၎င်းတို့ကို မည်သည့်နည်းလမ်း နှင့်/သို့မဟုတ် appendChild()နည်းလမ်းများ မပါဘဲ DOM တွင် ထားရှိနိုင်စေ ပါသည်။

JSX သည် HTML တဂ်များကို တုံ့ပြန်သည့်ဒြပ်စင်များအဖြစ်သို့ ပြောင်းလဲသည်။

ဤတွင် ဥပမာနှစ်ခုရှိသည်။ ပထမတစ်ခုက JSX ကိုအသုံးပြုပြီး ဒုတိယကတော့ မသုံးပါဘူး။

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

ပထမဥပမာတွင် သင်တွေ့မြင်ရသည့်အတိုင်း JSX သည် ကျွန်ုပ်တို့အား JavaScript ကုဒ်အတွင်း HTML တိုက်ရိုက်ရေးနိုင်စေပါသည်။

JSX သည် ES6 ကိုအခြေခံထားသော JavaScript ဘာသာစကား၏ တိုးချဲ့မှုတစ်ခုဖြစ်ပြီး runtime တွင် ပုံမှန် JavaScript သို့ ပြန်ဆိုထားသည်။

JSX တွင် ဖော်ပြချက်များ

JSX ဖြင့် သင်သည် curly braces များအတွင်း အသုံးအနှုန်းများကို ရေးသားနိုင်သည် { }။

စကားရပ်သည် React variable သို့မဟုတ် ပိုင်ဆိုင်မှု သို့မဟုတ် အခြားသော တရားဝင် JavaScript ထုတ်ဖော်ပြောဆိုမှု ဖြစ်နိုင်သည်။ JSX သည် စကားရပ်ကို လုပ်ဆောင်ပြီး ရလဒ်ကို ပြန်ပေးလိမ့်မည်-

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

HTML ၏ ကြီးမားသော ဘလောက်တစ်ခုကို ထည့်သွင်းခြင်း။

လိုင်းများစွာတွင် HTML ကိုရေးရန်၊ HTML ကို ကွင်းအတွင်း၌ ထည့်ပါ။

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

ထိပ်တန်းအဆင့်ဒြပ်စင်တစ်ခု

HTML ကုဒ်ကို ထိပ်တန်းအဆင့်ဒြပ်စင် တစ်ခုတွင် ထည့်သွင်းထားရပါမည် ။

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

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

တနည်းအားဖြင့် သင်သည် လိုင်းများစွာကို ခြုံရန် "အပိုင်းအစ" ကို သုံးနိုင်သည်။ ၎င်းသည် DOM သို့ မလိုအပ်ဘဲ အပို node များထည့်ခြင်းကို တားဆီးပါမည်။

အပိုင်းအစတစ်ခုသည် ဗလာ HTML တက်ဂ်နှင့်တူသည်- <></>။

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

အစိတ်အပိုင်းများကို ပိတ်ရပါမည်။

JSX သည် XML စည်းမျဉ်းများကို လိုက်နာသောကြောင့် HTML အစိတ်အပိုင်းများကို ကောင်းစွာပိတ်ရပါမည်။

const myelement = <input type="text" />;

Attribute class = className

ရည်ညွှန်းချက် သည် classHTML တွင် အသုံးများသော အရည်အချင်းတစ်ခုဖြစ်သော်လည်း JSX ကို JavaScript အဖြစ် ပြန်ဆိုထားပြီး classအဓိကစကားလုံးသည် JavaScript တွင် သီးသန့်စကားလုံးဖြစ်သောကြောင့်၊ သင်သည် ၎င်းကို JSX တွင် အသုံးပြုခွင့်မရှိပါ။

JSX က ဒါကို အစားသုံးပြီး ဖြေရှင်း classNameခဲ့ပါတယ်။ JSX ကို ပြန်ဆိုသောအခါ၊ ၎င်းသည် className attribute များကို attribute အဖြစ် ဘာသာပြန် classပါသည်။

const myelement = <h1 className="myclass">Hello World</h1>;

အခြေအနေများ - ရှင်းတမ်းများရှိရင်

React သည် ထုတ်ပြန်ချက်များ ကိုif ပံ့ပိုး ပေးသော်လည်း JSX တွင် မရှိပါ။

JSX တွင် conditional statements များကို အသုံးပြုနိုင်ရန်၊ သင်သည် JSX if ၏ အပြင်ဘက်တွင် ဖော်ပြချက်များကို ထည့်ထားသင့်သည်၊ သို့မဟုတ် ၎င်းအစား ternary expression ကိုသုံးနိုင်သည်-

ရွေးချယ်မှု 1-

ifJSX ကုဒ်၏ အပြင်ဘက်တွင် ဖော်ပြချက်များကို ရေးသား ပါ-

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myelement = <h1>{text}</h1>;

ရွေးချယ်မှု 2-

အစား ternary expressions ကိုသုံးပါ-

const x = 5;

const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

ReactDOM.render(paragraph, document.getElementById('root'));