ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်
React Native ဆိုတာ Meta (Facebook) ကနေ ဖန်တီးထားတဲ့ framework ဖြစ်ပြီး React ရဲ့ component/state/props concept တွေကို reuse လုပ်ပေမယ့် web browser အစား native mobile app (iOS, Android) ကို build ပေးပါတယ်။ HTML tag (div, span) အစား View, Text, Image ကဲ့သို့ native component တွေကို သုံးပြီး, ဒီ component တွေကို platform တစ်ခုစီရဲ့ native UI element (iOS UIView, Android View) အဖြစ် compile ချပေးပါတယ် — ဒါကြောင့် 'native app' လို့ ခေါ်တာပါ, WebView ထဲမှာ website run နေတာ မဟုတ်ပါဘူး။
လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်
Company တွေက React Native ကို codebase တစ်ခုတည်းနဲ့ iOS/Android နှစ်ခုစလုံးအတွက် app ထုတ်ဖို့ ရွေးလေ့ရှိပါတယ် — Instagram, Discord, Shopify app တွေက React Native ကို production မှာ သုံးနေကြပါတယ်။ React web developer တစ်ယောက်အတွက် React Native ကို လေ့လာတာက JSX syntax, component lifecycle, hooks concept တွေ အားလုံး တူညီနေလို့ learning curve သိပ်မမြင့်ပါဘူး — ကွာတာက UI component set နဲ့ mobile-specific API များပါ။
Code နမူနာ
Web (React) Mobile (React Native)
----------------- ------------------------
<div> <View>
<span>, <p> <Text>
<img> <Image>
<button onClick> <TouchableOpacity onPress>
CSS file/className StyleSheet objectReact web component ကို React Native component နဲ့ ခွဲခြားနိုင်မည်။၅ မိနစ် စမ်းကြည့်
React (web) မှာသုံးဖူးတဲ့ HTML tag ၃-၄ ခုကို ရေးပြီး ၎င်းတို့ရဲ့ React Native equivalent ကို ခန့်မှန်းရေးကြည့်ပါ။
သတိလေးတစ်ချက်
ဒီ tutorial က React (component, props, state, hooks) ကို အခြေခံအားဖြင့် နားလည်ပြီးသားလို့ ယူဆထားပါတယ် — မသေချာရင် React tutorial ကို အရင်ပြန်ကြည့်ပါ။