React project file structure

File structure ကိုလည်းလေ့လာ လိုက်ကြရအောင်

ကျတော်တို့ create လုပ်လိုက်တဲ့ folder ကို ကြည့်လိုက်တဲ့အခါမှာ ဘာကိုတွေ့ရမလဲဆိုတော့

Src folder လေးကို မြင်ရပါလိမ့်မယ် အဲဒါလေးက ကျတော်တို့ ရဲ့ react project တခုလုံးရဲ့ folder ပါပဲ

Nodes-modules ကိုလည်းမြင်ရပါလိမ့်မယ် အဲဒါကတော့ ကျတော်တို့ရဲ့ project မှာလိုအပ်တဲ့ file တွေ library

တွေကို install လုပ်ပေးထားတဲ့ ဟာလေးပေါ့ ပြီးရင် ကျတော်တို့ package.json ဆိုတဲ့ ဖိုင်လေးကို

အရင်ကြည့်လိုက်ကြရအောင်ဗျ အဲမှာကြည့်လိုက်ရင် dependencies မှာ install လုပ်ထားတာက react နဲ့

react-dom လေး၂ခုကိုပဲ install လုပ်ပေးထားတာကိုမြင်ရပါလိမ့်မယ်

ပြီးတော့သူရဲ့အောက်မှာက dev-dependencies ဆိုတဲ့ object တခုကိုပါမြင်ရပါလိမ့်မယ် သူက ကျတော့

ကျတော်တို့ project ကို development ဖက်မှာ ပိုအဆင်ပြေအောင်လို့ လုပ်ထားပေးတဲ့အရာတွေပါ

အဲဒါလေးကို ကြည့်လို့ပြီးသွားရင် ခုနကပြောခဲ့တဲ့ ၁ ခုတည်းသော html file ကို ကျတော်တို့ ဝင်ကြည့်လိုက်ရအောင်

ဒီထဲကိုဝင်ကြည့်ရင် ဘာတွေ့ရမလဲဆိုတော့ html ရဲ့ body ထဲမှာ div id=”root” လို့ပေးထားတဲ့ဟာလေးတခုကိုပဲ

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

ဒီထဲမှာလာပြီးတော့ render ချပေးသွားမှာပါပြီးတော့သူ့အောက်ကို

ဆက်ကြည့်လိုက်ရင် script tag ထဲမှာ main.jsx ကို connect လုပ်ထားတာကိုမြင်ရပါလိမ့်မယ်

inedex.html

main.jsx ကို မြင်ရတော့ ကျတော်တို့က npm run dev လို့လုပ်လိုက်တဲ့အခါမှာ ဦးဆုံး run ပေးတဲ့ file က

main.jsx ဖြစ်တာကို ကျတော်တို့ သတ်မှတ်ပေးလို့ရပါတယ်

ကျတော်တို့ main.jsx ထဲကို ဝင်ကြည့်လိုက်တဲ့အခါမှာ

reactDom တွေကို အသုံးပြုပြီးတော့ ခုနက တွေ့ခဲ့တဲ့ div id=”root” ထဲကို render

လုပ်ပေးထားတာကိုမြင်ရပါလိမ့်မယ် ဘယ်ဟာကို render လုပ်ထားတာလည်းဆိုတော့ ကျတော်တို့

ဆက်ကြည့်လိုက်တော့ app.js ဆိုတဲ့ file ကို render လုပ်ထားတာကိုမြင်ရပါလိမ့်မယ်

main.jsx

ဒါဆိုရင် ကျတော်တို့ app.jsx ဆိုတဲ့ ဖိုင်ထဲကိုကျတော်တို့တချက်ကြည့်လိုက်ကြရအောင်

ကျတော်တို့ app.jsx ဖိုင်ထဲကို ဝင်ကြည့်လိုက်ရင် ကျတော်တို့တွေ့ရမှာက browser မှာပေါ်နေတဲ့ html

တွေကို တွေ့ရပါလိမ့်မယ်

အဲဒါကိုကြည့်လိုက်ခြင်းအားဖြင့် ဘယ်လိုမျိုးသတ်မှတ်လို့ရလည်းဆိုတော့ app.jsxဆိုတဲ့ file လေးက

ကျတော်တို့ project ရဲ့ နောက်ဆုံး file လေး လို့ပြောလို့ရမယ် main.jsx က ကျတော့ သူက app.jsx က

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

အတွက်ပိုကောင်းမှာပါ နောက်ပိုင်း ကျတော်တို့ redux တို့ context api တို့လိုမျိုး ဟာတွေအတွက်ကတော့

ဒီထဲမှာ လာရေးကြပါတယ်