React Installation

React ကိုအသုံးပြုဖို့အတွက် Ract Library ကို install ထားဖို့လိုအပ်ပါတယ်။ ဒီလို install ဖို့အတွက် npm ကိုအသုံးပြုရမှာဖြစ်တာကြောင့် ကျွန်တော်တို့ Computer ထဲတွင် node.js ရှိထားရပါမယ်။ အကြောင်းက npm သည် node.js ကို install တာနဲ့တစ်ခါတည်း ပါလာမှာဖြစ်တာကြောင့်ဖြစ်ပါတယ်။

install ပြီးတဲ့အခါ ကျွန်တော်တို့ရဲ့​ Computer ရဲ့ Terminal(Windows အသုံးပြုတဲ့ Learner များက CMD ပါ) ကနေပြီးတော့ အောက်ပါ command ကို အသုံးပြုပြီး Version များရရှိလာတဲ့အခါ Node.js ကို install လုပ်တဲ့အဆင့် အောင်မြင်ပါတယ်။ တကယ်လို့ အောက်ပါ အတိုင်း ရလဒ်များမရနေတဲ့အခါ အစကနေ ပြန်လည်ပြုလုပ်ဖို့ရန် လိုအပ်ပါတယ်။

// Terminal
sanlinhtike@192 ~ % npm -v
9.5.1
sanlinhtike@192 ~ % node -v
v18.16.1
sanlinhtike@192 ~ % 

React ကို install ဖို့ရန် အောက်ပါအဆင့်အတိုင်း လေ့လာသွားလို့ရပါတယ်။

./ STPE 1

ကျွန်တော်တို့ရဲ့ Computer ကနေပြီးတော့ Terminal ကို လက်ရှိ Directory(Folder) အောက်ကနေပြီးတော့ ခေါ်ပေးပါ။ နောက်ပြီး Terminal ကနေပြီးတော့ အောက်က command ကိုအသုံးပြုပေးပါ။ ပြီးရင် enter ပါ။

npm create vite@latest

ဒါတွေပြီးသွားတဲ့အခါ Project name ဆိုပြီး ကျွန်တော်တို့ကို လာမေးပါလိမ့်မယ်။ ကြိုက်နှစ်သက်ရာ name ကို ရိုက်ထည့်ပေးလိုက်ပါ။ ကျွန်တော်ကနော့ react-hi ဆိုပြီး name ပေးလိုက်ပါမယ်။ ပြီးရင် enter ပါ။

// Terminal
sanlinhtike@Sans-MacBook-Air ReactDocs % npm create vite@latest 
✔ Project name: react-hi
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

Up/Down Arrow Key ကိုအသုံးပြုပြီး ကိုယ်လိုချင်တဲ့ နေရာကို ရောက်အောင်သွားပေးပါ။ ကျွန်တော်က React  ကိုသွားချင်တာကြောင့် Down arrow key ဖြင့် အောက်ကိုဆင်းသွားပါတယ်။ လိုချင်တဲ့နေကိုရောက်သွားရင် enter ခေါက်ပေးပါ။ နော်ထပ် ကျွန်တော်တို့က JavaScript ကိုအသုံးမှာဖြစ်တာကြောင့် JavaScript ကို ထပ်ပြီးရွေးချယ်ပါတယ်။

// Terminal
sanlinhtike@Sans-MacBook-Air ReactDocs % npm create vite@latest 
✔ Project name: … react-hi
✔ Select a framework: › React
? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
❯   JavaScript
    JavaScript + SWC
// Terminal
sanlinhtike@Sans-MacBook-Air ReactDocs % npm create vite@latest 
✔ Project name: … react-hi
✔ Select a framework: › React
✔ Select a variant: › JavaScript
 
Scaffolding project in /Users/sanlinhtike/Desktop/ReactDocs/react-hi...
 
Done. Now run:
 
  cd react-hi
  npm install
  npm run dev
 
sanlinhtike@Sans-MacBook-Air ReactDocs % cd react-hi

cd react-hi ဆိုပြီး ကျွန်တော်တို့ရဲ့ directory ထဲကို terminal ကနေဝင်သွားပေးပါ။ ထို့နောက် package တွေကို install ဖို့အတွက် npm install ဆိုပြီး ထပ်မံပြီး Termianl ကနေဆက်သွားပေးရမှာဖြစ်ပါတယ်။ နောက်ဆုံး npm run dev ကို ထပ်ပြီး run ပေးလိုက်မယ်ဆိုရင် react app ကိုစတင်အသုံးပြုလို့ရသွားပြီးဖြစ်ပါတယ်။