Ei Maung eimg

Laravel Livewire Tutorial

Laravel ကို ဘယ် Front-end နည်းပညာနဲ့မဆို တွဲဖက်အသုံးပြုလို့ရပါတယ်။ အဲ့ဒီလို တွဲဖက်အသုံးပြုလို့ရတဲ့ နည်းပညာတွေထဲက Livewire အကြောင်းကို တစ်ခါထဲ လက်တွေ့လိုက်လုပ်ကြည့်လို့ရမယ့် Tutorial ပုံစံနဲ့ ဖော်ပြသွားမှာပါ။ Livewire ကို အကျဉ်းချုပ်အားဖြင့် JavaScript တွေရေးစရာမလိုတော့ဘဲ PHP နဲ့ပဲ Sing-Page Application (SPA) တွေ ဖန်တီးလို့ရတဲ့ နည်းပညာလို့ ဆိုနိုင်ပါတယ်။

Project Setup

စမ်းသပ်ကြည့်နိုင်ဖို့အတွက် ပထမဆုံး Laravel ပရောဂျက် အသစ်တစ်ခုကို အခုလို တည်ဆောက်ယူလိုက်ပါ။

composer create-project laravel/laravel tall

C နဲ့ရေးတဲ့ကုဒ်ကို Browser ထဲမှာ Run ကြမယ်

Step-1

https://mbebenita.github.io/WasmExplorer/ ကိုသွားပါ။ ရေးလိုတဲ့ C/C++ ကုဒ်ကိုရေးပါ။ ဥပမာ -

int add(int a, int b) {
	return a + b;
}

Save Screenshots to Desktop

ဟိုးအရင် Ubuntu Version တွေမှာ Keyboard ကနေ Print Screen ခလုပ်ကိုနှိပ်ပြီးဖမ်းတဲ့ Screenshot တွေအတွက် Save Location ကို သတ်မှတ်လို့ ရပါတယ်။ အခုနောက်ပိုင်း Version တွေမှာ သတ်မှတ်လို့ မရတော့ဘဲ၊ Pictures ဖိုဒါထဲမှာပဲ Default အနေနဲ့ သွားသိမ်းပါတယ်။ ဖိုဒါပြောင်းလို့ မရတဲ့အတွက် အဆင်မပြေပါဘူး။

အဆင်ပြေချင်ရင် Keyboard ကနေ Print Screen ခလုပ်ကိုမနှိပ်ဘဲ Screenshot ဆော့ဖ်ဝဲကနေတစ်ဆင့် သွားရပါတယ်။

အသုံးတော့ဝင်ပါတယ်။ Delay Timer တွေဘာတွေ သတ်မှတ်လို့ရပြီး သိမ်းချင်တဲ့ နေရာကို ရွေးပေးလို့ ရပါတယ်။

React Context

React ကို အခြေခံလောက် လေ့လာဖူးသူတိုင်း React Component တွေမှာ ပုံမှန်အားဖြင့် Data တွေဟာ Parent to Child လက်ဆင့်ကမ်း props အနေနဲ့ စီးဆင်းရတာကို သိရှိကြပြီး ဖြစ်ပါတယ်။ ဥပမာ ဒီလိုပါ။

function App(props) {
    return <Header value="ReApp" />
}

