Zero To Master

ကျတော်တို့ တခါတခါ မြင်နေကြမှာပါ
one error resume next ဆိုပြီးတော့ မြန်မာကား တကားမှာ
ပြောလိုက်တာကို
တကယ်လည်းအဲဒါကရှိပါတယ်

သူက မှားပြောလိုက်တာပါ
သူ့ကိုသုံးတဲ့ language က visual basic ပါ
ဘယ်လိုသုံးတာလည်းဆိုတော့သူ့ကိုသုံးတဲ့ နေရာမှာ error ဖြစ်နေပေမယ့်လည်း code ကို ဆက်ပြီးတော့ execute လုပ်သွားအောင်လို့ ပါ

တကယ်လို့လေ့လာချင်တယ်ဆိုရင်တော့

https://learn.microsoft.com/en-us/office/vba/language/reference/user-interface-help/on-error-statement

အဲမှာသွားလေ့လာကြည့်လို့ရပါတယ်

photo credits to original owners

React virtual dom နဲ့ JS dom အကြောင်းလေးတီးမိခေါက်မိသလောက်

ကျတော်တို့ react ကို စတင်ပီးတော့ လေ့လာကြတယ်ဗျာ
အကြောင်းအရင်းအမျိုးမျိုးကြောင့်သူ့ကိုလေ့လာကြတယ်ပေါ့
တချို့ကတော့ သူကအလုပ်လုပ်တာမြန်လို့ တချို့ကတော့လေ့လာရတာလွယ်လို့ပေါ့ဗျာ

အဲမှာ တချို့တွေက react မှာရှိတဲ့ virtual dom အလုပ်လုပ်ပုံကိုကြိုက်လို့တဲ့ဗျာ

အဲမှာကျတော်ပြောချင်တာက virtual dom ဆိုတာက ဘာလည်း?
ဘာလို့ react က အလုပ်လုပ်တာ မြန်နေရတာလည်းဆိုတာပဲ့

virtual dom ကိုမရှင်းသေးခင်မှာ ကျတော်တို့ javascript ရဲ့ dom လေးကို တချက်လောက် အကြမ်းအဖျင်းလေးသွားကြည့်ကြည့်လိုက်ကြရအောင်ဗျာ

js dom တခုက ဘယ်လိုမျိုးအလုပ်လုပ်လည်းဆိုတော့ ကျတော်တို့က js ကနေပီးတော့ element လေးတွေကိုဖန်တီးထုတ်ပေးတယ်ဗျာ
သူ့အလုပ်လုပ်ပုံလေးက ဘယ်လိုမျိုးလည်းဆိုတော့ ကျတော်တို့ ငယ်တုန်းက
ကလေးလေးတွေကစားတဲ့ အပြားလေးတွေကို အစီစဉ်လိုက်ထည့်သလိုမျိုးအလုပ်လုပ်ပေးတယ်ဗျာ

ပြောရရင် js dom တခုမှာ အလုပ်လုပ်တဲ့ပုံစံက ဥပမာ
ကျတော်တို့ list တခုရှိတယ်ပဲ့ဆိုပါစို့
1 apple
2 orange
3 mango
ဆိုပီးတော့ရှိတယ်ပဲ့ဆိုပါစို့
ကျတော်တို့က peach ဆိုပီးတော့ နောက်ထပ် element တခုကို အဲ list မှာသွားဖန်တီးတဲ့အခါကျရင် ဘယ်လိုမျိုးဖြစ်လည်းဆိုတော့ သူက list ရဲ့ အပေါ်ဆုံးကနေပီးတော့သွားထည့်ပေးတာဗျာ
အဲဒါဆိုရင် list က ဘယ်လိုမျိုးဖြစ်သွားလည်းဆိုတော့
1 peach
2 apple
3 orange
4 mango
အဲလိုမျိုူးဖြစ်သွားတယ်ဗျာ
ကျတော်တို့ code inspect ထောက်ပီးတော့ ကြည့်လိုက်ရင် အဲ list ကြီးတခုလုံးက re render ဖြစ်သွားတာကိုတွေ့ရလိမ့်မယ်ဗျာ အဲမှာ ကျတော်ပြောချင်တာက list က ၁၀ ၂၀ လောက်ဆို ဘာမှမဖြစ်ပေမယ့် ရာနဲ့ ထောင်နဲ့ချီလာဘီဆိုရင် ကျတော်တို့ အသစ်တခုတိုးလိုက်တိုင်းမှာ delay ကဖြစ်ဖြစ်လာတော့မှာ ပဲ့လေ အဲဒါက js dom တခုက အလုပ်လုပ်ပေးတာဗျာ

