Open Wisdom Technology

Open Wisdom Technology Professional Software Development Center

04/02/2024

JavaScript ဟာ pass-by-value လား pass-by-reference လားမေးရင် pass-by-value language အမျိုးအစားဖြစ်ပါတယ်။ သူ့မှာ မှတ်သားစရာလေးတွေ ရှိပါတယ်။ primitive data type ( numbers, strings, booleans, null, undefined) တွေ ကို function ဆီ passing လုပ်တဲ့ အခါ value အနေနဲ့ ပေးလိုက်မှာ ဖြစ်ပါတယ်။

pass-by-value မှာ တကယ့်တန်ဖိုးကို function ဆီ ပေးပို့လိုက်ပေမယ့် function ထဲက ပြောင်းသွားတဲ့ parameter တန်ဖိုးတွေကတော့ function အပြင်ဘက်က မူရင်းတန်ဖိုးတွေအပေါ် effect ဖြစ်သွားမှာ မဟုတ်ပါဘူး။

function modifyValue(value) {
value = 42;
}

let x = 10;
modifyValue(x);
console.log(x); // Output: 10 (unchanged)
ဒီပုံစံမှာ function ထဲက parameter တန်ဖိုးကို 42 လို့ ပြောင်းလိုက်ပေမယ့် အပြင်က မူလ တန်ဖိုး 10 ကို ပြောင်းလဲနိုင်ခြင်း မရှိပါဘူး။

ဒါပေမယ့် objects တွေကို function တွေဆီ ပေးပို့တဲ့ အခါမှာတော့ memory ထဲက object အတွက် reference ကိုပဲ value အနေနဲ့ ပို့ပါတယ်။ ဒါကြောင့် function ထဲက object properties တွေ တန်ဖိုးပြောင်းသွားရင် function အပြင်ဘက်က မူရင်း object properties တန်ဖိုးတွေပါ ပြောင်းသွားပါတယ်။ သို့သော် parameter value ကို object သစ် အဖြစ် ပြန်သတ်မှတ်လိုက်မယ်ဆိုရင်တော့ function အပြင်ဘက်က မူလ object အပေါ် သက်ရောက်မှု ရှိမှာ မဟုတ်ပါဘူး။ တန်ဖိုးတော့ ပြောင်းအောင် သတ်မှတ်လိုက်လို့ရပေမယ့် အသစ်တော့ ပြန်သတ်မှတ်လို့ မရတဲ့ သဘောပါ။

function modifyObject(obj) {
obj.property = "modified";
obj = { newProperty: "new value" };
}

let myObject = { property: "original value" };
modifyObject(myObject);
console.log(myObject.property); // Output: "modified"

အကျဥ်းအားဖြင့် javaScript ဟာ pass-by-value ဖြစ်ပြီး တကယ့်တန်ဖိုးတွေကို function တွေဆီ ပေးပို့ပါတယ်။ object အနေနဲ့ value ပေးပို့မယ်ဆိုရင်တော့ memory ထဲက object reference ကိုပဲ ပေးပို့မှာပါ။ reference ကို ပေးပို့တဲ့ အတွက် function အပြင်က တန်ဖိုး အပေါ်မှာပါ ပြောင်းလဲမှုရှိပါတယ်။ complex data structures တွေကို ကိုင်တွယ်ရတဲ့ အခါ ဒီသဘောကို နားလည်ထားဖို့ အရေးကြီးပါတယ်။

အဆင်ပြေကြပါစေ။

Ko Aung Naing Phyo (SGB)
Feb 4, 2024.

19/01/2024

useFul libraries and tools for React , React Native Development

Software development မှာ တခါတလေ လိုအပ်ချက် အရ library တွေ သုံးကြရလေ့ရှိပါတယ်။ခုတစ်ပတ်မှာတော့ အသုံးတည့်မယ့် library တချို့ စုစည်းပေးဖြစ်ပါတယ်။လိုတာယူပြီး မလိုတာ ပယ်လိုက်လို့ရပါတယ်။ ကိုယ့်ပရောဂျက်အတွက် ဒီလိုလေးတွေ သုံးလို့ရပါလားလို့ သိထားရင် အလုပ်လုပ်တဲ့ အခါ ပို အဆင်ပြေတာပေါ့။

library သုံးတဲ့ အခါ တကယ် လိုအပ်မှသာ သုံးသင့်ပါတယ်။ custom ရေးလို့ရရင် custom ရေးပြီးပဲ သုံးသင့်ပါတယ်။ မဟုတ်ရင် library တချို့က support မလုပ်တော့တဲ့ အခါမှာပဲ ဖြစ်ဖြစ် လိုအပ်ချက်အရ project ကို update လုပ်ကြရတဲ့ အခါမှာပဲ ဖြစ်ဖြစ် library compatibility မဖြစ်လို့ အချိန်ကုန်တာမျိုး ကြုံရတတ်လို့ပါ။ အဆင်ပြေကြပါစေ။ (နောက်ထပ် library တွေကိုတော့ ဒီ post မှာပဲ ထပ်ထည့်ပေးပါ့မယ်။)

(1)AndroidAssetStudio

Android app အတွက် launcher icon, notification icon တွေကို အလွယ်တကူဖန်တီးလို့ရမယ့် နေရာပါ။

Link -> https://romannurik.github.io/AndroidAssetStudio/
Repo link -> https://github.com/romannurik/AndroidAssetStudio

(2)React-native-size-matters
အရွယ်အစား မတူညီတဲ့ device တွေ အတွက် app UI ကို လိုသလို scale ချ လို့ရတဲ့ library ဖြစ်ပါတယ်။ ဖိုင် size 13.9 kB ပဲ ရှိပါတယ်။

npm link -> https://www.npmjs.com/package/react-native-size-matters
Repo link -> https://github.com/nirsky/react-native-size-matters

(3) Zustand
state-management solution အတွက် ပေါ့ပေါ့ပါးပါး သုံးလို့ရတဲ့ library ပါ။ redux နဲ့ useContext အစား လိုအပ်သလို သုံးလို့ရပါတယ်။

npm link -> https://www.npmjs.com/package/zustand
Repo link -> https://github.com/pmndrs/zustand

(4)Rn-qr-generator
QR code generate ထုတ်တာ datect လုပ်တာတွေ အတွက် အသုံးတည့်မယ့် library ဖြစ်ပါတယ်။

