React နှင့် ဓာတ်ပြုခြင်း အပိုင်း(၁)

Web Development နဲ့ ပတ်သက်လာရင် ရှောင်လို့မရနိုင်တဲ့ နာမည်တစ်ခုက React ပဲ။ ပိုပြီးရှုပ်ထွေးလာတဲ့ Web App တွေအတွက် jQuery နဲ့ DOM ကို ထိမ်းတဲ့ခေတ်ကနေ Reactive Paradigm ကို မဖြစ်မနေကို ပြောင်းရမယ့် သဘော ရှိလာတယ်။

ဒါနဲ့အတူ Functional Programming Paradigm က တစ်ပါတည်း သိရမယ့် အနေအထားရောက်လာတယ်။ ကျွန်တော်တို့လိုမျိုး မွေးကတည်းက Imperative Programming Paradigm တစ်ခုပဲ သိတဲ့ ပရိုဂရမ်မာတွေ အတွက်ကတော့ Functional က concept တွေက အဆန်းအပြားပါပဲ။

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

Pure Function နဲ့ Functional Concept တွေထဲက အခြေခံ map, find, filter နဲ့ reduce တို့ အကြောင်း။

Pure Function

Function က တစ်ခုက side effect မရှိရင် pure function လို့ခေါ်တယ်။ ဘာလဲ side effect ။ ဘေးထွက်ဆိုးကျိုး ကို ဘယ်လို ပြောကြမလဲ

ဒီလိုဗျာ

function တစ်ခုကို ဘယ်အချိန် ဘယ်နေရာမှာပဲ ခေါ်ခေါ် တူညီတဲ့ parameter ပေးရင် တူညီတဲ့ result ကိုပဲ ပြန်ပေးရင် pure function လို့ ခေါ်တယ်

function increment(counter, step ){
 return counter + step;
}
increment(1, 1); // 2
increment(1, 1); // 2

ဒီ function ကို ဘယ်နေရာ ဘယ်အချိန်ပဲ ခေါ်ခေါ် 1 နဲ့ 1 ပေးရင် အမြဲတမ်း 2 ပြန်ပေးမယ်။ ဆိုရရင် function ရဲ့ output က predictable ဖြစ်တယ်။ test လုပ်ဖို့ လွယ်မယ်။

side effect ပါတဲ့ function ဆိုရင်တော့ ဒီလို ဖြစ်မယ်။

var counter = 0;
function increment(step ){
 counter +=  step;
 return counter;
}
increment(1); // 1
increment(1); // 2

ဒါဆိုရင်တော့ ဒီ function က 1 ထည့်ပေးတာချင်းအတူတူ အပြင်က counter ဆိုတဲ့ variable အပေါ်မူတည်ပြီး ပြန်ပေးတဲ့ output ပြောင်းနေတယ်။ output ကို အလွယ်တကူ ခန့်မှန်းလို့ မရတော့ဘူး။ test လုပ်ဖို့ ခက်လာတယ်။ ဒါမျိုး function ကို side effect ပါတဲ့ function လို့ ခေါ်တယ်။

React မှာတော့ နေရာတော်တော်များများမှာ pure function တွေပဲ သုံးကြတယ်။

နောက်တစ်ခုက map / find / filter / reduce တစ်ခုချင်းစီ အတွက်ကတော့ သက်ဆိုင်ရာ documentation တွေ ဖတ်ကြည့်လို့ရပါတယ်။ သူတို့ရဲ့ အဓိက concept က ပေးထားတဲ့ array / list ကို iterate လုပ်ပြီး နောက်ထပ် array / list / value အသစ်တစ်ခု return ပြန်ပေးတာပဲ။ ဒီနေရာမှာ သတိပြုစရာက နဂိုပေးလိုက်တဲ့ array ကို ပြင်တာ မဟုတ်ဘူးဆိုတာပဲ။ Functional မှာ variable တွေကို Immutable Data အနေနဲ့ သိမ်းတယ်။ ဆိုလိုတာက variable တစ်ခု create လုပ်ပြီးသွားရင် modify လုပ်လို့ မရတော့ဘူး။ ကျွန်တော်တို့ Imperative ဘက်မှာ ဆိုရင် constant variable နဲ့ ဆင်မယ်။

