React တွင် Component ချဉ်းကပ်နည်းမိတ်ဆက်

ကျွန်ုပ်တို့တွင် ဝဘ်ဆိုဒ်တစ်ခုရှိသည်ဆိုပါစို့။ ထိုဝဘ်ဆိုဒ်ပေါ်တွင် ကျွန်ုပ်တို့သည် အချို့သောဘလောက်များကို ခွဲခြားသတ်မှတ်နိုင်ပါသည်- header၊ content၊ sidebar၊ footer နှင့် အခြားအရာများ။ ဘလောက်တစ်ခုစီကို ပိုမိုသေးငယ်သော ဘလောက်ခွဲများအဖြစ် ထပ်မံခွဲခြားနိုင်ပါသည်။ ဥပမာအားဖြင့် header တွင် ယေဘုယျအားဖြင့် လိုဂိုတစ်ခု၊ menu တစ်ခု၊ ဆက်သွယ်ရန်ဘလောက်တစ်ခု စသည်ဖြင့် ခွဲခြားသတ်မှတ်နိုင်ပါသည်။

React တွင် ထိုကဲ့သို့သောဘလောက်တစ်ခုစီကို component ဟုခေါ်ပါသည်။ Component တစ်ခုစီသည် ၎င်းအတွင်း ပိုမိုသေးငယ်သော component များပါဝင်နိုင်ပြီး၊ ထို component များထဲတွင် ပိုမိုသေးငယ်သော component များ ပါဝင်နိုင်ကာ ထိုသို့ဆက်လက်ပါဝင်နိုင်ပါသည်။

React ရှိ Component တစ်ခုစီသည် src ဖိုလ်ဒါတွင်တည်ရှိသော ES6 module တစ်ခုနှင့် ကိုက်ညီပါသည်။ Module ဖိုင်အမည်ကို စာလုံးကြီးဖြင့်ရေးပြီး ထို module ကုဒ်အတွင်းရှိ function အမည်နှင့် ကိုက်ညီရပါမည်။

ဥပမာ၊ App.js အမည်ရှိဖိုင်သည် ၎င်းအတွင်း App function ပါဝင်ရပါမည်-

import React from 'react';

function App() {
	// component ကုဒ်
}

export default App;

Component တစ်ခုသည် အဓိကဖြစ်ရပါမည် - အခြား component များထည့်သွင်းရမည့် Component ဖြစ်သည်။ React တွင် ပုံသေအားဖြင့် ထိုကဲ့သို့သော Component သည် App Component ဖြစ်ပါမည်။ ဤ Component သို့ အခြား Component များကို တွဲထည့်သွင်းမည်ဖြစ်သည်။ ဤသို့ပြုလုပ်ပုံကို - ကျွန်ုပ်တို့ နောက်ပိုင်းသင်ခန်းစာများတွင် ဆက်လက်လေ့လာသွားပါမည်။