Start Learning React

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

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

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

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

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

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

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

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

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

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

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

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

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

ရှိလာပါတယ်

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

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

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

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

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

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

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

JSX

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

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

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

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 ဖြစ်လာတဲ့အခါမှာ

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

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 ဖြစ်လာတာနဲ့အမျှ ကျတော်တို့က ဒီလိုလေးရေးလာရတဲ့အခါ ကျရင် နောက်ပိုင်းကျရင်

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

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

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

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

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

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