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

Single Page Applications

React Application တွေဟာ Single Page Application (SPA) တွေဖြစ်ပါတယ်။ SPA ဆိုတာကတော့ Browser ပေါ်မှာတင်ပဲ အကုန်အလုပ်လုပ်ပြီး ၊ User Interaction တွေအတွက် Page Reload လုပ်စရာမလို ၊ Server ဘက်ကနေ Page ကိုပြန်စောင့်စရာမလိုတဲ့ App တစ်မျိုးဖြစ်ပါတယ်။ Web page တစ်ခုတည်းပါဝင်ပြီးတော့ User Interaction တွေ ၊ Content တွေအကုန်လုံးကို JavaScript ကပဲ load လုပ်ပေး ၊ handle လုပ်ပေးတဲ့ app တစ်မျိုးဖြစ်ပါတယ်။ SPA တွေဟာ client-server communication စောင့်နေစရာ မလိုတဲ့အတွက်ကြောင့် User တွေအတွက်ပိုပြီး smooth ဖြစ်တဲ့ experience ကိုရစေပါတယ်။ SPA တွေကို PWA (Progressive Web App) တွေအနေနဲ့လည်းပြောင်းလဲပြီးတော့ local caching လုပ်နိုင်လာမှာဖြစ်တဲ့အတွက် offline experience မျိုးပါ support လုပ်လာနိုင်မှာဖြစ်ပါတယ်။ SPA တွေရဲ့ မကောင်းတဲ့တစ်ချက်ကတော့ Search Engine Optimization (SEO) ပဲဖြစ်ပါတယ်။ Search Engine တွေဟာ ပုံမှန် Server render လုပ်တဲ့ site တွေထက် SPA တွေကို indexing လုပ်ရတာပိုပြီးခက်ခဲပါတယ်။

React ကို build လိုက်တဲ့အခါမှာလည်း index.html file တစ်ခုနဲ့ JavaScript File တွေပဲ ထွက်လာတာကိုတွေ့ရမှာပါ။

Navigation

SPA ဖြစ်လာတဲ့အခါမှာ ပြဿနာတစ်ခုကတော့ ”Broken Back Button လို့ခေါ်တဲ့ Browser ရဲ့ back button ဟာ Application ရဲ့ ယခင် page ကိုပြန်မသွားပဲ တခြားအရင်သွားခဲ့ဖူးတဲ့ site ကိုသွားနေတာမျိုးပါ။ ဘာလို့လဲဆိုတော့ App အတွင်းက page တွေဟာ JavaScript ကပဲ သွားနေတာဖြစ်တဲ့အတွက် Browser ရဲ့ default navigation ကိုမသုံးတော့ပါဘူး။ ဒါ့ကြောင့် back button နှိပ်တဲ့အခါမှာ တခြား site ကိုရောက်သွားတာဖြစ်ပါတယ်။ ဒီ issue ဟာ အခုတော့ Browser တွေမှာပါပြီးသားဖြစ်တဲ့ History API ကိုသုံးပြီးဖြေရှင်းလို့ရသလို React မှာတော့ React Router လို့ခေါ်တဲ့ Navigation Routing အတွက် library တစ်ခုကိုသုံးပြီး ဖြေရှင်းပါတယ်။ React Router ကလည်း အမှန်တော့ History API အပေါ်မှာ အခြေခံထားတာပဲဖြစ်ပါတယ်။

Declarative

React ကိုရေးရတာ declarative ဖြစ်တယ်လို့လည်း ပြောကြတာတွေ့ရမှာဖြစ်ပါတယ်။ Declarative ကို Descriptive လို့လည်း တမျိုးခေါ်ကြပါတယ်။ Programming မှာ Declarative ဆိုတာ ပြောရရင်တော့ “လိုချင်တာကို အစဉ်လိုက်အတိုင်းပြောခြင်း” လို့ပဲ ဘာသာပြန်ရမယ်ထင်ပါတယ်။ SQL နဲ့ HTML တွေဟာ declarative language တွေဖြစ်ကြပါတယ်။ ဥပမာ SQL မှာဆိုရင်

SELECT * FROM users
WHERE age > 18

ဖတ်ကြည့်မယ်ဆိုရင် users ဆိုတဲ့ table ထဲက 18 နှစ်အထက်ရှိတဲ့သူတွေအကုန်လုံးကို ထုတ်ယူမယ်ဆိုပြီး နားလည်နိုင်ပါတယ်။ ဒါလိုမျိုးနားလည်နိုင်တာကို descriptive ဖြစ်တယ် ၊ declarative ဖြစ်တယ်လို့ခေါ်ပါတယ်။ React ဟာလည်း declarative ဖြစ်ပါတယ်။ jQuery မှာတုန်းကလို interaction တိုင်းအတွက် element တွေကို DOM ကနေ manipulate လုပ်စရာမလိုသလို Event တွေကို handle လုပ်တဲ့အခါမှာလည်း DOM event တွေနဲ့ interact လုပ်စရာမလိုပါဘူး။ React မှာကတော့ Component တစ်ခု ဘယ်လို render လုပ်မလဲဆိုတာကိုပဲ သတ်မှတ်ပေးဖို့လိုပါတယ်။

Immutability

