# Start Learning React

ဒီ section မှာက ကျတော့ ကျတော်တို့ က React ကိုစတင်ပြီးတော့ လေ့လာကြရအောင်

React က Component based architecture ဖြစ်တော့ ကျတော်တို့ အနေနဲ့ web page ပဲဖြစ်ဖြစ် web&#x20;

application ပဲဖြစ်ဖြစ် ရေးကြတဲ့အခါမှာ အကုန်လုံးကို ကျတော်တို့က ခွဲခြမ်းစိတ်ဖြာပြီးတော့ ခွဲရေးလို့ရသွားတယ်&#x20;

ပြီးတော့အဲလိုမျိုးရေးလိုက်ခြင်းအားဖြင့် ဘာအကျိုးကျေးဇူးရသွားလည်းဆိုတော့ ကျတော်တို့က code&#x20;

တွေကို ခနခန ပြန်ရေးနေစရာမလိုတော့ပါဘူး

အဲလောက်လေး နားလည်ထားရင်တော့ beginner အပိုင်းကတော့ တော်တော်လေး အဆင်ပြေနေပါပြီ&#x20;

ကဲ နောက်တမျိုးကို ဆက်လေ့လာကြရအောင်

ကျတော်တို့ react project တခုကိုကြည့်လိုက်ရင် ဘာထူးဆန်းတာတွေ့ရမလဲဆိုတော့ သူ့မှာ projectတစ်ခုလုံး မှာ&#x20;

ကြည့်လိုက်ရင် ကျွန်တော်တို့တွေ့ရမှာက html file လေးက တစ်ခုတည်းပဲရှိတာပါပဲ&#x20;

ပြီးတော့ ကျတော်တို့ က react ကို နောက်တမျိုးခေါ်ကြတာက SPA (single page application ) လို့ခေါ်ကြပါတယ်&#x20;

ဘာလို့ဆိုတော့ သူက html file တခုတည်းမှာပဲ လိုအပ်တဲ့ code တွေအကုန်လုံးကို javascript&#x20;

ကနေပြီးတော့ run ပေးသွားတာမလို့ပါ&#x20;

ဒါဆို ကျတော်တို့ react project တွေမှာ တွေ့တွေ့နေရတဲ့ html code တွေက html မဟုတ်ဘူးလားလို့ မေးစရာ&#x20;

ရှိလာပါတယ်&#x20;

ဟုတ်ပါတယ် အဲဒါတွေက html code တွေမဟုတ်ပါဘူး

ကျတော်တို့ကို သုံးရလွယ်အောင်ဆိုပြီးတော့ JSX ( javascript XML ) ဆိုတဲ့ tech လေးကို အသုံးပြုထားတာပါ&#x20;

သူက ဘယ်လိုမျိုးအလုပ်လုပ်ပေးတာလည်းဆိုတော့ ကျတော်တို့ developer တွေက ကျတော့ ရေးတဲ့အခါကျရင် html&#x20;

code တွေလိုမျိုးရေးလို့ရတယ်ဆိုပေမယ့် သူ့အလုပ်လုပ်ပုံက javascript ကနေပြီးတော့ html တွေကို createElement

&#x20;တွေနဲ့ ပြန်ထုတ်ပေးတာပါ မြင်သာအောင်ပြောရရင် compiler လိုမျိုးပေါ့ဗျာ

JSX ကို အသုံးပြုထားတာမလို့ ကျတော်တို့ ကReact ကို လေ့လာရတာပိုပြီးတော့ လွယ်ကူသွားစေတယ်

အဲအကြောင်းနဲ့ပတ်သက်ပီးတော့ လေ့လာချင်ရင်တော့ ဒီမှာသွားဖတ်လို့ရပါတယ်&#x20;

[JSX](https://en.wikipedia.org/wiki/JSX_\(JavaScript\))

ကျတော်တို့က JSX ကို မသုံးချင်ဘူးဆိုရင် react ကနေပြီးတော့ သူ့မှာ သုံးလို့ရတဲ့ဟာလေးတွေလည်းရှိပါတယ်&#x20;

တကယ်လို့ရေးချင်တယ်ဆိုရင် ရေးလို့ရပါတယ်

ဒီကုဒ်လေးကို ကြည့်လိုက်တဲ့ အခါကျရင် ဒီဟာ နှစ်ခုက ဘလိုကွာသွားလည်းဆိုတာကိုမြင်ရပါလိမ့်မယ်

```jsx
const JSX = () => { // this is using JSX in react code
    return (
        <h1>Hello</h1>
    )
}
import React from 'react'
const NotJSX = () => { // this is not use JSX in react code
    return(
         React.createElement("h1", null, "Hello")
     )
 }
```

ကျတော်တို့ jsx ကို မသုံးချင်ဘူးဆိုရင်တော့ `React.createElement( )` ဆိုတဲ့ဟာလေးကို အသုံးပြုပေးရမှာပါ

ကျတော်တို့က element တခု ကိုရေးတဲ့အခါမှာ အဲလိုမျိုးရေးရတာဖြစ်ပြီးတော့ nested ဖြစ်လာတဲ့အခါမှာ&#x20;

ကျတော်တို့က ဒီလိုလေးရေးရမှာပါ&#x20;

```jsx
const JSX = ()=>{
    return(
        <div>
            <h1>Hello</h1>
        </div>
    )
}
import React from 'react'
const NotJSX = () => {
    return(
        React.createElement("div",null,React.createElement("h1", null, "Hello"))
    )
}
```

ကျွန်တော်တို့က nested ဖြစ်လာတာနဲ့အမျှ ကျတော်တို့က ဒီလိုလေးရေးလာရတဲ့အခါ ကျရင် နောက်ပိုင်းကျရင်&#x20;

readable က မရှိဖြစ်သွားနိုင်တာမလို့ ကျတော်တို့က JSX ကိုအသုံးပြုပြီးတော့ ရေးကြတာပါ&#x20;

ပြီးတော့ JSX ကိုအသုံးပြုလိုက်ခြင်းအားဖြင့် ကျတော်တို့ တော်တော်လေး လေ့လာရတာ မြန်ဆန်လာပြီးတော့&#x20;

တော်တော်လေးကို လေ့လာရတာ လွယ်ကူလာတာပါ&#x20;

ဒီလောက်ဆိုရင်တော့ ကျတော်တို့ react မှာ ဘာကြောင့် jsx ကို အသုံးပြုတာလည်းဆိုတာကိုမြင်သာသွားမယ်

လို့ထင်ပါတယ်

JSX ကို နားလည်သွားပြီးရင်တော့ ကျတော်တို့ နောက်တဆင့်ကို လေ့လာလိုက်ကြရအောင်