npm link -> https://www.npmjs.com/package/rn-qr-generator
Repo link -> https://github.com/gevgasparyan/rn-qr-generator

(5)Rn-fetch-blob
file access နဲ့ data transfer တွေ အတွက် သုံးလို့ရတဲ့ library ပါ။

npm link -> https://www.npmjs.com/package/rn-fetch-blob
Repo link -> https://github.com/joltup/rn-fetch-blob

(6)React-query
asynchronous state management,server-state utilities နဲ့ data fetching လုပ်ရမယ့်နေရာတွေ အတွက် သင့်တော်တဲ့ library ဖြစ်ပါတယ်။

npm link -> https://www.npmjs.com/package/react-query
Repo link ->https://github.com/TanStack/query

(7)React Native Zip Archive
react-native အတွက် Zip archive လုပ်လို့ရမယ့် library ပါ။
npm link -> https://www.npmjs.com/package/react-native-zip-archive
Repo link ->https://github.com/mockingbot/react-native-zip-archive

(8)React-native-wheel-picker-android
Wheel picker , time picker တွေ အတွက် သုံးလို့ရပါတယ်။

npm link -> https://www.npmjs.com/package/react-native-wheel-picker-android
Repo link -> https://github.com/Cero-Studio/ReactNativeWheelPicker

(9)React-native-view-shot
React Native မှာ view component ကို image အဖြစ် ဖမ်းပေးမယ့် library ပါ။

npm link -> https://www.npmjs.com/package/react-native-view-shot?activeTab=explore
Repo link -> https://github.com/gre/react-native-view-shot

(10)React-native-track-player
Music App တွေ ဖန်တီးဖို့အတွက် အတော်အတန် ပြည့်စုံတဲ့ library ဖြစ်ပါတယ်။ playback၊ background mood ,lock screen media control စသဖြင့် feature စုံပါတယ်။

npm link -> https://www.npmjs.com/package/react-native-track-player
Repo link -> https://github.com/doublesymmetry/react-native-track-player

(11)React-native-toast-message

Message တွေကို animation နဲ့ ပြချင်တဲ့ အခါ သုံးလို့ရပါတယ်။ အသင့်ရေးပြီးသား component ကို ယူသုံးရုံပါပဲ။

npm link -> https://www.npmjs.com/package/react-native-toast-message
Repo link -> https://github.com/calintamas/react-native-toast-message

(12)React-native-switch
switch component တွေ ယူသုံးလို့ရတဲ့ library ဖြစ်ပါတယ်။ custom ပြောင်းသုံးလို့ရတယ်။

npm link -> https://www.npmjs.com/package/react-native-switch
Repo link -> https://github.com/shahen94/react-native-switch

(13)React-native-share
မိမိ app ကနေ တခြား app တွေကို messages သို့မဟုတ် files တွေ share ချင်တဲ့အခါ သုံးလို့ရပါတယ်။ social share အတွက် ဖြစ်ပါတယ်။

npm link -> https://www.npmjs.com/package/react-native-share
Repo link -> https://github.com/react-native-share/react-native-share

(14)React-native-select-dropdown
dropdown , select , picker, menu တွေ အတွက် သုံးလို့ရတဲ့ library ဖြစ်ပါတယ်။ လိုအပ်မှ သုံးပါ။ dropdown သက်သက်ပဲ သုံးမယ်ဆိုရင်တော့ ကိုယ့်ကုဒ်နဲ့ကိုယ်ရေးပြီး သုံးလိုက်တာ ပိုကောင်းပါတယ်။

npm link -> https://www.npmjs.com/package/react-native-select-dropdown
Repo link -> https://github.com/AdelRedaa97/react-native-select-dropdown

(15)React-native-qrcode-svg
သူလည်းပဲ QR Code generator ဖြစ်ပါတယ်။ react-native-svg နဲ့ javascript-qrcode ကို အခြေခံပြီး ဖန်တီးထားတာမို့ သုံးရတာ အဆင်ပြေပါတယ်။

npm link -> https://www.npmjs.com/package/react-native-qrcode-svg
Repo link -> https://github.com/awesomejerry/react-native-qrcode-svg

(16)React-native-push-notifications
Local နဲ့ Remote Notifications တွေ ပြဖို့အတွက် သုံးလို့ရပါတယ်။

npm link -> https://www.npmjs.com/package/react-native-push-notification
Repo link -> https://github.com/zo0r/react-native-push-notification

(17) React-native-progress-circle
Progress circle အတွက် ရေးထားတဲ့ library ပါ။ အရောင် ဆိုဒ် borderRadius ကို စိတ်ကြိုက် ပြင်လို့ရပါတယ်။ react-native-progress ကိုလည်း စမ်းကြည့်သင့်ပါတယ်။

npm link -> https://www.npmjs.com/package/react-native-progress-circle
Repo link -> https://github.com/MrToph/react-native-progress-circle

(18) React-native-localize
Local currency, calendar , timezone စတာတွေကို ယူသုံးလို့ရပါတယ်။

npm link -> https://www.npmjs.com/package/react-native-localize
Repo link -> https://github.com/zoontek/react-native-localize

(19)React-native-linear-gradient

Component တွေကို ရောင်ပြေးလေးတွေအနေနဲ့ ပြသချင်တဲ့အခါ သုံးလို့ရပါတယ်။

npm link -> https://www.npmjs.com/package/react-native-linear-gradient
Repo link -> https://github.com/react-native-linear-gradient/react-native-linear-gradient

19/01/2024

Undefined and null in JavaScript

ဒီနေ့မှာတော့ undefined နဲ့ null အကြောင်း ဆွေးနွေးကြပါမယ်။ နှစ်ခုလုံးက ယေဘုယျအားဖြင့် တန်ဖိုးမရှိတာကို ကိုယ်စားပြုသုံးကြတာ ဖြစ်ပေမယ့် ကွဲပြားမှု ရှိပါတယ်။ variable တစ်ခုဟာ ကြေညာရုံပဲ ကြေညာထားပြီး တန်ဖိုး ထည့် သတ်မှတ် initialising မလုပ်ထားဘူးဆိုရင် ထွက်လာမယ့် ရလဒ်ဟာ undefined ဖြစ်ပါတယ်။ အလားတူ function တစ်ခုဟာ တန်ဖိုးတစ်ခုကို return ပြန်မထားရင်လည်း ရလဒ်ဟာ undefined ပဲ ထွက်မှာပါ။ ပြီးတော့ တကယ် မရှိနေတဲ့ object property တစ်ခု ဒါမှမဟုတ် array element တစ်ခုကို access လုပ်မိရင်လည်း undefined ပဲ ပြန်ရမှာပဲ ဖြစ်ပါတယ်။ function တစ်ခုဟာ parameter လက်ခံထားပေမယ့် ပါမလာခဲ့ရင်လည်း undefined ပဲ ဖြစ်ပါတယ်။ undefined ဟာ primitive valueပါ။ global property လည်း ဖြစ်ပါတယ်။ var keyword နဲ့ ကြေညာထားတဲ့ variable တွေရဲ့ default value ဟာလည်း undefined ပါပဲ။

