React အခြေခံလမ်းညွှန်: သုညမှစ၍ သင်၏ပထမဆုံး User Interface ကိုတည်ဆောက်ခြင်း

# React အခြေခံလမ်းညွှန်: သုညမှစ၍ သင်၏ပထမဆုံး User Interface ကိုတည်ဆောက်ခြင်း

React သည် User Interface များတည်ဆောက်ရန်အတွက် JavaScript library တစ်ခုဖြစ်သည်။ ၎င်းကို Facebook မှတီထွင်ပြီးထိန်းသိမ်းထားပြီး Frontend development တွင်လူကြိုက်အများဆုံးကိရိယာတစ်ခုဖြစ်လာသည်။ ဤလမ်းညွှန်သည်သင့်အားအခြေခံသဘောတရားများကိုအစမှအဆင့်ဆင့်နားလည်စေရန်နှင့်ရိုးရှင်းသော User Interface တစ်ခုကိုတည်ဆောက်ရန်ကူညီလိမ့်မည်။

## React ကိုဘာကြောင့်ရွေးချယ်သင့်သနည်း။

React တွင်အောက်ပါအားသာချက်များရှိသည်။

* **Component-based:** React သည် User Interface ကိုသီးခြား၊ ပြန်သုံးနိုင်သော component များအဖြစ်ခွဲထုတ်သည်။ ၎င်းသည် code ကိုထိန်းသိမ်းရန်နှင့်နားလည်ရန်ပိုမိုလွယ်ကူစေသည်။
* **Declarative:** React သည် declarative programming style ကိုအသုံးပြုသည်။ ဆိုလိုသည်မှာသင်တင်ပြလိုသည့်အရာကိုသာဖော်ပြရန်လိုအပ်ပြီး React သည် update များနှင့် render လုပ်ခြင်းကိုအလိုအလျောက်ကိုင်တွယ်လိမ့်မည်။
* **Efficient:** React သည် virtual DOM နှင့် smart diff algorithm ကိုအသုံးပြုပြီး User Interface ကိုထိရောက်စွာ update လုပ်နိုင်ပြီးမလိုအပ်သော render လုပ်ခြင်းကိုလျှော့ချနိုင်သည်။
* **ကြီးမားသော Community Support:** React တွင်ကြီးမားသော community နှင့်ကြွယ်ဝသော ecosystem ရှိသည်။ သင်၏ development ကိုကူညီရန်အတွက်သင်ခန်းစာများ၊ library များနှင့် tools များစွာကိုသင်ရှာဖွေနိုင်သည်။
* **Cross-platform Capability:** React Native သည် React ကို အသုံးပြု၍ native mobile application များ (iOS နှင့် Android) ကို develop လုပ်ရန်ခွင့်ပြုသည်။

## ပြင်ဆင်မှုများ

မစတင်မီသင်၏ကွန်ပျူတာတွင်အောက်ပါကိရိယာများတပ်ဆင်ထားကြောင်းသေချာပါစေ။

