React မှာ Reusable Component တွေဘယ်လိုဖန်တီးကြမလဲ?

=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°

React application တွေတည်ဆောက်တဲ့နေရာမှာ reusable component တွေဘယ်လိုသုံးရမလဲဆိုတာကြည့်လိုက်ရအောင်။

React ကိုအရင် import လုပ်ပြီး reusable button component ဖန်တီးပါမယ်။

const Button = ({ label, onClick }) => {
return (
<button onClick={onClick}>
{label}
</button>
);
};

ပြီးရင် Main app component ကို define လုပ်မှာဖြစ်ပါတယ်။

function App() {
return (
<div>
<Button label="Click Me" onClick={() => alert('Button Clicked!')} />
<Button label="Submit" onClick={() => alert('Submitted!')} />
</div>
);
}

ပထမဆုံး button မှာ label = “Click Me” ဆိုတာပါပြီး ဒုတိယမှာတော့ button ကိုနှိပ်လိုက်ရင် Button Clicked ဆိုပြီး pop up message လေးပြပေးမှာဖြစ်ပါတယ်။

ဒုတိယ Button မှာဆိုရင် Submit ဆိုတာလေးကိုနှိပ်လိုက်တဲ့အခါ Submitted ဆိုတဲ့ pop up message လေးပေါ်လာမှာဖြစ်ပါတယ်။

Button component ကိုပြန်သုံးလို့ရတာကတော့ props တွေဖြစ်တဲ့ label နဲ့ onclick ပေါ်မှာတည်ဆောက်ထားလို့ဖြစ်ပါတယ်။

Button တွေအများကြီး create လုပ်မယ့်အစားဒီတစ်ခုတည်းကိုပဲ ပြန်သုံးပြီး clean code တွေရေးလို့ရပါတယ်။

နောက်ဆုံးအဆင့်မှာတော့ App Component ကို export ပြန်လုပ်ရင်ရပါပြီ။

export default App;

ဒါဆိုရင် React နဲ့အတူ reusable ဖြစ်တဲ့ component တွေ create လုပ်လို့ရပြီပဲဖြစ်ပါတယ်။

#creative_coder_myanma