Thuta Learning
Search
BasicMobile Developmentintermediate

Your First App — Hello World

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

  • Understand Your First App — Hello World, no need to be intimidated
  • Write code yourself and run it on Expo Go
  • Apply this concept immediately in a real app project

Let's think about this for a moment

The entry point of an Expo project is App.js (or App.tsx), which default-exports a React component function — the structure is basically the same as a React web app's App.js. Inside the component you return JSX, and the root element needs to be wrapped in a <View> (just like wrapping in a <div> on React web).

Let's connect this to a real scenario

If you rewrite the line <Text>Open up App.js to start working on your app!</Text> in App.js with your own message and save, the Expo Go app on your phone will hot reload and update instantly — you'll get to experience that fast save-and-see iteration loop.

Code Example

javascript
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',
  },
});
You should see
The message 'My first React Native app!' appears centered on your phone screen.

5-Minute Try-It

Rewrite the Text message in App.js with your own words, save, and watch it update on your phone.

A Quick Heads-Up

In React Native, text (strings) must be written inside a <Text> component — putting a string directly inside a <View> will throw an error. There's no free-floating text like in HTML.

Easy traps

  • Writing a raw string directly in JSX outside a <Text> component (in React Native, text must be wrapped in <Text> or it throws an error)
  • Writing StyleSheet.create as an array/string instead of an object literal

Now Try It Yourself

Rewrite the Text message in App.js with your own words, save, and watch it update on your phone.

You'll know it worked when: The message 'My first React Native app!' appears centered on your phone screen.

Your First App — Hello World | Thuta Learning