နည်းနည်း ထပ်သိထားဖို့ လိုတာက Arrow Function နဲ့ Destructuring စတဲ့ ES6 မှာ ပါလာတဲ့ ရေးထုံးအသစ်တွေကို လေ့လာပြီးရင် React အကြောင်း စပြောဖို့ အဆင်ပြပြီ ထင်ပါတယ်။ အချူပ်ဆိုရရင် React တော့မယ်ဟေ့လို့ ဆုံးဖြတ်လိုက်ရင်

Functional Programming Paradigm က Concept အချို့ကို သိထားဖို့ လိုမယ်။

• Pure Function ဆိုတာဘာလဲ?
• map, filter, find, reduce စတဲ့ Functional Concept တွေ။

ES 6 က ရေးထုံးအသစ်တွေ သိထားရမယ်။

• arrow function
• object structuring and destructuring
• spread and rest operator

ဒါဆိုရင် React စလို့ရမယ် ထင်ပါတယ်။

နောက်တစ်ပိုင်းမှာတော့ React နဲ့ Hello World ရေးကြတာပေါ့။

React ဆိုတာ ရှောင်လို့မရတဲ့ နည်းပညာတစ်ခု။

Functional Programming Paradigm က Concept အချို့ကို သိထားဖို့ လိုမယ်။

• Pure Function ဆိုတာဘာလဲ?
• map, filter, find, reduce စတဲ့ Functional Concept တွေ။

ES 6 က ရေးထုံးအသစ်တွေ သိထားရမယ်။

• arrow function
• object structuring and destructuring
• spread and rest operator

ဒါဆိုရင် React စလို့ရမယ် ထင်ပါတယ်။

• Statement တစ်ခုဆိုတာ အကြောင်းအကျိုး ပြည့်စုံရတယ်။
• သတင်း ၊ ရည်ရွယ်ချက် ၊​ လုပ်နည်း ၊ လိုအပ်တဲ့ Resource ဒါတွေ အစုံအလင် ပြရ​တယ်။

အခု React အကြောင်းပြောမယ်ဆိုလည်း အတူတူပဲ။

ဒါက ဘာကို ရည်ညွှန်းမှာလဲ?

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

အခုက သဘောတရားပဲ ပြောမှာ ကုတ်တွေလည်း သိပ်ပါမှာ မဟုတ်ဘူး။

React and Redux

နှစ်ပါးသွား React

React အိမ်မက်ဆိုး Gentle introduction to React

React Made Easy : A Gentle Introduction to React Components.

Web Development နဲ့ ပတ်သက်လာရင် ရှောင်လို့မရနိုင်တဲ့ နာမည်တစ်ခုက React ပဲ။

ပိုပြီးရှုပ်ထွေးလာတဲ့ Web App တွေအတွက် jQuery နဲ့ DOM ကို ထိမ်းတဲ့ခေတ်ကနေ Reactive Paradigm ကို မဖြစ်မနေကို ပြောင်းရမယ့် သဘော ရှိလာတယ်။

ဒါနဲ့အတူ Functional Programming Paradigm က တစ်ပါတည်း သိရမယ့် အနေအထားရောက်လာတယ်။ ကျွန်တော်တို့လိုမျိုး မွေးကတည်းက Imperative Programming Paradigm တစ်ခုပဲ သိတဲ့ ပရိုဂရမ်မာတွေ အတွက်ကတော့ Functional က concept တွေက အဆန်းအပြားပါပဲ။