function Header(props) {

React Hooks

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

React က စမ်းသပ်နေတာ ကာလတစ်ခုကြာပြီဖြစ်တဲ့ Hooks လိုခေါ်တဲ့ Feature ကို React v16.8 မှာ စတင်ထည့်သွင်းပေးခဲ့ပါပြီ။ ဒါကြောင့် တို့တွေလည်း စတင်စမ်းသပ် အသုံးပြုသင့်ပြီဆိုပါတော့။ အဲ့ဒီ Hooks အကြောင်းကို ဒီနေရာမှာ ရှင်းပြသွားမှာပါ။

React မှာ State တွေကို စီမံဖို့ Class Component တွေကို သုံးရတယ်။ အကယ်၍ Functional Component တွေ သုံးချင်ရင်တော့ State တွေကို တိုက်ရိုက်စီမံလို့ ရမှာမဟုတ်ပဲ Redux လို နည်းပညာမျိုးရဲ့ အကူအညီကို ယူရမှာဖြစ်ကြောင်းကို လက်ရှိလေ့လာနေသူတိုင်း သိရှိကြပြီးသားပါ။ ဒါပေမယ့် စာနွှေးပြီးသား ဖြစ်သွားအောင် နမူနာတစ်ချို့ ပြန်ဖော်ပြပေးပါမယ်။

class App extends React.Component {

The Most Minimal React-Redux

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

လက်တွေ့ စမ်းသပ်ကြည့်နိုင်ဖို့အတွက် ပထမဦးဆုံး Project ဖိုဒါတစ်ခုဆောက်ပြီး အထဲမှာ Redux ကို Install လုပ်လိုက်ပါ။

npm install redux --save

The Most Minimal React Build System

ပြီးခဲ့တဲ့ ပို့စ်မှာ React ကို ချဉ်းကပ်ပုံအသစ်နဲ့ ဖော်ပြခဲ့ပါတယ်။ ဘာ Build System မှ မပါပဲ HTML Document တစ်ခုအတွင်းမှာ တိုက်ရိုက်ရေးသားခဲ့ခြင်းဖြစ်ပါတယ်။ ဒီတစ်ခါတော့ အရိုးဆုံးနဲ့ အရှင်းဆုံး Build System တစ်ခုကို တည်ဆောက် ကြည့်ကြမှာဖြစ်ပါတယ်။ ဒီအကြောင်းအရာဟာ ကျွန်တော်ပို့ချနေတဲ့ Rockstar Developer Course မှာ ထည့်သွင်းသင်ကြားမယ့် အကြောင်းအရာ တစ်ခုပါ။ ကြိုစမ်းမထားပဲ လက်တမ်းသင်ရင် အမှားပါပြီး အချိန်ကြာမှာစိုးလို့ အခုလို ကြိုစမ်းပြီး စာအဖြစ် ကြိုရေးထားလိုက်တာပါ။ ဒီ Course မှာ တက်ရောက် သင်ယူနေသူ ဟုတ်ဟုတ် မဟုတ်ဟုတ် JavaScript နည်းပညာတွေကို စိတ်ဝင်စားသူဆိုရင် ဒီပို့စ်က အသုံးဝင်ပါလိမ့်မယ်။

စာနည်းနည်း ရှည်ပါမယ်။ အချိန်ပေးနိုင်မှ တစ်ခါတည်းဖတ်ပြီး တစ်ခါတည်းလိုက်လုပ်ကြည့်ပါ။ အချိန်မပေးနိုင်သေးရင် Bookmark လုပ်ပြီး သိမ်းထားပြီး အချိန်ရမှ ပြန်ဖတ်ပါ။ တစ်ဝက်တစ်ပျက်ပဲ ဖက်ရင်တော့ အလကားဖြစ်သွားမှာပါပဲ။ လိုက်မလုပ်ရင်လည်း အလကားပါပဲ။ သိသလိုလို မသိသလိုလို ဖြစ်သွားမယ်။ လိုက်လုပ်ကြည့်မှ တစ်ခါတည်း သဘောပေါက်မှာပါ။

Babel in Browser

လက်ရှိ ရိုးရိုး HTML ထဲမှာ ရေးထားတဲ့ နမူနာကို နောက်တစ်ခါ ပြန်

Much Easier Approach to React

စိတ်ဝင်စားတဲ့သူများနေလို့ လေ့လာကြည့်ပေမယ့် "React က ခက်လိုက်တာ" လို့များတွေးနေသလား? တစ်ကယ်တော့ React က မခက်ပါဘူး။ ရေးနည်း တွေးနည်းတွေက မူလရိုးရိုး ရေးနည်းတွေးနည်း စနစ်တွေကနေ လုံးဝပြောင်းသွားလို့ "ပြောင်းရခက်နေတာ" ပါ။ Official Documentation နဲ့ အင်တာနက်က Tutorial တွေလေ့လာကြည့်လိုက်ရင်လည်း -- ES6 တွေ၊ Arrow Function တွေ၊ Class တွေ၊ JSX တွေနဲ့ ဟိုကနေဒီရောက်၊ ဟိုကနေဒီရောက် ဖြစ်နေပြီး -- သူတို့ရှင်းပြမှ ပိုရှုပ်သွားတယ် ဆိုသလို ဖြစ်နေတာကို တွေ့ရပါတယ်။

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

Plain JavaScript

ဘာ Library, ဘာ Framework မှ မပါတဲ့ ရိုးရိုး JavaScript နဲ့ HTML Element တစ်ခုတည်ဆောက်မယ်ဆိုရင် အခုလို တည်ဆောက်နိုင်ပါတယ်။

	ls, ls -la # list files
	cd # change directory
	pwd # current path
	touch # create new files
	cat # read file content
	echo # output content
	less # read big file
	mkdir, mkdir -p # create directory
	cp, cp -r # copy file, directory
	mv # move or rename file, dir

	atom-text-editor.editor {
	.bracket-colorizer-color0 {
	color: brown;
	}

	.bracket-colorizer-color1 {
	color: darkslategray;
	}

	.bracket-colorizer-color2 {