တုံ့ပြန် ကျူတိုရီရယ်

React Home React Intro React စတင်လိုက်ပါ။ ES6 ကို တုံ့ပြန်ပါ။ Render HTML ကို တုံ့ပြန်ပါ။ JSX ကို တုံ့ပြန်ပါ။ အစိတ်အပိုင်းများကို တုံ့ပြန်ပါ။ React Class React Props အဖြစ်အပျက်များကို တုံ့ပြန်ပါ။ အခြေအနေများကို တုံ့ပြန်ပါ။ တုံ့ပြန်မှုစာရင်းများ တုံ့ပြန်မှုပုံစံများ Router ကို တုံ့ပြန်ပါ။ တုံ့ပြန်မှတ်စု CSS Styling ကို တုံ့ပြန်ပါ။ Sass Styling ကို တုံ့ပြန်ပါ။

React Hooks

Hook ဆိုတာဘာလဲ။ ပြည်နယ်ကိုအသုံးပြုပါ။ အသုံးပြုမှုအကျိုးသက်ရောက်မှု အသုံးအနှုန်း အသုံးပြုရန် Ref Reducer ကိုအသုံးပြုပါ။ ဖုန်းခေါ်ဆိုမှုကို အသုံးပြုပါ။ Memo ကိုအသုံးပြုပါ။ စိတ်ကြိုက်ချိတ်

တုံ့ပြန်လေ့ကျင့်မှုများ

တုံ့ပြန်မေးခွန်း တုံ့ပြန်လေ့ကျင့်မှုများ တုံ့ပြန်လက်မှတ်

အဖြစ်အပျက်များကို တုံ့ပြန်ပါ။


HTML DOM ဖြစ်ရပ်များကဲ့သို့ပင်၊ React သည် သုံးစွဲသူဖြစ်ရပ်များအပေါ် အခြေခံ၍ လုပ်ဆောင်ချက်များကို လုပ်ဆောင်နိုင်သည်။

React တွင် HTML ကဲ့သို့ တူညီသော ဖြစ်ရပ်များ ပါရှိသည်- ကလစ်၊ ပြောင်းလဲခြင်း၊ မောက်စ်တင်ခြင်း စသည်တို့ ဖြစ်သည်။


ပွဲများထည့်ခြင်း။

တုံ့ပြန်သည့် ဖြစ်ရပ်များကို camelCase အထားအသို ဖြင့် ရေးသားထားသည်။

onClick အစား onclick.

React event handlers များကို curly braces အတွင်းတွင် ရေးထားသည်-

onClick={shoot}  အစား onClick="shoot()".

တုံ့ပြန်မှု-

<button onClick={shoot}>Take the Shot!</button>

HTML-

<button onclick="shoot()">Take the Shot!</button>

ဥပမာ-

shootလုပ်ဆောင်ချက်ကို အစိတ်အပိုင်းအတွင်း ထည့် သွင်း Footballပါ-

function Football() {
  const shoot = () => {
    alert("Great Shot!");
  }

  return (
    <button onClick={shoot}>Take the shot!</button>
  );
}

ReactDOM.render(<Football />, document.getElementById('root'));


w3schools CERTIFIED . 2022

လက်မှတ်ရယူပါ။

React modules များကိုဖြည့်ပါ၊ လေ့ကျင့်ခန်းများလုပ်ပါ၊ စာမေးပွဲကိုဖြေဆိုပြီး w3schools မှအသိအမှတ်ပြုခံရပါ။

$95 စာရင်းသွင်းပါ။

စကားဖြတ်ခြင်း

အငြင်းအခုံတစ်ခုအား ဖြစ်ရပ်ကိုင်တွယ်သူထံပေးပို့ရန် မြှားလုပ်ဆောင်ချက်ကို အသုံးပြုပါ။

ဥပမာ-

"ပန်းတိုင်!" shoot မြှားလုပ်ဆောင်ချက်ကို အသုံးပြု၍ လုပ်ဆောင်ချက် အတွက် ကန့်သတ်ချက်တစ်ခုအနေဖြင့် ၊

function Football() {
  const shoot = (a) => {
    alert(a);
  }

  return (
    <button onClick={() => shoot("Goal!")}>Take the shot!</button>
  );
}

ReactDOM.render(<Football />, document.getElementById('root'));


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

လုပ်ဆောင်ချက်ကို စတင်လုပ်ဆောင်သည့် လုပ်ဆောင်ချက်ကို ကိုင်တွယ်ဖြေရှင်းသူများသည် တုံ့ပြန်သည့်ဖြစ်ရပ်သို့ ဝင်ရောက်ခွင့်ရှိသည်။

ကျွန်ုပ်တို့၏ဥပမာတွင်ဖြစ်ရပ်သည် "ကလစ်" ဖြစ်ရပ်ဖြစ်သည်။

ဥပမာ-

Arrow Function- ဖြစ်ရပ်အရာဝတ္တုကို ကိုယ်တိုင်ပေးပို့ခြင်း-

function Football() {
  const shoot = (a, b) => {
    alert(b.type);
    /*
    'b' represents the React event that triggered the function,
    in this case the 'click' event
    */
  }

  return (
    <button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
  );
}

ReactDOM.render(<Football />, document.getElementById('root'));

နောက်ပိုင်းအခန်း တွင် Form ကို ကြည့်သောအခါ ၎င်းသည် အဆင်ပြေ ပါသည်။


လေ့ကျင့်ခန်းများဖြင့် သင့်ကိုယ်သင် စမ်းသပ်ပါ။

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

ကလစ်ဖြစ်ရပ်ကိုင်တွယ်သူပါဝင်ရန် ဤထုတ်ပြန်ချက်ကို ဖြည့်စွက်ပါ။

<button ={clicked()}>Click Me!</button>