React.js ကို အသုံးပြု၍ Web Application တစ်ခု ဖန်တီးခြင်းဆိုင်ရာ သင်ခန်းစာ

React.js သည် အပြန်အလှန်တုံ့ပြန်နိုင်သော user interfaces (UIs) များတည်ဆောက်ရန်အသုံးပြုသည့် ရေပန်းစားသော front-end development library တစ်ခုဖြစ်သည်။ Facebook မှ တီထွင်ထားသော React.js ကို Instagram၊ Airbnb နှင့် WhatsApp အပါအဝင် အဓိကကုမ္ပဏီများစွာက အသုံးပြုခဲ့ကြသည်။ ထိရောက်မြန်ဆန်ပြီး တုံ့ပြန်မှုကောင်းသော web application များတည်ဆောက်လိုပါက React.js သည် သင့်အတွက် မှန်ကန်သောရွေးချယ်မှုဖြစ်နိုင်သည်။

Pendahuluan

စတင်မလုပ်ဆောင်မီ၊ သင့်ကွန်ပျူတာတွင် Node.js နှင့် npm (Node Package Manager) ကို ထည့်သွင်းထားကြောင်း သေချာပါစေ။ Node.js နှင့် npm တို့သည် React.js ကို အသုံးပြု၍ ဝဘ်အပလီကေးရှင်းများ တည်ဆောက်ရန် လိုအပ်သော ပတ်ဝန်းကျင်နှင့်ကိရိယာများကို ပံ့ပိုးပေးသောကြောင့် မရှိမဖြစ်လိုအပ်ပါသည်။

အဆင့် ၁: React Project ကို initialize လုပ်ခြင်း

React.js application အသစ်တစ်ခု ဖန်တီးဖို့အတွက်၊ ကနဦး configuration ကို လျှော့ချပေးတဲ့ application creation tool တစ်ခုဖြစ်တဲ့ Create React App ကို အသုံးပြုနိုင်ပါတယ်။ အောက်ပါ command ကို terminal ဒါမှမဟုတ် command prompt မှာ run ပါ။

“`ဘေ့စ်
npx create-react-app my-app
cd my-app
npm စတင်
``

ဒီ command က `my-app` ဆိုတဲ့ directory အသစ်တစ်ခု ဖန်တီးပြီး လိုအပ်တဲ့ dependencies အားလုံးကို download လုပ်ပြီး install လုပ်ကာ development server ကို စတင်ပါလိမ့်မယ်။ အခုဆိုရင် browser တစ်ခုဖွင့်ပြီး `http://localhost:3000` ကို ဝင်ရောက်ပြီး default React.js application ကို ကြည့်ရှုနိုင်ပါပြီ။

အဆင့် ၂: ဖိုင်တွဲဖွဲ့စည်းပုံ

Create React App က ဖန်တီးထားတဲ့ folder structure ကို ကြည့်ကြရအောင်။

``
ကျွန်ုပ်၏-အက်ပ်/
├── node_modules/
├── အများပြည်သူ/
│ └── အညွှန်း.html
└── src/
├── အက်ပ်.css
├── အက်ပ်.js
├── အက်ပ်.စမ်းသပ်မှု.js
├── အညွှန်း.css
├── အညွှန်း.js
└── လိုဂို.svg
``

– `node_modules/`: သင်၏ ပရောဂျက် မှီခိုမှုအားလုံး ပါဝင်သည်။
– `public/`: အပလီကေးရှင်း၏ ဝင်ပေါက်ဖြစ်သော `index.html` အပါအဝင် static ဖိုင်များ ပါဝင်သည်။
– `src/`: သင့်အချိန်အများစုကို ကုန်ဆုံးမယ့်နေရာ။ React components များ၊ CSS files များနှင့် အခြား asset များပါဝင်သည်။

အဆင့် ၃: မလိုအပ်သောဖိုင်များကို ဖျက်ခြင်း

သန့်ရှင်းတဲ့ stylesheet တစ်ခုနဲ့စဖို့အတွက် မလိုအပ်တဲ့ဖိုင်တွေကို ဖျက်လိုက်ရအောင်။ `src/` folder ထဲက `logo.svg` နဲ့ `App.test.js` တွေကို ဖျက်လိုက်ပါ။ ပြီးရင် `App.css` နဲ့ `index.css` တွေကိုဖွင့်ပြီး အဲဒီထဲက CSS code အားလုံးကို ဖျက်လိုက်ပါ။

အဆင့် ၄: သင့်ရဲ့ ပထမဆုံး အစိတ်အပိုင်းကို ဖန်တီးခြင်း

