React App တစ်ခုကို ၅ မိနစ်အတွင်း ဘယ်လိုဖန်တီးမလဲ?
Tags: react
Published: 2020-12-27 06:14:46

## 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](https://nodejs.org/en/download/) ကို install လုပ်ထားဖို့လိုပါမယ်။ [NodeJS](https://nodejs.org/en/download/) ဆိုတာက java script runtime environment တစ်ခုပါ။ ဆိုလိုတာက java script ကို web-browser အပြင်တစ်ခြားနေရာ (ဥပမာ backend service) တွေမှာအသုံးပြု့လို့ရအောင် ဖန်းတီးထားတဲ့နည်းပညာဖြစ်ပါတယ်။ [ဒီလင့်](https://nodejs.org/en/download/) မှာ install သွားလုပ်လို့ရပါတယ်။

- [NPM](https://www.npmjs.com/) ဆိုတာ Node Package Manager ဖြစ်ပြီး application တွေ development လုပ်တဲ့အချိန်မှာ လိုအပ်တဲ့ library တွေ၊ Package တွေကို စုစည်းထားပေးတဲ့ source ကြီးပဲဖြစ်ပါတယ်။ Node installation ပြီးတဲ့အခါ npm command ကို စတင်သုံးနိုင်ပါပြီ။ သပ်သပ်ထပ်ပြီး install လုပ်ပေးဖို့ မလိုပါဘူး။

## Check Node & NPM versions
အရင်ဆုံး မိမိ့စက်ထဲမှာ [NodeJS](https://nodejs.org/en/download/) နဲ့ [NPM](https://www.npmjs.com/) versions တွေအရင်စစ်ကြည့်လို့ရပါတယ်။ စစ်ကြည့်ဖို့ဆိုရင်တော့ Window User အနေနဲ့ဆိုရင်တော့ **Command Prompt**, Linux, Mac သမားတွေကတော့ **Terminal** ကိုဖွင့်ပြီး အောက်ပါအတိုင်းစစ်ဆေးနိုင်ပါတယ်။
#### How to check Node version?
```node -v```
![check-node-version](https://dev-to-uploads.s3.amazonaws.com/i/a1y6lztnj5k1vaj11nj2.png)
  
#### How to check NPM version?
```npm -v```
![check-npm-version](https://dev-to-uploads.s3.amazonaws.com/i/xzglxsr66chd67uma0d1.png)

## Get Started React App
- [WebPack](https://webpack.js.org/) ကိုအသုံးပြု့ပြီး React Application တစ်ခုတည်ဆောက်ခြင်း။
- [`<script` tag အတွင်းထည့်သွင်းရေးသားခြင်း](https://reactjs.org/docs/add-react-to-a-website.html)။
- [Create React App](https://create-react-app.dev/) ကိုအသုံးပြုပြီး React Application တစ်ခုတည်ဆောက်ခြင်း။
**Note** တစ်ခြားနည်းလမ်းတွေလည်းရှိ့ပါသေးတယ်။ အသေးစိတ်ဖတ်ခြင်ရင်တော့ [ဒီလင့်](https://reactjs.org/docs/create-a-new-react-app.html) မှာသွားရောက်ဖတ်ရှု့နိုင်ကြပါတယ်။

အထက်ပါသုံးခု့ထဲကမှ [Create React App](https://create-react-app.dev/) ကိုအသုံးပြုပြီး React Application တစ်ခုတည်ဆောက်ခြင်း အကြောင်းပြောပြသွားမှာဖြစ်ပါတယ်။
## Intro to Create React App
[Create React App](https://create-react-app.dev/) ဆိုတာက 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](https://create-react-app.dev/) ရဲ့ Welcome Page ကိုမြင်ရမှာပဲဖြစ်ပါတယ်။

![react-app-running](https://dev-to-uploads.s3.amazonaws.com/i/qfss6atgqxt938et3607.png)

<a href="https://ko-fi.com/ayarhlaine">
<img height="12" width="30%" src="https://res.cloudinary.com/practicaldev/image/fetch/s--KS7c42cU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.ko-fi.com/cdn/kofi1.png%3Fv%3D2" alt="Buy Me a Coffee at ko-fi.com" loading="lazy">
</a>

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