let x; // variable declared but not initialized
console.log(x); // Output: undefined

function doSomething() {
// no return statement, so the function returns undefined
}
console.log(doSomething()); // Output: undefined

function example(param) {
console.log(param); // undefined if no argument is provided
}
example();

let obj = {};
console.log(obj.property); // Output: undefined

Null ကတော့ variable တစ်ခု သို့မဟုတ် object property တစ်ခုမှာ ဘာတန်ဖိုးမှ ရှိမနေသင့်တာကို ကိုယ်စားပြုဖော်ပြချင်တဲ့ အခါ assignment value အနေနဲ့ သုံးရတာပါ။ သူလည်း primitive value ဖြစ်ပါတယ်။ global property တော့ မဟုတ်ပါဘူး။

let y = null; // variable intentionally set to null
console.log(y); // Output: null

let obj = { property: null }; // property intentionally set to null
console.log(obj.property); // Output: null

နောက်တစ်ခုထပ်ကြည့်ရအောင်ပါ။

null == undefined // true
null === undefined // false

ဒီပုံစံမှာ null ဟာ undefined နဲ့ တူသယောင်ယောင်ရှိပေမယ့် မတူဘူးဆိုတာပါပဲ။
Variable တစ်ခုကို undefined လို့ သတ်မှတ်လိုက်တဲ့အခါ အဲဒီ variable ရှိမနေဘူးဆိုတဲ့ အဓိပ္ပါယ် သက်ရောက်ပါတယ်။ အဲသလို မဟုတ်ဘဲ null လို့ သတ်မှတ်ထားရင်တော့ variable value ဟာ empty ဖြစ်ပါတယ်။ null ကို programmer တွေ ကိုယ်တိုင် ကုဒ်ထဲမှာ လိုအပ်သလို ထည့်သွင်း သတ်မှတ်ပြီး အသုံးပြုလေ့ရှိပါတယ်။

အဆင်ပြေကြပါစေ။

Ko Aung Naing Phyo(SGB)





Call now to connect with business.

19/01/2024

16/01/2024

Temporal dead zone (TDZ) in JavaScript

temporal dead zone (TDZ) ဆိုတာ let သို့မဟုတ် const သုံးပြီးကြေငြာထားတဲ့ variable တွေ ရှိပေမယ့် ဘယ်တန်ဖိုးကိုမှ access လုပ်လို့မရ assign လုပ်လို့မရတဲ့ အခိုက်အတန့်ကို ဆိုလိုတာပါ။ အဲဒီအခိုက်အတန့်မှာ variable ကို access သို့မဟုတ် assign လုပ်ခဲ့မိရင် ReferenceError ဖြစ်ပါတယ်။ ဆက်ရှင်းပြပါမယ်။

Es6 မတိုင်မီက javaScript မှာ variable ကြေညာရင် var keyword တစ်ခုတည်းကိုပဲ သုံးခဲ့ကြရတယ်။ Es6 ပေါ်လာတဲ့ အခါမှ let နဲ့ const keyword ကို သုံးလို့ ရခဲ့တာပါ။ let နဲ့ const keyword နှစ်ခုလုံးဟာ block-scoped keyword တွေပါ။ {} အတွင်းမှာပဲ access လုပ်လို့ရပါတယ်။ var keyword မှာတော့ အဲဒီ ကန့်သတ်ချက် မရှိပါဘူး။ ပုံစံလေးနဲ့ ကြည့်ရအောင်ပါ။

let age = 16;
let isAuth = true;

if (isAuth) {
let age = 18;
}

console.log(age); // 16

let keyword နဲ့ age ကို variable တူ ကြေညာထားပေမယ့် တကယ် အလုပ်လုပ်သွားတဲ့ အခါ scope အပြင်က age variable ပဲ အလုပ်လုပ်သွားလို့ တန်ဖိုး 16 ကို ပြန်ရနေတာပါ။ scope အတွင်းက let age = 18 ကတော့ နာမည်တူ ကြေညာထားပေမယ့် scope အတွင်းမှာ ပဲ အလုပ်လုပ်နေတာမို့ scope အပြင်ကနေ လှမ်း access လုပ်လို့ မရပါဘူး။ နောက်တစ်ခု ထပ်ကြည့်ရအောင်ပါ။

var age = 16;
var isAuth = true;

if (isAuth) {
var age = 18;
}

console.log(age); // 18

ဒီ ပုံစံမှာတော့ နောက်ဆုံးကြေညာထားတဲ့ scope ထဲက var age = 18; အလုပ်လုပ် သွားတာကို တွေ့ရမှာပါ။ var keyword ဟာ non block-scoped ဖြစ်လို့ အဲသလို အလုပ်လုပ်သွားတာဖြစ်ပါတယ်။
နောက်ထပ်ထူးခြားချက်ကလေး ထပ်ကြည့်ရအောင်ပါ။

console.log(varAge); // undefined
console.log(letAge); // ReferenceError

var varAge = 1;
let letAge = 1;

ဒီပုံစံမှာ var keyword နဲ့ varAge ကို နောက်မှ ကြေညာထားပြီး အရင်ခေါ်လိုက်တဲ့ အခါ undefined ဖြစ်နေတာကို တွေ့ရပါတယ်။ letAge မှာတော့ ReferenceError ဖြစ်ပါတယ်။ ဘာကြောင့်အဲလိုဖြစ်ရသလဲဆိုရင် Temporal Dead Zone(TDZ) ကြောင့်ပါ။ TDZ ဆိုတာ scope ထဲမှာ ရှိပေမယ့် မကြေညာရသေးလို့ variable တွေဆီ မရောက်နိုင်သေးတဲ့ ကြားကာလကို ခေါ်တာ ဖြစ်ပါတယ်။ let နဲ့ const variable တွေဟာ သူတို့ကို မကြေညာမချင်း scope ထဲက TDZ မှာ ရှိနေပါတယ်။ ဒါကြောင့် သူတို့ကို မကြေညာခင် access လုပ်လိုက်ရင် ReferenceError တက်တာပါ။

