# React Component

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

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

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

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

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

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

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

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

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

ဒီလိုလေးရေးလိုက်ပါမယ်&#x20;

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

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

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

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

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

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

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

```jsx
import Hello from './Hello.jsx'

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

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

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

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