React Component များနှင့် မိတ်ဆက်

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

ဒီတော့ ခေါင်းစီးတစ်ခုကို ကြည့်ရင်၊ ထဲမှာ လိုဂိုဘလောက်၊ ဆက်သွယ်ရန်ဘလောက်၊ မီနူးဘလောက် စသည်ဖြင့် ခွဲထုတ်နိုင်ပါတယ်။ Component များသည် အခြား Component ငယ်များဖြင့် ဖွဲ့စည်းနိုင်သည်။

React မှာလည်း အလားတူပါပဲ - ဆိုက်တစ်ခုကို Component များစုစည်းမှုဖြင့် တည်ဆောက်ပြီး၊ ထို Component များထဲမှာ တခြား Component များ ပါဝင်နိုင်သည်။

React မှာ Component တစ်ခုစီသည် သီးခြား Module တစ်ခုဖြစ်သည်။ ပုံမှန်အားဖြင့် ဖွံ့ဖြိုးမှုကို အဓိက Component ဖြစ်သော App မှ စတင်ပြီး ၎င်းထဲတွင် အခြားအရာများ ပါဝင်သည်။

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

ဥပမာအနေနဲ့ ထုတ်ကုန်ဒေတာများကို ပြသတဲ့ Component တစ်ခု လိုအပ်တယ်ဆိုပါစို့။ ဒါအတွက် ကျွန်ုပ်တို့အလုပ်လုပ်တဲ့ ဖိုလ်ဒါထဲမှာ Product.js ဖိုင် ဖန်တီးပြီး အောက်ပါကုဒ်ကို ထည့်ရန် လိုအပ်ပါသည်-

import React from 'react';

function Product() {
	return <p>
		ထုတ်ကုန်
	</p>;
}

export default Product;

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

အခု ကျွန်ုပ်တို့ဖန်တီးထားတဲ့ Component ကို App Component ထဲမှာ ပြသကြပါစို့။ အခု ကျွန်ုပ်တို့ရဲ့ App မှာ အောက်ပါကုဒ် ရှိတယ်ဆိုပါစို့-

import React from 'react';

function App() {
	return <div>
		စာသား
	</div>;
}

export default App;

ပထမဆုံးအနေနဲ့ ကျွန်ုပ်တို့ဖန်တီးထားတဲ့ ထုတ်ကုန် Component ကို import လုပ်ရန် လိုအပ်ပါသည်-

import React from 'react';
import Product from './Product'; // ထုတ်ကုန်ကို import လုပ်သည်

function App() {
	return <div>
		စာသား
	</div>;
}

export default App;

ဒီလို import လုပ်ပြီးတဲ့နောက်မှာ App Component ထဲမှာ Product Component ကို အသုံးပြုနိုင်ပါပြီ။