React.js က component-based ဖြစ်ပါတယ်။ Component တွေက သင့်ရဲ့ web application ရဲ့ building blocks တွေပါ။ ကျွန်တော်တို့ရဲ့ ပထမဆုံး component ကို ဖန်တီးဖို့ `App.js` ကို modify လုပ်ကြည့်ရအောင်။

`src/App.js` ကိုဖွင့်ပြီး အောက်ပါကုဒ်ဖြင့် အစားထိုးပါ။

"`jsx
'တုံ့ပြန်မှု' မှ တုံ့ပြန်မှုကို တင်သွင်းပါ။
'./App.css' ကို တင်သွင်းပါ။

လုပ်ဆောင်ချက် အက်ပ်() {
ပြန်လာ (

);
}

မူရင်းအက်ပ်ကို တင်ပို့ပါ။
``

JavaScript အတွင်း HTML ကဲ့သို့သော syntax ရေးသားနိုင်စေမည့် JSX (JavaScript XML) ကို အသုံးပြု၍ `App.js` အတွင်းရှိ React code ကို initialize လုပ်ပါ။ သင်၏ပြောင်းလဲမှုများကို save လုပ်ပြီး ရလဒ်များကို သင်၏ browser တွင် ကြည့်ရှုပါ။

အဆင့် ၅: အစိတ်အပိုင်းအသစ်များ ထည့်သွင်းခြင်း

အခု components အသစ်တွေကို ထည့်ကြည့်ရအောင်။ `src` folder ထဲမှာ `components` လို့ခေါ်တဲ့ folder အသစ်တစ်ခု ဖန်တီးပါ။ ပြီးရင် `components` folder ထဲမှာ `HelloWorld.js` ဆိုတဲ့ ဖိုင်အသစ်တစ်ခု ဖန်တီးပါ။

"`jsx
'တုံ့ပြန်မှု' မှ တုံ့ပြန်မှုကို တင်သွင်းပါ။

မင်္ဂလာပါကမ္ဘာ() လုပ်ဆောင်ချက် {
ပြန်လာ (

);
}

ပုံသေ HelloWorld ကို တင်ပို့ပါ။
``

`App.js` ကိုဖွင့်ပြီး ကျွန်ုပ်တို့ဖန်တီးထားသော `HelloWorld` component ကို import လုပ်ပါ။

"`jsx
'တုံ့ပြန်မှု' မှ တုံ့ပြန်မှုကို တင်သွင်းပါ။
'./App.css' ကို တင်သွင်းပါ။
'./components/HelloWorld' မှ HelloWorld ကို import လုပ်ပါ။

လုပ်ဆောင်ချက် အက်ပ်() {
ပြန်လာ (

);
}

မူရင်းအက်ပ်ကို တင်ပို့ပါ။
``

အခုဆိုရင် `App.js` က `HelloWorld` component ကို main page မှာ render လုပ်ပါတယ်။

အဆင့် ၆: useState ဖြင့် State Management ထည့်သွင်းခြင်း

React မှာ state ကို စီမံခန့်ခွဲဖို့အတွက် အလွန်အစွမ်းထက်တဲ့ hook တွေရှိပါတယ်။ ကျွန်တော်တို့ရဲ့ application မှာ state တချို့ထည့်ကြည့်ရအောင်။ ဥပမာအားဖြင့်၊ button တစ်ခုကို နှိပ်တိုင်း တိုးလာတဲ့ counter တစ်ခုထည့်ကြည့်ရအောင်။

`HelloWorld.js` ကိုဖွင့်ပြီး state နှင့် `useState` hook ကိုထည့်ပါ။

"`jsx
'react' မှ React, { useState } ကို import လုပ်ပါ။

မင်္ဂလာပါကမ္ဘာ() လုပ်ဆောင်ချက် {
const [ရေတွက်၊ ရေတွက်သတ်မှတ်] = useState(0);

const incrementCount = () => {
ရေတွက်မှု + ၁ ကို သတ်မှတ်ပါ။
}

ပြန်လာ (

);
}

ပုံသေ HelloWorld ကို တင်ပို့ပါ။
``

`count` အခြေအနေကို 0 တန်ဖိုးဖြင့် စတင်ပြီး ခလုတ်ကို နှိပ်တိုင်း `incrementCount` လုပ်ဆောင်ချက်သည် ဤတန်ဖိုးကို တိုးစေမည်ဖြစ်သည်။

အဆင့် ၇: စတိုင်လ်ထည့်ခြင်း

