htoo.dev

Have you ever come across the number 15, also known as

ဒီဆောင်းပါးမှာတော့ ကျနော်တို့ React app တစ်ခုမှာ State management ကို ဖြေရှင်းပေးတဲ့ Solution တချို့ကို ချဥ်းကပ်ကြည့်ကြပါမယ်။

ဒီတစ်ခေါက်မှာတော့ ကျနော်တို့ Game Logic နဲ့ ပတ်သတ်တာတွေချည်းပဲ လုပ်သွားပါမယ်။

ဒီ Tutorial မှာတော့ ကျနော်တို့ Terminal မှာ ကစားလို့ရတယ့် Game တစ်ခုတည်ဆောက်သွားပါမယ်။ အရင် Post မှာ Prologue ပြခဲ့တာကို တချက်ကြည့်ကြည့်ရင် ဘယ်လိုအလုပ်လုပ်လဲဆိုတာကို သိလောက်မှာပါ။ အဓိကကတော့

ဒီတစ်ခေါက်မှာတော့ ကျနော်တို့ Web ပေါ်မှာ Real-time communication တွေလုပ်နိုင်ဖို့အတွက် အခြေခံအုတ်မြစ်ဖြစ်တဲ့ Web Socket အကြောင်းကို ပြောပြသွားမှာဖြစ်ပါတယ်။

Resume ကောင်းကောင်းရေးနိုင်ဖို့ကို ကျနော့် အတွေ့အကြုံကို အခြေခံပြီး ပြောပြသွားပါမယ်။ ကျနော့်လက်ရှိ Resume Style ကို ပြသွားမှာဖြစ်ပြီး ဘယ်လို Organize လုပ်ထားလဲ ဆိုတာကိုပဲ ပြောပြသွားမှာပါ။

JavaScript ကို လေ့လာနေသူတိုင်း Basic ကနေ နောက်တစ်ဆင့်ကို တက်တော့မယ်ဆိုရင် Event Loop အကြောင်းက ထိပ်ဆုံးကနေ ပါလာမှာပဲဖြစ်ပါတယ်။ ဒီဆောင်းပါးမှာတော့ JavaScript ရဲ့ Asynchronous Code တွေကို ဘယ်လို Execute လုပ်လဲ ၊ Event Loop ဆိုတာဘာလဲ စတာတွေကို ပြောပြသွားမှာဖြစ်ပါတယ်။

ဒီတစ်ခေါက်မှာတော့ ကျနော်တို့ API တစ်ခု တည်ဆောက်တဲ့အခါမှာ Design ‌‌‌ကောင်းတစ်ခု ဖြစ်ဖို့အတွက် လိုက်နာရမယ့် အချက်တွေကို ပြောပြသွားမှာ ဖြစ်ပါတယ်။

နောက်ထပ် Page မှာ အမေးများတဲ့ မေးခွန်းတစ်ခုဖြစ်တဲ့ "use-strict" ဆိုတာဘာလဲဆိုတာကို ပြောပြသွားမှာဖြစ်ပါတယ်။

ဒီတစ်ခေါက်မှာတော့ React ကိုလေ့လာတဲ့အခါမှာ ကြုံလာရမယ့် Term တချို့နဲ့ သူတို့ဘာကိုဆိုလိုသလဲဆိုတာရယ် ၊ နောက်ပြီး သိထားသင့်တဲ့

ဒီတစ်ခေါက်မှာတော့ တကယ့် React Project တစ်ခုကို ဘယ်လို initiate လုပ်မလဲဆိုတာကိုပြောပြသွားမှာ ဖြစ်ပါတယ်။ Setup လုပ်ဖို့ကတော့ အဓိကအားဖြင့်တော့ နှစ်မျိုးရှိပါတယ်။ create-react-app လို့ခေါ်တဲ့ tool ကိုပဲသုံးပြီး project ဆောက်မလား ၊ ကိုယ်ကိုယ်တိုင်ပဲ လိုအပ်သလို configuration တွေနဲ့ project setup လုပ်မလားပေါ့။ ပုံမှန်အားဖြင့်တော့ create-react-app နဲ့ လုပ်တာပိုကောင်းပါတယ်။ ဒါပေမယ့် နည်းနည်း experience ရှိလာရင်တော့ ကိုယ်တိုင် တည်ဆောက်ကြည့်သင့်ပါတယ်။ ဒီလိုလုပ်နိုင်ဖို့အတွက် ကျနော် setup လုပ်တဲ့ ပုံစံတစ်မျိုးကိုလည်း step-by-step လုပ်ပြသွားမှာဖြစ်ပါတယ်။