{
// This is the temporal dead zone for the age variable!
// This is the temporal dead zone for the age variable!
// This is the temporal dead zone for the age variable!
// This is the temporal dead zone for the age variable!
let age = 25; // No more TDZ
console.log(age);
}

var keyword မှာတော့ တခြား keyword တွေနဲ့ မတူဘဲ သူ့ရဲ့ default initialization ကို undefined လို့ သတ်မှတ်ထားတဲ့ အတွက် နောက်မှ ကြေညာပြီး access လုပ်လိုက်ရင် undefined ဖြစ်ပါတယ်။

ဒီနေရာမှာ variable ကြေညာတာနဲ့ variable စသတ်မှတ် တာ ကွာပုံကို ပြောပြချင်ပါတယ်။ ကျွန်တော်တို့ဟာ let age; လို့ ရေးလိုက်တယ် ဆိုရင် memory မှာ age ဆိုတဲ့ အမည်တစ်ခုကို သိမ်းဆည်းသွားပါတယ်။ ဒါကို variable declaring လို့ခေါ်ပါတယ်။ ခုနက သတ်မှတ်လိုက်တဲ့ age ထဲမှာ 20 လို့ ထည့်လိုက်တယ်ဆိုပါစို့။ ဒါကိုတော့ variable initialising လို့ ခေါ်ပါတယ်။ variable ကို တန်ဖိုးထည့် သတ်မှတ်လိုက်တာပါ။ variable declaring နဲ့ variable initialising ကို နှစ်ခုပေါင်းရေးလို့ရပါတယ်။

function scopeExample() {

let age; //variable declaring
age = 20; //variable initialising
let hands = 2; // variable declaring and variable initialising
}

တကယ်လို့ ကျွန်တော်တို့ဟာ

console.log(age) ;
Let age = 20 ; လို့ ရေးခဲ့မိရင် TDZ ကြောင့် Uncaught ReferenceError: age is not defined လို့ error တက်မှာ ဖြစ်တယ်။ ဒါဆို TDZ ဟာ variable declaration နဲ့ scope ထိပ်မှာ ဘာကြောင့် ရှိနေသလဲ။ မေးစရာရှိပါတယ်။ variable hoisting ကြောင့်ပါ။

JS Engine မှာ ကုဒ်တွေကို run တဲ့ အခါ အဆင့် နှစ်ဆင့်ကို ဖြတ်ကျော်ရပါတယ်။ ပထမဆင့်အနေနဲ့ ကုဒ်တွေကို Abstract Syntax Tree/executable byte code အဖြစ် ပြောင်းရပါတယ်။ ဒုတိယ အဆင့်အနေနဲ့ ကုဒ်တွေကို run ပြီး အလုပ်လုပ်စေပါတယ်။

variable hoisting ဟာ ပထမ အဆင့်မှာပဲ ဖြစ်ပေါ်ပါတယ်။ variable declaration ကို scope အထက်ကို တင်ပေးလိုက်တာပါ။ အဲသလို hoisting လုပ်လိုက်တဲ့ အတွက်ကြောင့်ပဲ let နဲ့ const တို့ရဲ့ တန်ဖိုးတွေဟာ undefined အဖြစ် သတ်မှတ်လို့ မရတော့တာပါ။ ခုနက ပြလိုက်တဲ့ Uncaught ReferenceError: age is not defined ဆိုတဲ့ error မှာ age ဆိုတာလေး တွေ့ရမှာပါ။ JS engine က ကျွန်တော်တို့ရဲ့ variable name ကို သိလို့ error message ထဲမှာ age လို့ ထည့်ပေးလိုက်တာပါ။ သူဘာကြောင့် သိသလဲ။ Hoisting ကြောင့်ဖြစ်ပါတယ်။ ဒါပေမယ့် variable ကို access လုပ်လို့တော့ မရပါဘူး။ var ရဲ့ default initialising ကို hoisting process မှာပဲ undefined လို့ သတ်မှတ်ထားတာကြောင့် variable ကို နောက်မှ ကြေညာပြီး ခေါ်သုံးမိရင် undefined ဖြစ်နေတာပါ။

TDZ ဘာကြောင့် ရှိနေသလဲဆိုရင် အဓိက အကြောင်းကတော့ error catching အတွက် ဖြစ်ပါတယ်။ variable တစ်ခုကို မကြေညာမီ access လုပ်ဖို့ ကြိုးစားတယ်ဆိုတာ မှားယွင်းတဲ့ နည်းဖြစ်သလို လုပ်လို့လည်း မရနိုင်ပါဘူး။ TDZ မဖြစ်အောင်ဆိုရင်တော့ let နဲ့ const ကို scope အထက်မှာ အရင် ကြေညာဖို့ လိုပါလိမ့်မယ်။

အဆင်ပြေကြပါစေ။

Ko Aung Naing Phyo(SGB)




16/01/2024

Prototype design pattern in JavaScript

Prototype Pattern ဆိုတာ အကျဥ်းအားဖြင့်တော့ object အသစ်တွေ ဖန်တီးပေးတာကို ပြောတာပါ၊ object အသစ်တွေ ဖန်တီးပေးတယ်ဆိုပေမယ့် object ကို ခုမှ အသစ် ဖန်တီးတာမျိုးမဟုတ်ဘဲ ရှေ့က ရှိပြီးသား object ပုံစံကိုကြည့်ပြီး လိုအပ်တဲ့ object တွေကို ပွားယူ ဖန်တီးပေးတာမျိုးပါ။ properties တွေကို share သုံးတဲ့ သဘောပါပဲ။ Prototype ပုံစံကို Properties Pattern လို့လည်း ခေါ်ပါတယ်။ ဒီပုံစံမှာ အားသာချက်တချို့ရှိပါတယ်။

// Prototype object
const carPrototype = {
drive: function() {
console.log("Driving the car.");
},
stop: function() {
console.log("Stopping the car.");
}
};

// Create a new car using the prototype
const car1 = Object.create(carPrototype);
car1.model = "Toyota";
car1.year = 2022;

