HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

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

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

React Hooks

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

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

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

React Props

❮ ယခင် နောက်တစ်ခု ❯

Props များသည် React အစိတ်အပိုင်းများသို့ ဖြတ်သွားသော အကြောင်းပြချက်များဖြစ်သည်။

Pros များကို HTML ရည်ညွှန်းချက်များမှတစ်ဆင့် အစိတ်အပိုင်းများသို့ ပေးပို့သည်။

props Properties ကို ရည်ညွှန်းသည်။

React Props

React Props သည် JavaScript ရှိ လုပ်ဆောင်ချက် အငြင်းအခုံများ နှင့် HTML ရှိ attribute များနှင့်တူသည်။

အစိတ်အပိုင်းတစ်ခုသို့ props များပေးပို့ရန် HTML attribute များကဲ့သို့ တူညီသော syntax ကိုအသုံးပြုပါ-

ဥပမာ

ကားဒြပ်စင်သို့ "အမှတ်တံဆိပ်" ရည်ညွှန်းချက်ကို ထည့်ပါ-

const myelement = <Car brand="Ford" />;

အစိတ်အပိုင်းသည် အငြင်းအခုံကို propsအရာဝတ္ထုတစ်ခုအဖြစ် လက်ခံရရှိသည်-

ဥပမာ

အစိတ်အပိုင်းတွင် အမှတ်တံဆိပ်ကို အသုံးပြုပါ

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

w3schools CERTIFIED . 2022

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

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

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

ဒေတာဖြတ်ပါ။

Props သည် parameters များအဖြစ် အစိတ်အပိုင်းတစ်ခုမှ အခြားတစ်ခုသို့ ဒေတာပေးပို့ပုံဖြစ်သည်။

ဥပမာ

ဂိုထောင်အစိတ်အပိုင်းမှ "အမှတ်တံဆိပ်" ပိုင်ဆိုင်မှုကို ကားအစိတ်အပိုင်းသို့ ပို့ပါ-

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand="Ford" />
    </>
  );
}

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

အကယ်၍ သင့်တွင် ပေးပို့ရန် variable တစ်ခုရှိပြီး၊ အထက်ဖော်ပြပါ ဥပမာတွင်ကဲ့သို့ စာကြောင်းတစ်ခုမဟုတ်ပါက၊ သင်သည် ပြောင်းလဲနိုင်သောအမည်ကို curly brackets အတွင်းသို့ ထည့်လိုက်ရုံပင်။

ဥပမာ

အမည်ပေးထားသည့် ကိန်းရှင်တစ်ခုကို ဖန်တီးပြီး ၎င်းကို အစိတ်အပိုင်း carNameသို့ ပေးပို့ပါ -Car

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

function Garage() {
  const carName = "Ford";
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand={ carName } />
    </>
  );
}

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

သို့မဟုတ် အရာဝတ္ထုတစ်ခုဖြစ်ခဲ့လျှင်-

ဥပမာ

အမည်ရှိ အရာဝတ္ထုတစ်ခုကို ဖန်တီးပြီး အစိတ်အပိုင်း carInfoသို့ ပို့ပါ -Car

function Car(props) {
  return <h2>I am a { props.brand.model }!</h2>;
}

function Garage() {
  const carInfo = { name: "Ford", model: "Mustang" };
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand={ carInfo } />
    </>
  );
}

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

မှတ်ချက်- React Props များသည် ဖတ်ရန်သာဖြစ်သည်။ ၎င်းတို့၏တန်ဖိုးကိုပြောင်းလဲရန်ကြိုးစားပါက အမှားအယွင်းတစ်ခုရရှိမည်ဖြစ်သည်။

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

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

အမည်အမည်ပေးထားသော ပြောင်းလဲမှုတစ်ခုကို ဖန်တီးပြီး ၎င်းကို Message အစိတ်အပိုင်းသို့ ပေးပို့ပါ။

function Person(props) {
  return <h2>I'm { props.name }!</h2>;
}

function Greeting() {
  const name = "Jesse"
  return (
    <>
      <h1>Hello!</h1>
      <Person name= name  />
    </>
  );
}

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

❮ ယခင် နောက်တစ်ခု ❯