* **Node.js:** Node.js သည် React development tools များကို run ရန်အတွက် JavaScript runtime environment တစ်ခုဖြစ်သည်။ သင်သည် [https://nodejs.org/](https://nodejs.org/) မှ download လုပ်၍ install လုပ်နိုင်သည်။
* **npm သို့မဟုတ် yarn:** npm (Node Package Manager) နှင့် yarn သည် React ၏ dependency များကို install လုပ်ရန်နှင့်စီမံရန်အတွက် JavaScript package manager များဖြစ်သည်။ Node.js ကို install လုပ်သောအခါ npm ကိုများသောအားဖြင့် install လုပ်သည်။ yarn ကို [https://yarnpkg.com/](https://yarnpkg.com/) မှ install လုပ်နိုင်သည်။

## သင်၏ပထမဆုံး React Application ကိုဖန်တီးခြင်း

React project တစ်ခုကိုအမြန်ဖန်တီးရန် `create-react-app` ကိုအသုံးပြုပါမည်။

1. **npm ကိုအသုံးပြု၍ဖန်တီးခြင်း:**

   ```bash
   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start

2. yarn ကိုအသုံးပြု၍ဖန်တီးခြင်း:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

အထက်ပါ command များကို execute လုပ်ပြီးနောက် create-react-app သည် my-first-react-app အမည်ရှိ directory တစ်ခုကိုအလိုအလျောက်ဖန်တီးပြီး React project တစ်ခုကိုထို directory တွင် initialize လုပ်လိမ့်မည်။ npm start သို့မဟုတ် yarn start command သည် development server ကိုစတင်လိမ့်မည်။ သင်၏ React application ကိုကြည့်ရှုရန် browser တွင် http://localhost:3000 သို့သွားနိုင်သည်။

Directory Structure

create-react-app မှဖန်တီးထားသော project directory structure မှာအောက်ပါအတိုင်းဖြစ်သည်။

my-first-react-app/
├── node_modules/         # 
├── public/               # (HTML )
│   ├── index.html        # HTML
│   └── ...
├── src/                  # React 
│   ├── App.css           # App CSS
│   ├── App.js            # App 
│   ├── App.test.js       # App 
│   ├── index.css         # CSS
│   ├── index.js          # JavaScript
│   ├── logo.svg          # React logo
│   └── ...
├── .gitignore            # Git 
├── package.json          # 
├── README.md             # 
└── yarn.lock             # (yarn )
```

## React 

React  React  

 `src/App.js`  `App` 

```javascript
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;
```

**:**

* `import React from 'react';` React 
* `function App() { ... }` `App` 
* `return ( ... )`  JSX  
* `export default App;`  `App`  

**JSX (JavaScript XML)**

JSX  JavaScript  HTML   JSX  `...`  JSX   Babel  JavaScript 

## App 

 `App`  

```javascript
import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const increment = () => {\n    setCount(count + 1);\n  };\n\n  const decrement = () => {\n    setCount(count - 1);\n  };\n\n  return (\n    \n      \n\n# ကောင်တာ\n\n      လက်ရှိရေတွက်မှု: {count}\n\n      +\n      -\n    \n  );\n}\n\nexport default App;\n```\n\n**ပြုပြင်ပြောင်းလဲမှုမှတ်စုများ:**\n\n* `import React, { useState } from 'react';`  `useState` Hook ကိုထည့်သွင်းပါ။ `useState` သည် function component များတွင် state ထည့်ရန်အတွက် React Hook တစ်ခုဖြစ်သည်။\n* `const [count, setCount] = useState(0);`  `useState` Hook ကိုသုံးပြီး `count` ဟုခေါ်သော state variable တစ်ခုကိုဖန်တီးပြီး `0` ဖြင့်စတင်ပါ။ `setCount` သည် `count` state ကို update လုပ်ရန် function တစ်ခုဖြစ်သည်။\n* `const increment = () => { setCount(count + 1); };` `count` state ကို 1 တိုးရန်အတွက် `increment` ဟုခေါ်သော function တစ်ခုကိုသတ်မှတ်ပါ။\n* `const decrement = () => { setCount(count - 1); };` `count` state ကို 1 လျှော့ချရန်အတွက် `decrement` ဟုခေါ်သော function တစ်ခုကိုသတ်မှတ်ပါ။\n* `လက်ရှိရေတွက်မှု: {count}\n`  စာမျက်နှာတွင် `count` state ၏တန်ဖိုးကိုပြသပါ။  `{count}` သည် JSX code တွင် JavaScript variable ကိုထည့်ရန်အတွက် JSX expression တစ်ခုဖြစ်သည်။\n* `+` နှင့် `-` သည် `increment` နှင့် `decrement` function များကိုအသီးသီးချိတ်ဆက်ထားသော button နှစ်ခုကိုဖန်တီးသည်။  `onClick` သည် button ကိုနှိပ်သောအခါသတ်မှတ်ထားသော function ကို execute လုပ်ရန်အတွက် event handler တစ်ခုဖြစ်သည်။\n\n`src/App.js` ဖိုင်ကိုသိမ်းပြီးနောက် browser သည်အလိုအလျောက် refresh လုပ်လိမ့်မည်၊ ရိုးရှင်းသောကောင်တာတစ်ခုကိုသင်တွေ့လိမ့်မည်။  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* styles object ကိုသုံးပြီး CSS class ကိုရည်ညွှန်းပါ */}
      

# ကောင်တာ

      လက်ရှိအရေအတွက်: {count}

      +
      -
    
  );
}

export default App;
```

**သာမန် CSS ဖိုင်ကိုသုံးခြင်း:**

သင်သည် သာမန် CSS ဖိုင်ကိုသုံးပြီး တစ်ကမ္ဘာလုံးဆိုင်ရာ စတိုင်လ်ကိုလည်း သတ်မှတ်နိုင်သည်။ `src/index.css` ဖိုင်ထဲတွင် တစ်ကမ္ဘာလုံးဆိုင်ရာ စတိုင်လ်ကို သတ်မှတ်နိုင်သည်။

ဥပမာအနေနဲ့ အောက်ပါ CSS စတိုင်လ်ကို ထည့်ပါ:

```css
body {
  font-family: sans-serif;
}
```

ဒီစတိုင်လ်က application ရဲ့ `body` element တစ်ခုလုံးကို အသုံးပြုပါလိမ့်မယ်။

## နောက်တစ်ဆင့်

ဂုဏ်ယူပါတယ်၊ သင်သည် သင်၏ပထမဆုံး React application ကို ပြီးမြောက်သွားပါပြီ။ နောက်ပိုင်းတွင် သင်သည် React အကြောင်းကို ပိုမိုလေ့လာနိုင်သည်၊ ဥပမာ:

* **Component ဆက်သွယ်မှု:** မတူညီတဲ့ component တွေကြားမှာ ဘယ်လိုဆက်သွယ်ရမလဲဆိုတာကို လေ့လာပါ။
* **Form ကိုင်တွယ်ခြင်း:** form တွေကို ဘယ်လိုဖန်တီးပြီး ကိုင်တွယ်ရမလဲဆိုတာကို လေ့လာပါ။
* **Routing:** React Router ကိုသုံးပြီး စာမျက်နှာများစွာပါဝင်တဲ့ application ကို ဘယ်လိုဖန်တီးရမလဲဆိုတာကို လေ့လာပါ။
* **Redux သို့မဟုတ် Context API:** application ရဲ့ state ကို ဘယ်လိုစီမံခန့်ခွဲရမလဲဆိုတာကို လေ့လာပါ။
* **Hooks:** `useEffect`၊ `useContext` စတာတွေလို React Hooks အကြောင်းကို နက်နက်ရှိုင်းရှိုင်း လေ့လာပါ။

React ဟာ အမြဲတမ်းလေ့ကျင့်သင်ယူနေရမယ့် နည်းပညာတစ်ခုဆိုတာကို မှတ်ထားပါ။ ပျော်ရွှင်စွာ သင်ယူနိုင်ပါစေ!