React တွင် Component များ အသုံးပြုခြင်း

ချိတ်ဆက်ထားသော Component တစ်ခုစီအတွက် သက်ဆိုင်ရာ JSX tag တစ်ခု ရှိပါသည်။ ဥပမာအားဖြင့်၊ ကျွန်ုပ်တို့တွင် Product Component ရှိသည်၊ ဆိုလိုသည်မှာ ၎င်းနှင့် အောက်ပါ tag သည် ကိုက်ညီပါသည်။

<Product />

Component ၏ tag အမည်ကို အက္ခရာကြီးဖြင့် စခြင်းသည် မဖြစ်မနေလိုအပ်ပြီး၊ React အနေဖြင့် Component ကို ခေါ်ယူခြင်းနှင့် HTML tag ကို အသုံးပြုခြင်းကို ခွဲခြားသိမြင်နိုင်စေရန် ဖြစ်သည်။

ထို့ကြောင့်၊ App Component အတွင်း၌ Product Component ကို အသုံးပြုကြပါစို့၊ ၎င်းနှင့် ကိုက်ညီသော tag ကို ရေးခြင်းအားဖြင့်။

import React from 'react';
import Product from './Product';

function App() {
	return <div>
		<Product />
	</div>;
}

export default App;

ရလဒ်အနေဖြင့် render ပြီးနောက် အောက်ပါအတိုင်း ဖြစ်လာပါမည်။

<div>
	<p>
		product
	</p>
</div>

User Component တစ်ခု ပြုလုပ်ပါ၊ ၎င်းသည် အသုံးပြုသူများ၏ အချက်အလက်များကို ထုတ်ပေးပါမည်။ လောလောဆယ်တွင် ဤ Component သည် စာသားတစ်ခုခုကို ရိုးရိုးရှင်းရှင်း ထုတ်ပေးပါစေ။ ဤ Component ကို App Component အတွင်း၌ အသုံးပြုပါ။