React App တစ်ခုကို ၅ မိနစ်အတွင်း ဘယ်လိုဖန်တီးမလဲ?

#react

Introduction to React

React ဆိုတာ web-development အတွက်အထူးကောင်းမွန်တဲ့ front end, open-sourced javascript library တစ်ခုဖြစ်ပါတယ်။ 2013 May လမှာ Public Release လုပ်ခဲ့ပီးတော့ လက်ရှိအချိန်မှာတော့ Facebook Community ကနေ maintain လုပ်ထားပါတယ်။ အစပိုင်းမှာ သိပ်အသုံးမပြု့ခဲ့ကြပေမဲ့ ယခုနောက်ပိုင်းမှာတော့ တစ်ဖြည်းဖြည်း ရေးပန်းစားလာခဲ့ပြီး အခုအချိန်မှာတော့ UI အတွက် အကောင်းဆုံးနဲ့ Performance အကောင်းဆုံး library တစ်ခုလို့ကိုဆိုနိုင်ပါတယ်။
အခုအချိန်မှာ Company အကြီးတွေနဲ့ Big industries တွေမှာပါ React ကိုအသုံးပြုနေကြတဲ့အပြင် အလုပ်အကိုင်အခွင့်အလမ်းလည်း အထူးကောင်းမွန်နေတယ်။
React ရဲ့ကောင်းတဲ့အချက်တွေ လိုက်ပြေနေမယ် ဆိုရင်တော့ ပြောလိုကိုကုန်မှာမဟုတ်တော့ပါဘူး။

ဒီနေတော့ React Application တစ်ခုကို ၅မိနစ်အတွင်းဘယ်လိုတည်ဆောက်ကြမလဲဆိုတာပြောပြသွားမှာ ဖြစ်ပါတယ်။

Requirements

React Application တစ်ခုစပြီးတည်ဆောက်တော့မယ်ဆို သူနဲ့ဆက်ဆက်တဲ့ requirements တွေနဲ့ tech အတွေအရင်ပြောရမှာပါ။

NodeJS ကို install လုပ်ထားဖို့လိုပါမယ်။ NodeJS ဆိုတာက java script runtime environment တစ်ခုပါ။ ဆိုလိုတာက java script ကို web-browser အပြင်တစ်ခြားနေရာ (ဥပမာ backend service) တွေမှာအသုံးပြု့လို့ရအောင် ဖန်းတီးထားတဲ့နည်းပညာဖြစ်ပါတယ်။ ဒီလင့် မှာ install သွားလုပ်လို့ရပါတယ်။
NPM ဆိုတာ Node Package Manager ဖြစ်ပြီး application တွေ development လုပ်တဲ့အချိန်မှာ လိုအပ်တဲ့ library တွေ၊ Package တွေကို စုစည်းထားပေးတဲ့ source ကြီးပဲဖြစ်ပါတယ်။ Node installation ပြီးတဲ့အခါ npm command ကို စတင်သုံးနိုင်ပါပြီ။ သပ်သပ်ထပ်ပြီး install လုပ်ပေးဖို့ မလိုပါဘူး။

Check Node & NPM versions

အရင်ဆုံး မိမိ့စက်ထဲမှာ NodeJS နဲ့ NPM versions တွေအရင်စစ်ကြည့်လို့ရပါတယ်။ စစ်ကြည့်ဖို့ဆိုရင်တော့ Window User အနေနဲ့ဆိုရင်တော့ Command Prompt, Linux, Mac သမားတွေကတော့ Terminal ကိုဖွင့်ပြီး အောက်ပါအတိုင်းစစ်ဆေးနိုင်ပါတယ်။

How to check Node version?

node -v

How to check NPM version?

npm -v

Get Started React App

WebPack ကိုအသုံးပြု့ပြီး React Application တစ်ခုတည်ဆောက်ခြင်း။
<script tag အတွင်းထည့်သွင်းရေးသားခြင်း။
Create React App ကိုအသုံးပြုပြီး React Application တစ်ခုတည်ဆောက်ခြင်း။ Note တစ်ခြားနည်းလမ်းတွေလည်းရှိ့ပါသေးတယ်။ အသေးစိတ်ဖတ်ခြင်ရင်တော့ ဒီလင့် မှာသွားရောက်ဖတ်ရှု့နိုင်ကြပါတယ်။

အထက်ပါသုံးခု့ထဲကမှ Create React App ကိုအသုံးပြုပြီး React Application တစ်ခုတည်ဆောက်ခြင်း အကြောင်းပြောပြသွားမှာဖြစ်ပါတယ်။

Intro to Create React App

Create React App ဆိုတာက react ကိုစတင်လေ့လာသူတွေနဲ့ single-page-application(SPA) လုပ်ချင်သူတွေအတွက်အသင့်တော်ဆုံးလို့ပြောလို့ရပါတယ်။ ဘာဖြစ်လို့လဲဆိုတော့ သူမှာလိုအပ်တဲ့ configuration, development server, testing setup အစရှိတာတွေအကုန်လုံးပါပီးသား အသင့်သုံးရုံပါပဲ။

Creating React App with Create React App

Older Node JS & NPM versions (Node < 8.10 and npm < 5.6)

create-react-app package ကို globally install အရင်လုပ်ပါ။

npm install -g create-react-app

ပြီးမှ create-react-app ကိုသုံးပြီး react application တည်ဆောက်ပါ။

create-react-app your-application-name
cd your-application-name
npm start

Newer Node JS & NPM versions (Node >= 8.10 and npm >= 5.6)

Node version ကမြင့်တယ်ဆိုရင်တော့ တစ်ကြောင်းတည်းနဲ့ အကုန်ပြီးအောက်တည်ဆောက်လို့ရပါတယ်။

npx create-react-app your-application-name
cd your-application-name
npm start

npm start ဆိုပြီး development server စပြီပြီးဆိုတာနဲ့ Browser မှာ http://localhost:3000 မှာ အောက်ပါအတိုင်း Create React App ရဲ့ Welcome Page ကိုမြင်ရမှာပဲဖြစ်ပါတယ်။

အားလုံးကိုကျေးဇူးတင်ပါတယ်။
ဆက်လက်ကြိုးစားပါအုံးမည်။

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started