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

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

React Hooks

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

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

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

တုံ့ပြန်မှုစာရင်းများ


React တွင်၊ သင်သည် loop အမျိုးအစားအချို့ဖြင့် စာရင်းများကို တင်ဆက်မည်ဖြစ်သည်။

JavaScript map()array method သည် ယေဘူယျအားဖြင့် ဦးစားပေးနည်းလမ်းဖြစ်သည်။

map()နည်းလမ်းကို ပြန်လည်သုံးသပ်မှု လိုအပ်ပါက ၊ ES6 ကဏ္ဍကို ကြည့်ပါ ။


ဥပမာ-

ကားဂိုထောင်မှ ကားများအားလုံးကို တင်ဆက်လိုက်ရအောင်။

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

function Garage() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car brand={car} />)}
      </ul>
    </>
  );
}

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

သင့်တွင် ဤကုဒ်ကို run သောအခါ create-react-app၊ ၎င်းသည် အလုပ်လုပ်မည်ဖြစ်သော်လည်း စာရင်းအရာများအတွက် ပေးထားသည့် "သော့" မရှိကြောင်း သတိပေးချက်ကို လက်ခံရရှိမည်ဖြစ်သည်။


w3schools CERTIFIED . 2022

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

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

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

သော့များ

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

သော့များသည် မွေးချင်းတစ်ဦးစီအတွက် သီးသန့်ဖြစ်ရန် လိုအပ်သည်။ သို့သော် ၎င်းတို့ကို တစ်ကမ္ဘာလုံးတွင် ပွားနိုင်သည်။

ယေဘုယျအားဖြင့်၊ သော့သည် အရာတစ်ခုစီအတွက် သီးခြားသတ်မှတ်ထားသော ID ဖြစ်သင့်သည်။ နောက်ဆုံးအားကိုးရာအနေဖြင့်၊ သင်သည် array အညွှန်းကို သော့တစ်ခုအဖြစ် အသုံးပြုနိုင်သည်။

ဥပမာ-

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

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

function Garage() {
  const cars = [
    {id: 1, brand: 'Ford'},
    {id: 2, brand: 'BMW'},
    {id: 3, brand: 'Audi'}
  ];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car key={car.id} brand={car.brand} />)}
      </ul>
    </>
  );
}

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


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

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

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

function GroceryList() {
  const items = [
    {id: 1, name: 'bread'},
    {id: 2, name: 'milk'},
    {id: 3, name: 'eggs'}
  ];

  return (
    <>
      <h1>Grocery List</h1>
      <ul>
        {items.map((item) => <li ={item.id}>{item.name}</li>)}
      </ul>
    </>
  );
}

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