Your First App — Hello World

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

Expo project ရဲ့ entry point က App.js (သို့) App.tsx ဖြစ်ပြီး, React component function တစ်ခုကို default export လုပ်ထားပါတယ် — React web app ရဲ့ App.js နဲ့ structure အခြေခံတူပါတယ်။ Component ထဲမှာ JSX ကို return လုပ်ရပြီး, root element ကို <View> နဲ့ wrap ရပါတယ် (React web မှာ <div> wrap သလိုပါပဲ)။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

App.js ထဲက <Text>Open up App.js to start working on your app!</Text> ဆိုတဲ့ line ကို ကိုယ်ပိုင် message နဲ့ ပြောင်းရေးပြီး save လိုက်ရင် phone ပေါ်ရှိ Expo Go app က hot reload ဖြင့် ချက်ချင်း update ပြပါလိမ့်မယ် — save-and-see ဆိုတဲ့ fast iteration loop ကို ခံစားရမှာပါ။

• App.js = project ရဲ့ entry point component
• Root element ကို <View> နဲ့ wrap ရခြင်း
• Save လိုက်တိုင်း hot reload ဖြင့် ချက်ချင်း update ဖြစ်ခြင်း

Code နမူနာ

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>ကျွန်တော့် ပထမဆုံး React Native app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Phone ပေါ်မှာ 'ကျွန်တော့် ပထမဆုံး React Native app!' ဆိုတဲ့ message center မှာ ပေါ်လာမည်။