JavaScript Fundamentals တွေကိုလည်း သိပြီဆိုရင်တော့ ကျနော်တို့ React ကိုစပြီး လေ့လာလို့ရပါပြီ။ React ရဲ့ JSX ဘက်ကိုမလှည့်ခင်မှာ အရင်ဆုံးအနေနဲ့ ကျနော်တို့ Pure React ကိုပဲလေ့လာကြရအောင်။ ဘာလို့လဲဆိုတော့ ကျနော် React ကိုစလေ့လာတုန်းက JSX ကြီးကိုမြင်ရတာ တမျိုးကြီးဖြစ်နေခဲ့ပါတယ်။ ဘာလို့ HTML ကို JavaScript ထဲထည့်ရေးရမှာလဲ ၊ ဘာလို့ နောက်ထပ် Transpile လုပ်ပေးဖို့လိုတဲ့ extra language ကြီးလိုတာလဲပေါ့။ အမှန်တကယ်တော့ React App တစ်ခုဖြစ်ဖို့အတွက် JSX မလိုပါဘူး။ ဒါ့ကြောင့် ဒီတစ်ခေါက်ရဲ့ အဓိက point ကတော့ JSX ကဘာလို့ React ရဲ့ eco system အတွက် make sense ဖြစ်တာလဲ ၊ ပြီးတော့နောက်တစ်ခုက ဒီ JSX နဲ့ React က Magic တွေသုံးနေတာမဟုတ်ဘူး ၊ ပုံမှန် JavaScript ရဲ့ function call တဲ့ပုံစံတွေပဲဆိုတာကို အဓိကသိစေချင်တာဖြစ်ပါတယ်။

React ကို စမလေ့လာခင်မှာ JavaScript နဲ့ပတ်သတ်ပြီး solid foundation ရှိဖို့တော့လိုပါတယ်။ ဒါဆို ဘာတွေကို အဓိက သိထားရမလဲပေါ့ ? အဲဒီအတွက် ကျနော် checklist လေးတစ်ခုလုပ်ထားပါတယ်။ အမှန်တကယ်တော့ ဘယ် JavaScript library / framework ကို လေ့လာလေ့လာ ဒီ checklist မှာပါတဲ့ topic တွေကတော့ သိထားသင့်တာတွေချည်းပဲဖြစ်ပါတယ်။

React ဟာ လက်ရှိမှာ popular အဖြစ်ဆုံး ၊ အသုံးအများဆုံး JavaScript Frontend Library တစ်ခုဖြစ်ပါတယ်။ ဒီအကြောင်းပြချက်တစ်ခုနဲ့တင် React ကိုလေ့လာသင့်ပြီလို့ဆိုရမယ်ဆိုရင် မမှားပါဘူး။ ဒါပေမယ့်လည်း ရေရှည်မှာ ဒီအကြောင်းပြချက်တစ်ခုတည်းနဲ့တင် မလုံလောက်တော့ပါဘူး။ "ဘာ့ကြောင့်လဲ" ဆိုတဲ့မေးခွန်းဟာ လေ့လာသူတွေ တစ်စုံတစ်ခုကို လေ့လာတိုင်းမှာ အမြဲတစေမေးသင့်တဲ့ မေးခွန်းတစ်ခုပဲဖြစ်ပါတယ်။ JavaScript Library တွေဟာ အချိန်နဲ့အမျှ အသစ်သစ်တွေထွက်နေတာမို့ ကိုယ်လေ့လာနေတဲ့ Library ရဲ့ pros and cons တွေ ၊ unique value တွေ ၊ differences တွေ ၊ ဒီ library ရဲ့ နောက်က fundamental concept တွေ စတာတွေကို သိထားဖို့လိုအပ်ပါတယ်။

ဒီတစ်ခေါက်ရဲ့ data structure ကတော့ Queue လို့ခေါ်တဲ့ linear data structure တစ်ခုဖြစ်ပါတယ်။ Stack နဲ့ ခပ်ဆင်ဆင်ဖြစ်ပြီးတော့ မတူတာကတော့ သူက First-in-First-out (FIFO) ဖြစ်ပြီးတော့ Stack ကတော့ FILO ဖြစ်တာပါ။ ဥပမာပေးရမယ်ဆိုရင်တော့ Queue data structure ဟာ လူတွေ restaurant တွေရဲ့ service counter မှာတန်းစီရတာနဲ့တူပါတယ်။ အရင်ရောက်တဲ့သူကို အရင်ဆုံး serve ရတာမျိုးပါ။ Queue မှာ

JavaScript မှာ Code တွေကို internally ဘယ်လိုအလုပ်လုပ်ပြီး execute လုပ်လဲဆိုတဲ့အကြောင်းဖြစ်ပါတယ်။