React Component

ကျတော်တို့ က React ကို component based architecture လို့ပြောခဲ့တော့ ကျတော်တို့ နောက်ပိုင်းကျရင်

ဖန်တီးမယ့် file တွေအကုန်လုံးက လည်း component တွေပါပဲ

ဥပမာ app.jsx ဆိုရင် app component ပေါ့

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

အဲဒါတွေကို src (source) folder ထဲမှာ ရေးကြရမှာပါ အရင်ဆုံး ကျတော်တို့ hello.jsx ကို အရင် create

လုပ်လိုက်ပါမယ်

ပြီးရင်တော့ ကျတော်တို့ ဒီထဲမှာ function လေးတစ်ခုကိုရေးလိုက်ပါမယ်

ကျတော်တို့ hello.jsx ထဲမှာ

function Hello(){
    return (
        <h1>Hello</h1>
    )
}
export default Hello

ဒီလိုလေးရေးလိုက်ပါမယ်

ဒီမှာ ကျတော်တို့ file name ကိုပေးတဲ့အခါမှာ capital letter နဲ့ရေးကြတာများပါတယ်

ပြီးတော့ function name ကိုလည်း capital letter နဲ့ရေးရပါမယ်

ဘာလို့အဲလိုရေးခိုင်းတာလည်းဆိုတော့ react ကနေပီးတော့ component တွေကို capital letter အနေနဲ့

သတ်မှတ်ပေးထားတာမလို့ပါ

ပြီးတော့ကျတော်တို့ export default အနေနဲ့ထုတ်လိုက်တဲ့ component တွေကို ကျတော်တို့

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

app.jsx မှာ အသုံးပြုချင်တာဖြစ်တဲ့အတွက် app.jsx မှာ import လုပ်လိုက်ပါမယ်

import Hello from './Hello.jsx'

function App () {
    return (
        <Hello />
    )
}
export default App

ဒီလိုလေးရေးလိုက်ပါမယ် ပြီးရင်တော့ ကျတော်တို့ ctrl + s နဲ့ save လုပ်ပီးတော့ browser

မှာပြန်သွားကြည့်လိုက်ရင် h1 tag နဲ့ Hello ကိုမြင်ရမှာပါ

ဒီလောက်ဆိုရင်တော့ နည်းနည်းလေး နားလည်သွားမယ်လို့ထင်ပါတယ်