React Introduction

React ဆိုတာ Frontend framework တွေထဲမှာ နာမည်အကြီးဆုံးတခုဖြစ်ပြီး Angular နဲ့ Vue တို့လိုမျိုး Component တွေနဲ့ frontend ကိုတည်ဆောက်တဲ့ နည်းပညာတစ်ခုပဲဖြစ်ပါတယ်။ ပုံမှန်နည်းလမ်းအရ web development လုပ်တယ်ဆို user က request လုပ်တဲ့အချိန် html, css, javascript files တွေကို response ပြန်ပေးပြီး browser က ရလာတဲ့ file တွေကို ပြပေးတာပဲ ဖြစ်ပါတယ်။ အဲ့လိုလုပ်တဲ့အခါ ဘာဖြစ်သလဲဆို အသစ်တခုခေါ်တိုင်း server ကို request ပို့၊ server ကနေ အဲ့ဒါကို html, css, javascript တွေနဲ့ပေါင်းပြီး response ပြန်ပေး၊ ပြီးရင် ရလာတဲ့ page တစ်ခုလုံးကို ပြန်ပြဖို့လုပ် အဲ့လိုမျိုး အကြိမ်တိုင်း လုပ်ပေးရပါတယ်။ react ကို သုံးခြင်းအားဖြင့် အဲ့လို server ကို အကြိမ်ကြိမ်ခေါ်၊ page ကို အကြိမ်ကြိမ်ပြန်ပြတာမျိုး လုပ်စရာမလိုတော့ပဲ website ရဲ့ လိုအပ်တဲ့နေရာတွေကိုပဲ ပြောင်းနိုင် ပြင်နိုင်တာမျိုး လုပ်သွားနိုင်တယ်။ Single Page Application လို့လဲ ခေါ်ကြတယ်။ ဘာလို့လဲဆိုတော့ website ပေါ်မှာဖြစ်နေတာတွေအားလုံးဟာ ထပ်ပြီး refresh လုပ်တာမျိုးမရှိဘဲ single page အတွင်းမှာပဲ အပြောင်းအလဲတွေ ဖြစ်နေတာမျိုးကြောင့်ပါ။

အဲ့ဒါဆို react ကို စပြီးလေ့လာကြည့်ရအောင်ပါ။ React ကိုလေ့လာမယ်ဆို သူနဲ့ဆက်စပ်ပြီး သိထားသင့်တဲ့ နည်းပညာတွေကတော့ Node, NPM နဲ့ Terminal တွေပါ။

• Node ဆိုတာ JavaScript Runtime ဖြစ်ပြီး ဆိုလိုတာက JavaScript ကို browser ထဲမှာတင်မဟုတ်ဘဲ တခြားနေရာတွေမှာပါ အသုံးချလို့ရအောင် ပြုလုပ်ထားတဲ့ နည်းပညာပဲ ဖြစ်ပါတယ်။
• npm ဆိုတာ Node Package Manager ဖြစ်ပြီး application တွေ development လုပ်တဲ့အချိန်မှာ လိုအပ်တဲ့ library တွေ၊ Package တွေကို စုစည်းထားပေးတဲ့ source ကြီးပဲဖြစ်ပါတယ်။ Node installation ပြီးတဲ့အခါ npm command ကိုပါ သုံးနိုင်ပါပြီ။ သပ်သပ် install လုပ်ပေးဖို့ မလိုပါဘူး။
• Terminal ကတော့ code တွေရေးပြီး run ဖို့လိုအပ်ပါတယ်။ Visual Studio Code အသုံးပြုတယ်ဆိုရင်တော့ code editor ထဲမှာ အသင့်ပါပြီးသား terminal ကိုလဲ အသုံးပြုနိုင်ပါတယ်။

စက်ထဲမှာ node နဲ့ npm သွင်းပြီးမပြီးနဲ့ လက်ရှိ version ကို ဖော်ပြထားတဲ့ command တွေနဲ့ စစ်ကြည့်လို့ရပါတယ်။

node --version

npm --version

React Project တခု စလုပ်တော့မယ်ဆို ကိုယ်တိုင် file တွေကို နေရာချတာ၊ configuration တွေလုပ်တာတို့ လုပ်နိုင်သလို create-react-app ဆိုတဲ့ command နဲ့လဲ အဆင့်သင့် development စလုပ်နိုင်တဲ့၊ လိုအပ်တဲ့ configuration တွေပြင်ဆင်ပြီးသားဖြစ်တဲ့ project တခုကို ပြုလုပ်နိုင်ပါတယ်။

npx create-react-app sample-app

npx ဆိုတာ Node install လုပ်တဲ့အခါ အတူပါလာတဲ့ npm ရဲ့ အစိတ်အပိုင်းတခုပဲဖြစ်ပါတယ်။ တခုသတိပြုရမှာက npx က npm version 5.2 နောက်ပိုင်းမှာမှ ပါလာတဲ့အတွက် အဲ့ထက်ဟောင်းတဲ့ version သုံးနေတယ်ဆိုရင်တော့ npx command ကိုအသုံးပြုနိုင်မှာမဟုတ်ပါဘူး။

Command ကို terminal မှာ run ပြီးရင် နည်းနည်းတော့ စောင့်ရတယ်။ Happy Hacking! ဆိုတာပေါ်လာပြီး terminal prompt ပြန်ပြောင်းသွားပြီဆိုရင်တော့ react project တခုကို initialize ပြုလုပ်ပြီးပါပြီ။

npm run start

react project ကို စပြီး run ပေးတဲ့ command ဖြစ်ပါတယ်။ ဒီ command ကို run လိုက်တဲ့အခါ localhost:3000 မှာ ခုလိုပေါ်လာရင် react setup အောင်မြင်ပြီပဲဖြစ်ပါတယ်။