ကျတော်ပြောချင်တဲ့ react virtual dom ဆိုတာက ဘယ်လိုအလုပ်လုပ်ပေးလည်းဆိုတော့
react ကနေပီးတော့ လုပ်ပေးလိုက်တဲ့ special key properties ဆိုတာလေးရှိတယ်ဗျ သူက အဲဒါကို ကြည့်ပီးတော့ ပြောင်းလဲမှုဖြစ်သွားတဲ့နေရာလေးကိုပဲ့ ပြောင်းလဲပေးသွားတာဗျာ

ခုနက ကျတော်ပြောတဲ့ list တခုနဲ့ပြန်ပြရင်သူက value ကို ဘယ်လိုမျိုး add သွားတာလည်းဆိုတော့
1 apple
2 orange
3 mango
4 peach
အဲလိုမျိုး add သွားတယ်ဗျာ
inspect ထောက်ပီးတော့ကြည့်လိုက်ရင် အောက်ဆုံးနားလေးကိုပဲ့သူကပြောင်းလဲမှုလုပ်သွားတာကိုတွေ့ရလိမ့်မယ်ဗျာ
အဲလိုမျိုးတွေကြောင့် မလို့ react က runtime မြန်တယ် အလုပ်လုပ်တာမြန်တယ်လို့ပြောကြ ပြီးတော့ လူကြိုက်များကြတာဗျာ

အဲလောက်ဆိုရင်တော့ ကျတော်တို့ဘာလို့ react ကိုသုံးသင့်လည်းဆိုတာကို နားလည်သွားလောက်မယ်လို့ထင်ပါတယ် ကျေးဇူးတင်ပါတယ်

ကျတော်မှားနေရင်လည်းထောက်ပြ ဝေဖန်ပြနိုင်ပါတယ်

photo credits to original owners

ကျတော် မနေ့ က တင်လိုက်တဲ့ meme လေးတခုအကြောင်းကိုပြန်ရှင်းပြမယ် ဗျာ
အဲဒါကို ကျတော်က တွေ့တော့ ပြန်လိုက်ရှာကြည့်ဖြစ်တယ် ဘာကြောင့်လည်းဆိုပီးတော့ အဲမှာကျတော် ကဘာကိုသွားတွေ့လည်းဆိုတော့
javascript က dynamic ဖြစ်တာရယ် ပီးတော့
operator တွေဖြစ်နဲ့ + နဲ့ - တွေရဲ့ အလုပ်လုပ်ပုံတွေကိုပါ သွားတွေ့တယ်ဗျာ
အရင်ဆုံး ကျတော်တို့ js ရဲ့ dynamic အကြောင်းလေးတွေကို ရှင်းကြရအောင်ဗျာ
ပထမဆုံး ဘာလို့ dynamic လို့ပြောတာလည်းဆိုတော့ js compiler က data type တွေကို လိုသလိုပြောင်းလဲပေးနိုင်လို့ပဲ့ဗျာ

တခြား lang တွေမှာဆို ကျတော်တို့ variable တခုကို declare လုပ်ရင်အရှေ့မှာက သူနဲ့ သက်ဆိုင်တဲ့ data type လေးတွေကို ထည့်ပေးရတယ်ဗျာ

ဥပမာ int i = 0 ; အဲလိုမျိုးပေါ့

js မှာ ကကျတော့အဲလိုတွေမလိုဘူးဗျာ

var i = 0;
ဆိုပီးတော့ ရေးလိုက်ရင် အဲဒါက သူက number လို့တခါတည်းသတ်မှတ်ပေးသွားတယ်ဗျာ
string ဆိုရင်လည်း
var i = "string data "; အဲလိုမျိုးရေးလိုက်ရုံနဲ့ သူက string လို့ တခါတည်း မှတ်ပီးတော့ သိမ်းပေးလိုက်တာပါ

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