ဒီအထဲကနေ React ကို ကူးမယ်ဆိုရင် သိထားရမယ့် အချက်နှစ်ချက် ရှိတယ်။

Pure Function နဲ့ Functional Concept တွေထဲက အခြေခံ map, find, filter နဲ့ reduce တို့ အကြောင်း။

Pure Function

Function က တစ်ခုက side effect မရှိရင် pure function လို့ခေါ်တယ်။ ဘာလဲ side effect ။ ဘေးထွက်ဆိုးကျိုး ကို ဘယ်လို ပြောကြမလဲ

ဒီလိုဗျာ

function တစ်ခုကို ဘယ်အချိန် ဘယ်နေရာမှာပဲ ခေါ်ခေါ် တူညီတဲ့ parameter ပေးရင် တူညီတဲ့ result ကိုပဲ ပြန်ပေးရင် pure function လို့ ခေါ်တယ်

’'’js var counter = 0; function increment(counter, step ){ return counter + step; } increment(1, 1); // 2 ‘’’

ဒီ function ကို ဘယ်နေရာ ဘယ်အချိန်ပဲ ခေါ်ခေါ် 1 နဲ့ 1 ပေူရင် အမြဲတမ်း 2 ပြန်ပေးမယ်။ ဆိုရရင် function ရဲ့ output က predictable ဖြစ်တယ်။ test လုပ်ဖို့ လွယ်မယ်။

side effect ပါတဲ့ function ဆိုရင်တော့ ဒီလို ဖြစ်မယ်။

’'’js var counter = 0; function increment(step ){ counter += step; return counter; } increment(1); // 1 increment(1); // 2 ‘’’ ဒါဆိုရင်တော့ ဒီ function က 1 ထည့်ပေးတာချင်းအတူတူ အပြင်က counter ဆိုတဲ့ variable အပေါ်မူတည်ပြီး ပြန်ပေးတဲ့ output က ခန့်မှန်းလို့ မရတော့ဘူး။ test လုပ်ဖို့ ခက်လာတယ်။ ဒါမျိုး function ကို side effect ပါတဲ့ function လို့ ခေါ်တယ်။

React မှာတော့ နေရာတော်တော်များများမှာ pure function တွေပဲ သုံးကြတယ်။

နောက်တစ်ခုက map / find / filter / reduce တစ်ခုချင်းစီ အတွက်ကတော့ သက်ဆိုင်ရာ documentation တွေ ဖတ်ကြည့်လို့ရပါတယ်။ သူတို့ရဲ့ အဓိက concept က ပေးထားတဲ့ array / list ကို iterate လုပ်ပြီး နောက်ထပ် array / list / value အသစ်တစ်ခု return ပြန်ပေးတာပဲ။ ဒီနေရာမှာ သတိပြုစရာက နဂိုပေးလိုက်တဲ့ array ကို ပြင်တာ မဟုတ်ဘူးဆိုတာပဲ။ Functional မှာ variable တွေကို Immutable Data အနေနဲ့ သိမ်းတယ်။ ဆိုလိုတာက variable တစ်ခု create လုပ်ပြီးသွားရင် modify လုပ်လို့ မရတော့ဘူး။ ကျွန်တော်တို့ Imperative ဘက်မှာ ဆိုရင် constant variable နဲ့ ဆင်မယ်။

နည်းနည်း ထပ်သိထားဖို့ လိုတာက Arrow Function နဲ့ Destructuring စတဲ့ ES6 မှာ ပါလာတဲ့ ရေးထုံးအသစ်တွေကို လေ့လာပြီးရင် React အကြောင်း စပြောဖို့ အဆင်ပြပြီ ထင်ပါတယ်။

ကိုယ်စီးနေတဲ့မြင်းက Imperative လား Functional လား Multi Paradigm လား မသိဘူးဆိုရင်တော့ Google အရင်ခေါက်ကြည့်တာ ကောင်းပါမယ်။