// Create another car using the same prototype
const car2 = Object.create(carPrototype);
car2.model = "Honda";
car2.year = 2021;

// Using the shared methods from the prototype
car1.drive(); // "Driving the car."
car2.stop(); // "Stopping the car."

ဖော်ပြပါ ပုံစံထဲက carPrototype ဟာ drive and stop methods တွေရှိတဲ့ object တစ်ခုဖြစ်ပါတယ်။
Object.create() ကို သုံးပြီး object အသစ်တစ်ခု ဖန်တီးလိုက်ပါတယ်။ ဖန်တီးလိုက်တဲ့ object ဟာ carPrototype ကို ပွားယူလိုက်တာဖြစ်လို့ car1 နဲ့ car2 မှာ carPrototype ရဲ့ prototype အတိုင်း ပြန်သုံးလို့ရသွားပါတယ်။car1 နဲ့ car2 မှာ သူ့ ကိုယ်ပိုင် model နဲ့ year properties တွေလည်း ရှိပါတယ်။ carPrototype object ကို ပြန်ယူသုံးတာဖြစ်လို့ car1 c မှာ car1.drive() ဆိုပြီး သုံးလို့ရသွားတာပါ။

ဒီမှာ ဘာ အကျိုးကျေးဇူးတွေ ရသလဲ မေးစရာ ရှိပါတယ်။ ပထမ အကျိုးကျေးဇူး အနေနဲ့ code reusability ဖြစ်ပါတယ်။ မလိုအပ်ဘဲ ကုဒ်ဖောင်းပွမှုတွေ မဖြစ်တော့ပါဘူး။ နောက်တစ်ခုက Dynamic Object Composition ဖြစ်ပါတယ်။ object တွေကို လိုသလို ပြောင်းသုံးလို့ရတယ်။ နောက်ထပ် အကျိုးကျေးဇူး တစ်ခုက Memory Efficiency ပါ။ prototypeထဲကနေ မျှသုံးတာ ကြောင့် memory ထဲမှာ function တူတွေ နေရာယူတာ မရှိတော့ဘဲ မှတ်ဉာဏ် စွမ်းဆောင်ရည် ပိုကောင်းသွားတာပါ။
class syntax တွေမှာ prototype တွေကို သုံးပါတယ်။ ဒါပေမယ့် prototype design pattern ကို နားလည်ထားရင် javaScript OOP ကို လေ့လာတဲ့ အခါ ပို အထောက်အကူ ဖြစ်စေမှာဖြစ်ပါတယ်။

အဆင်ပြေကြပါစေ။
Ko Aung Naing Phyo(SGB)


15/01/2024

အေတီအမ်ဟာကာ
အဲလောက်လွယ်ရင်ကွာ😁

13/01/2024

const and Object.freeze() in JavaScript

javaScript မှာ const keyword ကို variable တွေ ကြေညာ ဖို့ အသုံးပြုရပါတယ်။ const နဲ့ ကြေညာထားတဲ့ တန်ဖိုးကို ပြန်ပြောင်းလို့တော့ မရပါဘူး။

const x = 10 ;
x = 20 //Uncaught TypeError: Assignment to constant variable

ဒါပေမယ့် const နဲ့ object ကို ကြေညာ ထားရင်တော့ object ရဲ့ တန်းဖိုးကို ပြောင်းလဲလို့ရပါတယ်။

const obj = { key: 'value' };
obj.key = 'new value';
// output -> key :'new value'

Object ရဲ့ တန်ဖိုးတွေကို မပြောင်းလဲချင်ဘူးဆိုရင်တော့ Object.freeze() ကို သုံးရပါတယ်။

const obj = { key: 'value' };
Object.freeze(obj)
obj.key = 'new value';
// output -> { key: 'value' }

တလက်စတည်း var keyword နဲ့ let keyword နှစ်ခုရဲ့ ခြားနားပုံလေး ဆက်ပြောချင်ပါတယ်။
var keyword နဲ့ ကြေညာထားရင် block scope ထဲမှာ ကြေညာထားပေမယ့်် block အပြင်ဘက်ကနေ ခေါ်သုံးနိုင်ပါတယ်။
let keyword နဲ့ ကြေညာထားရင်တော့ သူ့ကို ကြေညာထားတဲ့ scope ထဲမှာပဲ သုံးရပါတယ်။ အပြင်ကနေ သုံးလို့ မရပါဘူး။
var keyword နဲ့ ကြေညာထားရင် variable lifting လုပ်လို့ရပေမယ့် let keyword နဲ့ ဆိုရင်တော့ မရပါဘူး။

အဆင်ပြေကြပါစေ။

Ko Aung Naing Phyo(SGB)




.freeze

13/01/2024

bind() method in Javascript
bind() method ကို အသုံးပြုပြီး object တစ်ခုဟာ အခြား object တစ်ခုဆီမှာ ရှိတဲ့ method ကို ခေါ်ယူသုံးနိုင်ပါတယ်။ ကိုယ့်ဆီမှာ မရှိတဲ့ method ကို တခြားကနေ ယူသုံးတာ ဖြစ်လို့ အငှားသုံးတယ်လို့ ပြောရင်လည်း ရပါတယ်။
ပုံစံနဲ့ ကြည့်ရအောင်ပါ။

const person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}

const member = {
firstName:"Hege",
lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);
console.log(fullName) // Outputs: Hege Nilesn

ဒီနမူနာမှာ member object ဟာ သူ့ဆီမှာ မရှိတဲ့ fullName method ကို ယူသုံးလိုက်တာ တွေ့နိုင်ပါတယ်။ bind() ကို သုံးတဲ့ အခါ bind သုံးမယ့် object ကို arguments အနေနဲ့ ထည့်ပေးရပါတယ်။
အောက်က နမူနာအတိုင်းလည်း သုံးလို့ရတယ်။

const person = {
name: "John",
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
}
};

const greet = person.sayHello.bind(person);

greet(); // Outputs: Hello, my name is John

ဒီပုံစံမှာတော့ greet() function အသစ်ဖန်တီးပြီး သုံးပါတယ်။ ထည့်ပေးလိုက်တဲ့ arguments မှာတော့ person object ကိုပဲ ထည့်ပေးလိုက််လို့ greet() ကို ခေါ်သုံးတဲ့ အခါ Hello, my name is John လို့ ထွက်နေတာ ဖြစ်ပါတယ်။ function ထဲက this keyword ဟာ object ကိုပဲ ပြန် ညွန်းထားတာပါ။ this ဟာ person ကို ရည်ညွန်းတာဖြစ်လို့ person.name လို့ ခေါ်ရင် John ကို ရမှာ ဖြစ်သလို this.name လို့ ခေါ်ရင်လည်း John ကိုပဲ ပြန်ရမှာပါ။

