eimg

The Most Minimal React-Redux

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

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

npm install redux --save

eimg

The Most Minimal React Build System

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

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

Babel in Browser

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

eimg

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 တစ်ခုတည်ဆောက်မယ်ဆိုရင် အခုလို တည်ဆောက်နိုင်ပါတယ်။

eimg

ES6 - Modern JavaScript

ခြောက်ကြိမ်မြောက် တည်းဖြတ်မှုဖြစ်သည့်အတွက် ES6 ဟု အတိုကောက်ခေါ်၍ 2015 ခုနှစ်တွင် ဖန်တီးခဲ့သည့် အတွက် ECMAScript2015 ဟု ရံဖန်ရံခါ ခေါ်သည့် နည်းပညာသည် လက်ရှိ JavaScript (ES5) ကို အဆင့်မြှင့်တင်ထားသည့် နည်းပညာဖြစ်သည်။ ES6 တွင် ပါဝင်လာသည့် လုပ်ဆောင်ချက်များမှ အချို့ကို ရွေးထုတ် ဖော်ပြလိုက်ပါသည်။

Block-scope Variable

မူလ JavaScript တွင် var Keyword ကို အသုံးပြု၍ Variable များ ကြေငြာနိုင်သည်။ ထို Variable များသည် Function-scope သဘောသဘာဝ ရှိကြသည်။ ES6 တွင် let Keyword ကို အသုံးပြု၍ Block-scope Variable များ ကြေငြာအသုံးပြုနိုင်သည်။

let i = 10

eimg

<?php

$conn = mysqli_connect("localhost", "root", "");
mysqli_select_db($conn, "test");

$start = isset($_GET['start']) ? $_GET['start'] : 0;

$result = mysqli_query($conn, "SELECT * FROM countries LIMIT $start, 10");

$total = mysqli_query($conn, "SELECT * FROM countries");