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

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 ဒြပ်စင်များကို ပြန်ပေးသည့် လုပ်ဆောင်ချက်များနှင့် တူသည်။


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

အစိတ်အပိုင်းများသည် သီးခြားလွတ်လပ်ပြီး ပြန်သုံးနိုင်သော ကုဒ်များဖြစ်သည်။ ၎င်းတို့သည် JavaScript လုပ်ဆောင်ချက်များကဲ့သို့ တူညီသော ရည်ရွယ်ချက်ကို လုပ်ဆောင်သော်လည်း သီးခြားလုပ်ဆောင်ပြီး HTML ကို ပြန်ပေးသည်။

အစိတ်အပိုင်းများသည် Class အစိတ်အပိုင်းများနှင့် Function အစိတ်အပိုင်းများဟူ၍ နှစ်မျိုးရှိပြီး ဤသင်ခန်းစာတွင် Function အစိတ်အပိုင်းများကို အာရုံစိုက်ပါမည်။

React ကုဒ် အဟောင်းများတွင်၊ အဓိကအားဖြင့် အသုံးပြုသော Class အစိတ်အပိုင်းများကို သင်တွေ့နိုင်သည်။ React 16.8 တွင် ထည့်သွင်းထားသည့် Hooks နှင့်အတူ Function အစိတ်အပိုင်းများကို ယခုအသုံးပြုရန် အကြံပြုထားသည်။ သင်၏ကိုးကားမှုအတွက် Class အစိတ်အပိုင်းများပေါ်တွင် ရွေးချယ်နိုင်သောအပိုင်းတစ်ခုရှိသည်။


သင်၏ပထမအစိတ်အပိုင်းကိုဖန်တီးပါ။

React အစိတ်အပိုင်းကို ဖန်တီးသောအခါ၊ အစိတ်အပိုင်း၏အမည်သည် စာလုံးကြီးဖြင့် စတင်ရပါမည်။

အတန်းအစား

အတန်း၏ အစိတ်အပိုင်းတစ်ခုသည် extends React.Componentထုတ်ပြန်ချက်ပါ၀င်ရမည်။ ဤထုတ်ပြန်ချက်သည် React.Component အတွက် အမွေဆက်ခံမှုကို ဖန်တီးပေးပြီး သင့်အစိတ်အပိုင်းကို React.Component ၏ လုပ်ဆောင်ချက်များကို ဝင်ရောက်ခွင့်ပေးသည်။

အစိတ်အပိုင်းသည် render()နည်းလမ်းတစ်ခုလည်း လိုအပ်သည်၊ ဤနည်းလမ်းသည် HTML ကို ပြန်ပေးသည်။

ဥပမာ

ဟုခေါ်သော Class အစိတ်အပိုင်းတစ်ခုကို ဖန်တီးပါ။Car

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

လုပ်ဆောင်ချက် အစိတ်အပိုင်း

ဤသည်မှာ အထက်ဖော်ပြပါ ဥပမာနှင့် တူညီသော်လည်း ၎င်းအစား Function အစိတ်အပိုင်းကို အသုံးပြု၍ ဖန်တီးထားသည်။

Function အစိတ်အပိုင်းတစ်ခုသည် HTML ကိုပြန်ပေးသည်၊ နှင့် Class အစိတ်အပိုင်းတစ်ခုကဲ့သို့တူညီသောပုံစံအတိုင်းလုပ်ဆောင်သည်၊ သို့သော် Function အစိတ်အပိုင်းများကိုကုဒ်များစွာဖြင့်ရေးသားနိုင်ပြီး၊ နားလည်ရန်ပိုမိုလွယ်ကူသည်၊ ဤသင်ခန်းစာတွင်ပိုမိုနှစ်သက်မည်ဖြစ်သည်။

ဥပမာ

Function လို့ခေါ်တဲ့ အစိတ်အပိုင်းတစ်ခုကို ဖန်တီးပါ။Car

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}


