Zero To Master

Javascript Tricks
ကျတော်တို့ console မှာ 3 < 2 < 1 လို့ရိုက်ပီးတော့ အဖြေထုတ်ကြည့်ရင်
သူက true လို့ပြန်ပေးလာတယ်ဗျာ ဘာကြောင့်လည်းဆိုတာသိလား?

javascript မှာက ဘယ်လိုမျိုးအလုပ်လုပ်တာလည်းဆိုတော့ ဦးဆုံး comparison တခုကိုအရင်ဖြေရှင်းတယ်ဗျာ 3< 2 ကို အဲမှာ ဘာဖြစ်သွားလည်းဆိုတော့ သူကfalse ကို return ထုတ်ပေးတယ်ဗျာ အဲမှာ false ဖြစ်သွားတော့ သူ့ တန်ဖိုးက 0 ဖြစ်သွားတယ် အဲဒီမှာ နောက်ထပ် comparison ကို ထပ်ပီးတော့ ဖြေရှင်းပေးတယ် false < 1 ဆိုတော့ သူ့ရဲ့ တန်ဖိုးက 0

ကျတော်တို့ ဒီနေ့မှာက ကျတော့ react ရဲ့ data passing / data flow အကြောင်းလေးကို လေ့လာလိုက်ကြရအောင်ဗျာ

ပထမဆုံး ကျတော်တို့ src မှာ component တခုကိုတည်ဆောက်လိုက်ကြရအောင်ဗျာ

hello.js
လို့ပေးပီးတော့ သူ့အောက်မှကျတော်တို့ code လေးကို ရေးလိုက်ပါမယ်

import React from "react";

function Hello() {
return Hello;
}

export default Hello;

ပြီးရင်တော့ ကျွန်တော်တို့ app.js မှာသွားပီးတော့ သုံးလိုက်ပါမယ်
ပြီးရင်တော့ ကျတော်တို့ data passing ဘယ်လိုအလုပ်လုပ်သွားလည်းဆိုတာကို ဆက်ကြည့်ကြရအောင်ဗျာ app.js မှာ သုံးထားတဲ့ ကျတော်တို့ component မှာ ကျတော်တို့ property လေးတွေရေးလိုက်ပါမယ်



အဲလိုမျိုး ရေးလိုက်ပါမယ် အဲမှာကျတော်တို့က name ဆိုပီးတော့ property လေး တခုကို လက်ဆင့်ကမ်းပေးလိုက်ဘီဗျာ အဲဒါကို ကျတော်တို့ componentမှာ ဘယ်လိုအသုံးပြုရမလဲဆိုတော့

function Hello(props) {
return Hello{props.name};
}

အဲလိုလေးပြန်ရေးပေးရပါမယ် အဲဒီမှာ ကျတော်တို့က အပေါ်က function Hello အနောက်မှာ ပါတဲ့ parenthesis ထဲမှာ ကျတော်တို့ Props ဆိုပီးတော့ parameter လေးတခု နဲ့ဖမ်းထားပီးတော့ အောက်မှာက ကျတော့ ကျွန်တော်တို့ props.name လို့ပြန်သုံးထားတာကိုတွေ့ရပါမယ်ဗျ

အဲမှာ ဘယ်လိုမျိုးလည်းဆိုတော့ ကျတော်တို့က parent ဖြစ်တဲ့ app.js မှာ အသုံးပြုလိုက်တဲ့ name ဆိုတဲ့ property လေးက သူ့ရဲ့ child ဖြစ်တဲ့ hello ဆိုတဲ့ component ထဲကိုရောက်လာတယ်ဗျာ

ပြောရရင် အဲဒါက ကျတော်တို့ react ရဲ့အလုပ်လုပ်ပုံလေး တခုပါပဲ့ ဗျာ
အဲလိုမျိုးတွေအသုံးပြုပီးတော့ ကျတော်တို့ component တွေကို စီမံပီးတော့ refractor တွေ လုပ်တဲ့အခါကျရင် တော်တော် အဆင်ပြေပြေ သုံးလို့ရသွားတာပေါ့ဗျာ

အဲဒီ props ကို ကျတော်ပြသလိုမရေးချင်ဘူးဆိုရင် destructuring ပုံစံနဲ့ရေးလို့ရပါသေးတယ်ဗျာ ဘယ်လိုမျိုးလည်းဆိုတော့

function Hello({ name }) {
return Hello{name};
}

အဲလိုလေးရေးပေးရမှာပါ ကျတော်တို့က အဲမှာကျတော့ ဘယ်လိုမျိုးဖြစ်သွားတာလည်းဆိုတော့ ကျတော်တို့ က ဟိုဖက်မှာပေးလိုက်တဲ့ property key အတိုင်းကို ပြန်ရေးပေးပီးတော့ ပြန်ခေါ်သုံးလိုက်သလိုပေါ့ဗျ

ပီးတော့ react မှာ ကျတော်တို့ နောက်တခု သိထားဖို့လိုတာက data passing က parent to child ကိုပဲ့ pass ပေးလို့ရတယ် ဗျ

child to parent ပေးဖို့ကျတော့ မဖြစ်နိုင်ဘူး ဗျ
အဲလိုဆိုပေမယ့် ကျတော်တို့ props မှာ function / method တခုခုကို ပေးတဲ့အခါကျရင် child ကနေပီးတော့ parent ကို parameter အနေနဲ့ ပြန်သွားလို့ရတယ်ဗျ
ပြီးတော့ props က ပြောင်းလဲလည်းမရနိုင်ဘူးဗျာ အဲဒါကတော့ props ရဲ့ အလုပ်လုပ်ပုံတွေပါ

ကျတော်ပြောတာ အဲလောက်ဆိုရင်တော့ နားလည်လောက်မယ်လို့ထင်ပါတယ်

မှားတာရှိလည်းထောက်ပြနိုင်ပါတယ်
အားလုံးကိုကျေးဇူးတင်ပါတယ်

photo credits to original owners