operator အကြောင်းကိုဆက်ပြောကြရအောင်
အရင် ဆုံး + အကြောင်းလေးကိုပြောမယ်ဗျာ
သူက string တွေကို လည်း ပေါင်းစပ်ပေးလို့ရတဲ့အတွက် ကျတော်တို့ရေးလိုက်တဲ့
"11" + 1 မှာ အနောက်က ကိန်းဂဏန်းကို ပါ တခါတည်း string ဖြစ်အောင်ပြောင်းပေးပီးတော့ ပေါင်းသွားတာမလို့ ထွက်တဲ့အခါမှာ "111" ဆိုပီးထွက်လာတာ ပါ

အဲအချိန်မှာ - ကရော
သူက ကျတော့ ကိန်းဂဏန်းတွေနုတ်တာပဲ့ရှိတာဖြစ်တဲ့အတွက် အရှေ့က string ဖြစ်တဲ့ "11" ကို 11 ဆိုတဲ့ ကိန်းဂဏန်းဖြစ်အောင် ပြောင်းလဲပေးလိုက်တာကြောင့်မလို့ပါ

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

ကျေးဇူးတင်ပါတယ်



photo credits to original owners

ကျွန်တော်တို့ React မှာ မြင်လေ့မြင်ထရှိတဲ့ untrolled component အကြောင်းလေးကို လေ့လာလိုက်ကြရအောင်ဗျ
ဦးဆုံးကျတော်တို့
ကုဒ်လေးကိုအရင်ရေးလိုက်ကြရအောင်ဗျာ


အဲလိုလေးရေးလိုက်တာကို ကျတော်တို့ uncontrolled component ဆိုပီးတော့ သတ်မှတ်ပေးတယ်ဗျာ ဘာလို့လည်းဆိုတော့ သူကို ကျတော်တို့က state management အတွက်သုံးမှာမဟုတ်ဘူးဆိုပီးတော့ react က နေပီးတော့ သတ်မှတ်ထားလို့ပါဗျာ

ပီးရင် ကျတော်တို့ onChange လေး ရေးလိုက်ပါမယ်

setState(e.target.value)} />

အဲလိုလေးပေါ့ဗျ ကျတော်တို့ value ကို ရိုက်လိုက်တဲ့အခါမှာ ရိုက်လို့မရဘူးဗျာ ဘာလို့လည်းဆိုတော့
အဲမှာ ကျတော်တို့က onChange ဖြစ်သွားတာနဲ့ console မှာ ဘယ်လိုပေါ်လာလည်းဆို‌ေတာ့ uncontrolled component to controlled component ဆိုပီးတော့ပြလာလိမ့်မယ်ဗျ ဘာလို့လည်းဆိုတော့
ကျတော်တို့က input မှာရှိတဲ့ value ကို state ထဲကို မထည့်ပေးထားလို့ဗျ ဘာလို့ အဲဒါကို ထည့်ပေးရတာလည်းဆိုတော့ သူက အဲကနေပီးတော့ ရလာတဲ့ value ကို ဖမ်းထားတာမလို့ပါ ပီးတော့ အဲဒါကို react ကနေပီးတော့ controlled ဖြစ်သွားတဲ့အခါမှာ error ပေါ်လာတာဖြစ်သွာတာ ပါ
ကျတော်တို့ အဲဒါကို ပျောက်စေချင်တယ်ဆိုရင်

setState(e.target.value)} />

အဲလိုလေး ရေးပေးရမှာပါ အဲခါကျရင် react ရဲ့ state က အလုပ်လုပ်ပီးတော့
ကျတော်တို့ input value ကို state ထဲမှာ သိမ်းထားလိုက်ပီးတော့ အလုပ်လုပ်ပါတော့တယ်ဗျ

အဲလောက်ဆိုရင်ကျတော်တို့ controlled component နဲ့ uncontrolled component ဆိုတာကို တော်တော်များများသိလောက်ဘီလို့လည်းထင်ပါတယ်ဗျ

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

Photo credits to original owners

🙂

credits to original photo