w3schools CERTIFIED . 2022

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

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

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

အစိတ်အပိုင်းတစ်ခုကို ပုံဖေါ်ခြင်း။

ယခု သင်၏ React အပလီကေးရှင်းတွင် ဒြပ်စင်တစ်ခုကို ပြန်ပေးသည့် Car ဟုခေါ်သော အစိတ်အပိုင်း <h2>တစ်ခု ရှိသည်။

သင့်အပလီကေးရှင်းတွင် ဤအစိတ်အပိုင်းကို အသုံးပြုရန်၊ သာမန် HTML ကဲ့သို့ အလားတူ syntax ကို အသုံးပြုပါ- <Car />

ဥပမာ

Car"အမြစ်" ဒြပ်စင်ရှိ အစိတ်အပိုင်းကို ပြ ပါ-

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


ကျားကန်

propsအစိတ်အပိုင်းများ ကို ဂုဏ်သတ္တိများ ၏ အတိုကောက် အဖြစ် ဖြတ်သန်းနိုင်သည် ။

Props သည် function arguments များကဲ့သို့ဖြစ်ပြီး ၎င်းတို့ကို attributes အဖြစ် အစိတ်အပိုင်းထဲသို့ သင်ပေးပို့ပါသည်။

propsနောက်အခန်းတွင် သင်ပိုမိုလေ့လာသင်ယူလိမ့်မည် ။

ဥပမာ

ကားအစိတ်အပိုင်းသို့ အရောင်တစ်ခုပေးပို့ရန် ရည်ညွှန်းချက်တစ်ခုကို အသုံးပြုပြီး render() လုပ်ဆောင်ချက်တွင် အသုံးပြုပါ-

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

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));


အစိတ်အပိုင်းများတွင် အစိတ်အပိုင်းများ

ကျွန်ုပ်တို့သည် အခြားသော အစိတ်အပိုင်းများအတွင်းရှိ အစိတ်အပိုင်းများကို ကိုးကားနိုင်သည်-

ဥပမာ

Garage အစိတ်အပိုင်းအတွင်းရှိ ကားအစိတ်အပိုင်းကို အသုံးပြုပါ-

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

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

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


Files ရှိ အစိတ်အပိုင်းများ

React သည် ကုဒ်ကို ပြန်လည်အသုံးပြုခြင်းအကြောင်းဖြစ်ပြီး၊ သင်၏အစိတ်အပိုင်းများကို သီးခြားဖိုင်များအဖြစ် ခွဲရန် အကြံပြုထားသည်။

ထိုသို့ပြုလုပ်ရန်၊ ဖိုင်တိုးချဲ့မှုတစ်ခုဖြင့် ဖိုင်အသစ်တစ်ခုကို ဖန်တီးပြီး ၎င်း .js အတွင်းကုဒ်ကို ထည့်ပါ။

ဖိုင်အမည်သည် စာလုံးကြီးဖြင့် စတင်ရမည်ကို သတိပြုပါ။

ဥပမာ

ဤသည်မှာ ဖိုင်အသစ်ဖြစ်ပြီး၊ ၎င်းကို "Car.js" ဟု အမည်ပေးထားပါသည်။

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

export default Car;

ကားအစိတ်အပိုင်းကိုသုံးနိုင်စေရန်၊ သင်၏အက်ပ်လီကေးရှင်းတွင် ဖိုင်ကိုထည့်သွင်းရပါမည်။

ဥပမာ

ယခု ကျွန်ုပ်တို့သည် အပလီကေးရှင်းတွင် "Car.js" ဖိုင်ကို တင်သွင်းပြီး ၎င်းကို Car ဤနေရာတွင် ဖန်တီးထားသကဲ့သို့ အစိတ်အပိုင်းကို ကျွန်ုပ်တို့အသုံးပြုနိုင်ပါသည်။

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

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


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

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

အောက်ပါ React အစိတ်အပိုင်းကို "လူ" ဟု အမည်ပေးပါ။

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