တခါတရံ callback function အနေနဲ့ object ထဲက methods တွေကို ယူသုံးတဲ့ အခါ function ခေါ်လိုက်ရင် this keyword ပျောက်ပြီး undefined ဖြစ်နေတတ်ပါတယ်။ အဲလိုနေရာမျိးမှာ bind() method ကို သုံးရပါတယ်။ နမူနာ ကြည့်ရအောင်ပါ။

const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}

setTimeout(person.display, 3000);

setTimeout() ထဲမှာ အချိန် သုံးစက္ကန့် ကြာတဲ့ အခါ display() ကို callback method အနေနဲ့ ခေါ်ထားပါတယ်။ ဒါပေမယ့် တကယ်တမ်း အလုပ်လုပ်တဲ့ အခါ undefined ဖြစ်နေပါလိမ့်မယ်။ display method ဟာ မူလက object method ဖြစ်သလို this keyword ကလည်း object ကိုပဲ ပြန်ညွန်းထားတာပါ။ ဒါပေမယ့် display method ကို seTimeout ထဲ ထည့်လိုက်တဲ့ အခါ this keyword ဟာ global object ဖြစ်သွားပါတယ်။ ဆိုလိုတာက this keyword ဟာ object method ထဲမှာ ဆိုရင် object ကိုပဲ ရည်ညွန်းပါတယ်။ function ထဲမှာ ဆိုရင်တော့ global object ကို ရည်ညွန်းပါတယ်။ အခု display ဟာ seTimeout functionထဲ ရောက်သွားတဲ့ အတွက် this keyword ဟာ global object ဖြစ်သွားပြီး သူရည်ညွန်းရမယ့် person object ဟာ setTimeout function ထဲမှာ မရှိဘဲ ပျောက်နေပါတယ်။ ဒီပြဿနာကို bind() method နဲ့ ရှင်းလို့ရပါတယ်။

const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}

let display = person.display.bind(person);
setTimeout(display, 3000);

အခုလို ပြင်လိုက်ရင် လိုချင်တဲ့ အဖြေရပါပြီ။

ဗဟုသုတ အနေနဲ့ call(), apply() method တွေ ကိုလည်း လေ့လာထားသင့်ပါတယ်။
အဆင်ပြေကြပါစေ။

Ko Aung Naing Phyo(SGB)




13/01/2024

map and forEach in JavaScript
map နဲ့ forEach method တွေကို javaScript မှာ array တွေ စီမံဖို့ သုံးကြပါတယ်။ javaScript built-in function တွေပါ။ array တွေကို စီမံဖို့ သုံးကြတယ်ဆိုပေမယ့် မှတ်သားစရာလေးတွေ ရှိပါတယ်။

map() ဟာ မူရင်း array ရဲ့ element တစ်ခုစီကို ပေးထားတဲ့ function အတိုင်း စီမံပြီး array အသစ်တစ်ခုကို ပြန်ပေးလေ့ရှိပါတယ်။ မူလ array ကို ပြင်သွားတာ မဟုတ်ပါဘူး။ ပေးလိုက်တဲ့ function အတိုင်းပဲ array အသစ်ကို ပြန်ထုတ်ပေးလိုက်တာပါ။ ပုံစံလေးနဲ့ ပြပါမယ်။

const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(num => num * 2);
// output -> doubledNumbers [2, 4, 6, 8]

ဒီပုံစံမှာ numbers ဆိုတဲ့ အမည်နဲ့ array တစ်ခု တည်ဆောက်ထားပါတယ်။ သူ့ကို map သုံးပြီး အထဲက ဒေတာတွေကို 2 နဲ့ မြှောက် ပါမယ်။ မူလက numbers ရဲ့ array ခန်းမှာ ဒေတာတွေက [1, 2, 3, 4] ပါ။ map() အလုပ်လုပ်သွားတဲ့ အခါ ပထမ array ခန်းရဲ့ ဒေတာ 1 ကို ယူပြီး 2 နဲ့ မြှောက်ပေးလိုက်ပါတယ်။ doubledNumbers ရဲ့ ပထမ array ခန်း တန်ဖိုး ဟာ 2 ဖြစ်သွားပါပြီ။

နောက်တစ်ကြိမ် map() အလုပ်လုပ်သွားတဲ့ အခါ numbers ရဲ့ array ခန်းက ဒေတာ 2 ကို ယူပြီး အလုပ်လုပ်မှာမို့ doubledNumbers ရဲ့ ဒုတိယ array ခန်း တန်ဖိုး ဟာ 4 ဖြစ်သွားပါမယ်။ ဒီနည်းနဲ့ loop ပတ်ပြီး အလုပ်လုပ်လိုက်တဲ့ အခါ doubledNumbers အတွက် [2, 4, 6, 8] ဆိုတဲ့ array ကို ရရှိလိုက်ပါတယ်။ ကျွန်တော်တို့ ပေးလိုက်တဲ့ function အတိုင်းပဲ array ကို စီမံပြီး array အသစ် ပြန်ထုတ်ပေးလိုက်တာပါ။ သူ့မူလ array တန်ဖိုးကတော့ ပြောင်းမသွားဘဲ numbers = [1, 2, 3, 4] အတိုင်း ဆက်ရှိနေပါတယ်။

forEach() method ကတော့ အဲသလို မဟုတ်ပါဘူး။ နဂိုရှိပြီးသား array ကို တိုက်ရိုက် ပြန်ပြင်တာမျိုးတွေ နဂိုရှိပြီးသား array ကို စီမံပြီး array အသစ် ပြန်ထုတ်ပေးတာမျိုးတွေ မလုပ်ပေးနိုင်ပါဘူး။ပုံစံလေးနဲ့ ကြည့်ရအောင်ပါ။

const numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num));
//output 1, 2, 3, 4