Programming မှာ immutable ဆိုတာကတော့ ပြန်ပြင်လို့မရတာမျိုးကိုပြောတာဖြစ်ပါတယ်။ ဥပမာ - string လိုမျိုး primitive data type တွေဟာ immutable data type တွေဖြစ်ပါတယ်။

let str = 'abc';

str = 'efg';

အပေါ်က code ကိုကြည့်ပြီး ပြင်လို့ရတယ်လို့ပြောရင် မှားပါတယ်။ ဘာလို့လဲဆိုတော့ လက်ရှိ string ဖြစ်တဲ့ ”abc” ဟာ ပျက်ပြယ်သွားမှာဖြစ်ပြီး ”efg” ဆိုတဲ့ string အသစ်ကို variable ဖြစ်တဲ့ str ထဲဆီကို assign လုပ်သွားတာဖြစ်ပါတယ်။

React မှာ variable immutability ကို သေချာလိုက်နာရပါတယ်။ Primitive type တွေတင်မဟုတ်ပဲ Object နဲ့ Array တွေပါ ပါဝင်ပါတယ်။ ဥပမာပြောရရင် component state ကို update လုပ်ဖို့လိုတဲ့အခါမှာ state ကို တန်းပြီး mutate မလုပ်ရပါဘူး။ setState() လိုမျိုး method ကိုသုံးပြီးမှ update လုပ်ရပါတယ်။ Redux မှာဆိုရင်လည်း reducer တွေကိုသုံးပြီး state ကို update လုပ်ရပါတယ်။ ဒီလိုလုပ်ရတဲ့အကြောင်းကတော့ state mutation တွေကို centralized ထားလို့ရတဲ့အတွက်ကြောင့် state mutation တွေကို ရှင်းရှင်းလင်းလင်းသိစေနိုင်ပါတယ်။ ဒါကို preditctable state လို့ခေါ်ပါတယ်။ Predictable ကောင်းလေ state management လုပ်ရတာပိုရှင်းလေဖြစ်ပါတယ်။

Purity

State ကို mutate လုပ်ဖို့အတွက် setState နဲ့ reducer တို့ကို သုံးတယ်လို့ပြောခဲ့ပါတယ်။ တကယ်တော့ အဲဒါတွေဟာ Function တွေပဲဖြစ်ပါတယ်။ သာမန် function မဟုတ်ပဲ pure function လို့ခေါ်ပါတယ်။ Programming မှာ pure function ဆိုတာဟာ input ပေါ်မှာ side effect မရှိပဲ output value ကို ပေးတဲ့ function တွေပဲဖြစ်ပါတယ်။

// pure function example
function pureIncrement(num) {
	const res = num + 1;
	return res;
}

အပေါ်က function မှာဆိုရင် input parameter တွေဖြစ်တဲ့ num ကို ဘာပြုပြင်မှုမှမလုပ်ပဲ သူတို့ကိုသုံးပြီးတော့ output ပြန်တာဖြစ်တဲ့အတွက် pure function ဖြစ်ပါတယ်။

// impure function example
function impureIncrement(num) {
	return ++num;
}

Composition

Composition ဆိုတာကတော့ function တွေကိုပေါင်းပြီး တစ်ခုရဲ့ output ကို နောက်တစ်ခုကဆက်သုံးပြီး အလုပ်လုပ်တဲ့ပုံစံတစ်မျိုးဖြစ်ပါတယ်။

const cities = ['Yangon', 'Mandalay', 'Naypyitaw'];

cities	// 'an' ပါတဲ့ city
	.filter(city => city.includes('an'))
	.map(city => city.slice(0,3));

React မှာတော့ Small Component တွေကို ပေါင်းပြီး ပိုပြီးရှုပ်ထွေးတဲ့ Component တွေတည်ဆောက်တဲ့အခါမှာ ဒီ Concept ကို အသုံးပြုပါတယ်။

Unidirectional Data Flow

ဒါကတော့ React မှာပဲတွေ့ရမယ့် Concept တော့မဟုတ်ပါဘူး။ ဘာကိုဆိုလိုတာလဲဆိုရင် data ကို Application ရဲ့ တခြားနေရာတွေဆီကို ပို့ပေးတဲ့အခါမှာ လမ်းတစ်ခုတည်းကနေပဲပို့ရတာဖြစ်ပါတယ်။ React မှာ ကတော့ Parent ကနေပဲ Child Component တွေဆီကို Data (props) ပေးလို့ရမှာဖြစ်ပြီး အဲဒီ့ data ကို child ကနေ update လုပ်ခွင့်ရှိမှာမဟုတ်ပါဘူး။ ဒါကို one-way data binding လို့လဲခေါ်ပါတယ်။ State management ကို ပိုပြီး predictable ဖြစ်စေတဲ့အတွက် debug လုပ်တဲ့အခါ လွယ်ကူစေပါတယ်။ Parent ကနေ child ကို data pass တာဖြစ်တဲ့အတွက် component state တစ်ခု update ဖြစ်တိုင်းမှာ သူ့အောက်မှာရှိတဲ့ children component တွေပဲ re-render လုပ်မှာဖြစ်ပြီး သူ့ရဲ့ sibling component တွေနဲ့ parent component ကို affect ဖြစ်မှာမဟုတ်ပါဘူး။