React Render HTML

function App() {
  return <h1>Hello Ract!</h1>
}
 
export default App;

အပေါ်မှာတွေ့မြင်ရတဲ့ Code က App.jsx မှာ ကျွန်တော်တို့ရေးသားခဲ့တဲ့ Code ပါ။ အတူတူ လေ့လာကြည့်ရကြည့်ရအောင်။ ရေးထားတဲ့ code က JavaScript ရဲ့ function ​sentence ရေးတဲ့ပုံနဲ့ တူတူပါပဲ့။ သူ့ကိုက React မှာ Componentn လို့ခေါ်ပါတယ်။ React component တစ်ခုဖြစ်ဖို့ function ဆိုတဲ့ keyword ကိုအသုံးပြုထားပါတယ်။ သူ့ရဲ့နောက်ကနေ App ဆိုတဲ့ function name (တစ်နည်းအားဖြင့် component name) ကိုရေးသားရမှာပါ။ name ရဲ့နောက်ကနေ parameter တွေကိုလက်ခံဖို့ () လိုက်ပါတယ်။ ထို့နောက် {} (curly brackets) ကိုရေးပါတယ်။ သူ့ရဲ့ အတွင်းထဲမှာ return ဆိုတဲ့ keywork နဲ့ h1 Element တစ်ခုကို မြင်တွေ့ရမှာပါ။

ဒါသည် local code အနေဖြင့်ရှိနေပြီးတော့ တစ်ခြားဖိုင်တွေကပါ App Component ကိုအသုံးပြုချင်တယ်ဆိုရင် Export ထုတ်ပေးဖို့လိုအပ်ပါတယ်။ ဒါမှသာလျှင် တစ်ခြားသော component တွေကနေပြီးတော အသုံးပြုလို့ရမှာပါ။ component ကို export ထုတ်ဖို့ရန် export default App လို့ရေးပေးခဲ့ပါတယ်။ ဒါကြောင့် App Component ကို main.jsx ဖိုင်ကနေ import လုပ်ပြီးအသုံးပြုထားတာကို မြင်တွေ့ရမှာပါ။ import လုပ်ထားတဲ့ဖိုင်ကို ပြန်ခေါ်သုံးစေချင်တဲ့အခါ Component name ဖြစ်တဲ့ App ကို <App /> ဒီလိုပြန်ခေါ်သုံးရင်ရပါတယ်။ self closing tags လို့ခေါ်ပါတယ်။`

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
// import './index.css'
 
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

ဥပမာအတိုင်းပဲ့ပေါ့နော် ကျွန်တော်တို့က Component ကိုရေးတိုင်း export  ပေးပြီး တခြားသော Component တွေကနေတစ်ဆင့် အသုံးပြုချင်တဲ့အခါ import လုပ်ပေးရမှာပါ။