မူလ array က ဒေတာတွေ ကိုပဲ loop ပတ်ပြီး အရှိအတိုင်း ထုတ်ပေးလိုက်တာပါ။ မူလ array က ဒေတာတွေရဲ့ တန်ဖိုးလည်း ပြောင်းမသွားပါဘူး။ သူ့ကို ကျွန်တော်တို့ အထက်က map()မှာ လုပ်ခဲ့တဲ့ ပုံစံမျိုး သွားလုပ်ခိုင်းလို့ မရပါ။ output ဒေတာဟာ undefined ဖြစ်နေပါလိမ့်မယ်။

ဒါကြောင့် map() ဟာ မူရင်း array ရဲ့ ဒေတာကို အသွင်ပြောင်းပြီး ဒေတာ အသစ်ပြန်ထုတ်ပေးပေမယ့် forEach() method ကတော့ ဒေတာ အရှိအတိုင်းပဲ ပြန်ထုတ်ပေးနိုင်ပါတယ်။ သူတို့နှစ်မျိုးလုံးဟာ array ကို loop ပတ်တာချင်းတော့ တူနေတာ တွေ့ရပါမယ်။ အဆင်ပြေကြပါစေ။

Ko Aung Naing Phyo(SGB)





12/01/2024

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

လူတွေ မသိကြတာ တစ်ခုက
လူတစ်ယောက်ကို အထင်သေးတဲ့ အခါမှာ သူ့ရဲ့ ပစ္စုပ္ပန်ကိုပဲ အထင်သေးခွင့်ရှိတယ်ဆိုတာပဲ။ သူ့အနာဂတ်ကို အထင်သေးခွင့်မရှိဘူး။

ဘာကြောင့်ဆို လူတစ်ယောက်ရဲ့ လုပ်ကိုင်နိုင်စွမ်းကို ဘုရား ရဟန္တာကလွဲရင် ဘယ်သူမှ ကြိုမမြင်ဘူး။ပုဂံခေတ်က ဦးကျည်ပွေ့အကြောင်းကို မှတ်သားဖူးရင် ဒီသဘောတရားကို နားလည်မယ်။

အဲဒါကြောင့် ဘုရားဟောခဲ့တာ။ အထင်သေးခြင်း အချင်းချင်း ကင်းရှင်းကြပါစေဆိုတာ။

Video ကတော့ credit ပါ။
Ko Aung Naing Phyo (SGB)

12/01/2024

useRef and useState in React
*
*
*
ဒီနေ့မှာတော့ useRef and useState အကြောင်း နည်းနည်း ပြောရအောင်ပါ။

လေ့လာမှတ်သားထားတဲ့နည်းလမ်းကို Reference လို့ခေါ်ပါတယ်။

useRef ဟာ ကျွန်တော်တို့ ရိုက်ထည့်လိုက်တဲ့ ဒေတာကို မှတ်သားထားပါတယ်။ update ဖြစ်သွားတဲ့ အခါ component re-render ပြန်မလုပ်ဘဲ မှတ်သားထားတဲ့ ဒေတာကို ပြန်ပေးပါတယ်။ renders ကြား မှာ တန်ဖိုးတွေကို ထိန်းထားပေးနိုင်ပါတယ်။ DOM ကို ကိုင်တွယ်ထိန်းချုပ်ဖို့နဲ့ user ကို ပြောင်းလဲသွားသလောက် ပြနေစရာလိုတဲ့ တန်ဖိုးတွေကို သိမ်းဆည်းဖို့ အဓိကအသုံးပြုရတာပါ။ လက်ရှိ ပြောင်းလဲသွားတဲ့ တန်ဖိုးကို ပြန်ပေးပါတယ်။ useState ကတော့ အဲလို မဟုတ်ပါဘူး။ useState ကို functional component တွေမှာ ဒေတာ စီမံခန့်ခွဲဖို့ သုံးရပြီး ဒေတာ အသစ်ပြောင်းသွားတိုင်း component ကို ပြန်render ချပါတယ်။ (class component တွေမှာ state ကို object type အနေနဲ့ သုံးရပါတယ်။ functional component တွေမှာတော့ ကြိုက်ရာ data type သတ်မှတ်လို့ရပါတယ်။စကားချပ်) component re-render လုပ်တဲ့ အခါ လုပ်ဆောင်ချက် နည်းပါးတဲ့ component တွေမှာ အကြောင်းမဟုတ်ပေမယ့် ပရောဂျက်က ကြီးမားလာတဲ့ အခါ performence issue တွေ ဖြစ်လာတတ်ပါတယ်။ ဒါကြောင့် ဒီသဘောသဘာ၀တွေကို နားလည်ထားရမှာပါ။ နမူနာလေးတွေနဲ့ ရှင်းပြရင် ပို နားလည်မယ် ထင်ပါတယ်။

import React, { useRef } from 'react';

function MyComponent() {
const inputRef = useRef(null);

const handleClick = () => {
inputRef.current.focus();
};

return (


Focus Input

);
}

ဒီနမူနာပုံစံမှာ ကျွန်တော်တို့ဟာ useRef ကို သုံးပြီး reference တစ်ခု ဖန်တီးလိုက်ပါတယ်။ သူ့ကို inputRef လို့ အမည်ပေးထားပါတယ်။
ပြီးတော့ မှ သူ့ကို input element ရဲ့ ref prop အဖြစ် ထည့်ပေးလိုက်တဲ့ အခါ input element ရဲ့ DOM node ထဲကို ၀င်ခွင့်ရပြီး input element မှာ ၀င်သမျှ တန်ဖိုးတွေကို မှတ်သားလို့ရသွားပါတယ်။ DOMကို တိုက်ရိုက်စီမံတာမို့ component re-render ချစရာ မလိုတော့ပါဘူး။

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

const increment = () => {
setCount(count + 1);
};

return (

Count: {count}
Increment

);
}