styling ထည့်ဖို့အတွက် `App.css` ဖိုင်ထဲမှာ CSS ကိုသုံးနိုင်သလို styled-components လိုမျိုး CSS-in-JS library ကိုလည်းသုံးနိုင်ပါတယ်။ အခုချိန်မှာ standard CSS နဲ့ပဲ ဆက်သွားရအောင်။

`App.css` ကိုဖွင့်ပြီး စတိုင်လ်အချို့ထည့်ပါ-

"`css
.အက်ပ် {
text-align: စင်တာ၊
}

.App-header {
နောက်ခံအရောင်: ၂၈၂c၃၄;
အနည်းဆုံးအမြင့်: 100vh;
ပြသမှု- flex;
flex-direction: ကော်လံ;
align-items: ဗဟို;
အကြောင်းပြ-အကြောင်းအရာ- ဗဟို;
ဖောင့်အရွယ်အစား: calc(10px + 2vmin);
အရောင်: အဖြူ;
}

ခလုတ် {
padding: 10px 20px;
margin-top: 20px;
ဖောင့်အရွယ်အစား: 16px;
}
``

အဆင့် ၈: React Router ဖြင့် Routing ထည့်သွင်းခြင်း

ကျွန်ုပ်တို့၏ application တွင် မတူညီသော စာမျက်နှာများအကြား navigation ထည့်သွင်းရန်အတွက် React Router ကို အသုံးပြုနိုင်ပါသည်။ အောက်ပါ command ကို အသုံးပြု၍ React Router ကို install လုပ်ပါ-

“`ဘေ့စ်
npm react-router-dom ကို install လုပ်ပါ။
``

ထို့နောက် `components` folder ထဲတွင် `Home.js` နှင့် `About.js` ဟူသော components အသစ်နှစ်ခုကို ဖန်တီးပါ။

`Home.js`:
"`jsx
'တုံ့ပြန်မှု' မှ တုံ့ပြန်မှုကို တင်သွင်းပါ။

Home() လုပ်ဆောင်ချက် {
ပြန်လာ (

);
}

မူရင်း Home ကို တင်ပို့ပါ။
``

`.js အကြောင်း`:
"`jsx
'တုံ့ပြန်မှု' မှ တုံ့ပြန်မှုကို တင်သွင်းပါ။

အကြောင်း လုပ်ဆောင်ချက် () {
ပြန်လာ (

);
}

မူရင်းအကြောင်း တင်ပို့ပါ။
``

ထို့နောက် `App.js` ကိုဖွင့်ပြီး routing ကို စီစဉ်သတ်မှတ်ပါ-

"`jsx
'တုံ့ပြန်မှု' မှ တုံ့ပြန်မှုကို တင်သွင်းပါ။
'react-router-dom' မှ { BrowserRouter ကို Router, Route, Link, Switch အဖြစ် } import;
'./App.css' ကို တင်သွင်းပါ။
'./components/HelloWorld' မှ HelloWorld ကို import လုပ်ပါ။
'./components/Home' မှ Home ကို import လုပ်ပါ။
'./components/About' မှ အကြောင်း (About) ကို တင်သွင်းပါ။

လုပ်ဆောင်ချက် အက်ပ်() {
ပြန်လာ (

);
}

မူရင်းအက်ပ်ကို တင်ပို့ပါ။
``

ဒီနည်းနဲ့ ကျွန်တော်တို့ရဲ့ application မှာ မတူညီတဲ့ page တွေကြားမှာ အခြေခံ navigation ကို ထည့်သွင်းထားပါတယ်။

ပိတ်

အဲဒါက React.js ကိုသုံးပြီး web application တစ်ခုဖန်တီးဖို့အတွက် အခြေခံသင်ခန်းစာပါ။ project setup, component creation, state management, styling နဲ့ routing တွေကို ကျွန်တော်တို့ လေ့လာပြီးပါပြီ။ React.js မှာ ပိုမိုရှုပ်ထွေးတဲ့ web application တွေတည်ဆောက်ဖို့ ကူညီပေးနိုင်တဲ့ libraries နဲ့ tools အများအပြားပါဝင်တဲ့ ကြွယ်ဝတဲ့ ecosystem တစ်ခုရှိပါတယ်။

အဆင်ပြေပါစေ၊ ဒီသင်ခန်းစာက React.js နဲ့ သင့်ရဲ့ခရီးကို စတင်ဖို့ ကူညီပေးလိမ့်မယ်လို့ မျှော်လင့်ပါတယ်။