useState ဟာ variable ကို ကြေညာပြီး သုံးလို့ ရပါတယ်။ အခုပုံစံမှာ count, setCount variable နှစ်ခုကို ကြေညာထားပြီး countရဲ့ လက်ရှိ တန်ဖိုးဟာ 0 ဖြစ်ပါတယ်။ count ရဲ့ လက်ရှိတန်ဖိုးကို ပြောင်းချင်ရင် setCount functionကတစ်ဆင့် ပြောင်းပေးရမှာပါ။ count ရဲ့ လက်ရှိတန်ဖိုး ပြောင်းသွားတာနဲ့ component re-render ပြန်ဖြစ်ပါတယ်။ အခုပြထားတဲ့ ပုံစံမှာ ခလုပ်နှိပ်လိုက်တာနဲ့ increment function ကို ခေါ်ထားပြီး count ရဲ့ တန်ဖိုးကို ၁ တိုးပေးလိုက်ပါတယ်။ တန်ဖိုး ၁ တိုးလိုက်တာနဲ့ component တစ်ခုလုံး re-render ဖြစ်သွားပြီး ပြောင်းသွားတဲ့ တန်ဖိုး ၁ ကို အသုံးပြုသူတွေ မြင်ရအောင် ပြပေးလိုက်ပါတယ်။ ဒါကြောင့် ခလုပ်နှိပ်တာနဲ့ Count:0 ကနေ Count:1ကို မြင်ရပါလိမ့်မယ်။ အခုရေးပြထားတဲ့ ပုံစံဟာ mini နမူနာဖြစ်ပြီး နဂိုကတည်းက React ဟာ မြန်တာကြောင့် component re-renderကို သတိမထားလိုက်မိပေမယ့် ပရောဂျက်ကြီးလာ component များလာတဲ့ အခါ အလုပ်လုပ်တာ နှေးလာတာ မျိုး ကြန့်ကြာနေတာမျိုး တစ်ခြား မထင်ထားတဲ့ issue မျိုးတွေ ဖြစ်လာပြီး မိမိ app ရဲ့ performence ကို ထိခိုက်လာစေနိုင်ပါတယ်။

အတိုချုပ် ပြောရမယ်ဆိုရင် useRef ကို DOM elements တွေကို ကိုင်တွယ်စီမံဖို့ လိုအပ်တဲ့နေရာမျိူး ဥပမာအားဖြင့် input element ကို focus လုပ်ရမယ့်နေရာ၊ element တစ်ခုရဲ့ scrolling ကို စီမံဖို့လိုတဲ့ နေရာ ၊ element အရွယ်အစားကို စီမံချင်တဲ့ နေရာ မျိုးတွေမှာ အသုံးပြုရပါတယ်။ useRef ဟာ DOM node ကို reference လုပ်ပြီး DOM node ရဲ့ properties တွေ methods တွေကို စီမံလို့ ရအောင် ဖန်တီးထားတဲ့ hook တစ်ခုပါ။ component's UI အပေါ်သက်ရောက်မှုမရှိ component re-render လည်း မလို mutable values ကိုလည်း သိမ်းထားချင်တယ်ဆိုရင် useRefကို လိုအပ်ချက်အလိုက် အသုံးပြုသင့်ပါတယ်။

useState ကတော့ component ထဲက state တွေကို စီမံပြောင်းလဲဖို့ အသုံးပြုရပါတယ်။ update values တွေကို အသုံးပြုသူ မြင်အောင် ပြဖို့ လိုအပ်တာကြောင့် component's UI အပေါ် သက်ရောက်မှုရှိပြီး component re-render လည်း ဖြစ်ပေါ်ပါတယ်။checkboxes, input fields, toggles တို့လို interactive elements တွေကို user ရိုက်ထည့်လိုက်တဲ့ တန်ဖိုးကို ကြည့်ပြီး state update လုပ်ဖို့နဲ့ component's UI မှာ ပြောင်းလဲသွားတဲ့ တန်ဖိုးကို ပြသဖို့ useState ကို သုံးရပါတယ်။

useRef နဲ့ useState ကို သုံးပြီး ဥပမာလေး တစ်ခု ကြည့်ကြပါမယ်။

import React, { useRef } from 'react';

function Form() {
const inputRef = useRef(null);

const handleSubmit = () => {
const value = inputRef.current.value;
// Submit the form
displaySuccessMessage();
};

const displaySuccessMessage = () => {
// Display success message without clearing the input field
};

return (


Submit

);
}

အထက်ပါ ဥပမာမှာ useRef ကို သုံးပြီး input field ကို reference ယူထားပါတယ်။ submit ကို နှိပ်လိုက်တဲ့ အခါ input field ထဲက တန်ဖိုးကို value လို့ အမည်သတ်မှတ်ထားလိုက်ပြီး form submit လုပ်လိုက်ပါတယ်။ component state ကို update မလုပ်တဲ့ အပြင် component ကို re-render ပြန်မချပါဘူး။ ဒါကြောင့် input field ထဲက တန်ဖိုးကတော့ ပျက်သွားမှာ မဟုတ်ဘဲ ဆက်ရှိနေမှာပါ။

နောက်တစ်ခု ထပ်ကြည့်ရအောင်ပါ။

import React, { useState } from 'react';

function Form() {
const [inputValue, setInputValue] = useState('');

const handleSubmit = () => {
// Submit the form
displaySuccessMessage();
};

const displaySuccessMessage = () => {
// Display success message
setInputValue(''); // Clear the input field
};

const handleInputChange = (e) => {
setInputValue(e.target.value);
};

return (


Submit

);
}

ဒီပုံစံမှာတော့ useState ကို သုံးပြီး inputValue ကို အလွတ်ထားထားပါတယ်။ input field ထဲကို စာရိုက်ထည့်လိုက်တဲ့ အခါ handleInputChange function အလုပ်လုပ်သွားပြီး မူလက အလွတ်ဖြစ်နေတဲ့ inputValue ထဲကို တန်ဖိုးထည့်လိုက်ပါတယ်။handleSubmit ကို နှိပ်လိုက်တဲ့ အခါမှာတော့ displaySuccessMessage() အလုပ်လုပ်သွားပြီး inputValue ကို အလွတ်ပြန်ထားလိုက်တဲ့ အတွက် input field ထဲမှာ တန်ဖိုး ရှိတော့မှာ မဟုတ်ပါဘူး။ ဒါဟာ useState ရဲ့ စီမံပုံ ဖြစ်ပါတယ်။ React မှာတော့ အသုံးတည့်တဲ့ Hook တွေ ဖြစ်ပါတယ်။ လိုအပ်ချက်အလိုက် သုံးရပါတယ်။ ကွဲပြားပုံလေးတွေ သိထားရင် performance ကောင်းတဲ့ app တွေ ရေးသားနိုင်လာပါလိမ့်မယ်။ အဆင်ပြေကြပါစေ။

Ko Aung Naing Phyo (SGB)


Address

Dagon

Website

Alerts

Be the first to know and let us send you an email when Open Wisdom Technology posts news and promotions. Your email address will not be used for any other purpose, and you can unsubscribe at any time.

Share