Your First App

With the JavaScript, JSX, component, and hooks foundations in place, it's time to look at a real generated React Native project — its file structure, its starter App.js, and the genuinely excellent developer experience of running an app that updates itself almost instantly as you edit code.

The Generated Project Structure

After running npx create-expo-app my-app, you'll find a project that looks roughly like this: 

my-app/
  App.js
  package.json
  app.json
  assets/
    icon.png
    splash.png
  node_modules/
File / folderWhat it is
App.jsThe root component and entry point of your entire app — everything on screen ultimately renders from here.
package.jsonLists your project's dependencies and scripts. This lesson just notes it exists — the core building-block components you'll actually import live in the next lesson.
app.jsonExpo configuration — app name, icon, splash screen, and platform-specific settings.
assets/Images, fonts, and other static files bundled with your app.

Walking Through a Starter App.js

A freshly generated Expo project's App.js is intentionally simple — just enough to prove the app is running. 

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

Breaking that down line by line:

  • The import lines pull in View/Text/StyleSheet from the react-native package, and a status bar helper from Expo.
  • export default function App() is the root component — its return value is everything your users see.
  • A single View wraps everything (layout container), containing a Text label.
  • StyleSheet.create({...}) defines styles in an object, referenced from JSX via style={styles.container} — the full depth of this is covered in the Styling lesson.

Running the App

From inside the project folder, start the dev server and choose how you want to view the app: 

npx expo start
  • On a physical phone: scan the QR code shown in the terminal/browser using the Expo Go app.
  • On an Android emulator: with the dev server running, press a in the terminal.
  • On the iOS Simulator (Mac only): press i in the terminal.

Fast Refresh: See Changes Almost Instantly

One of React Native's most loved developer-experience features is Fast Refresh. Save a file while the app is running, and your changes appear in the app almost instantly — usually well under a second — while preserving component state. If you'd built up a counter to 7 before saving, it typically stays at 7 after the refresh, instead of the whole app restarting from scratch.

Familiar comparison: If you've been through this site's Flutter track, Fast Refresh is React Native's equivalent of Flutter's hot reload — same goal, same near-instant feedback loop, different underlying engine.

Worked Example: Editing With Fast Refresh Running

With the app open on your device or emulator, change the text and a style value in App.js, then save: 

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={{ fontSize: 22, color: '#2196f3' }}>
        Hello from my first React Native app!
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

After saving, the running app updates within moments to show the new text at the new font size and color — without a manual reload and without losing any state you'd built up elsewhere in the app.

The Developer Menu

React Native ships an in-app developer menu useful throughout this whole track, not just here.

  • Open it by shaking a physical device, or pressing Cmd+D (iOS Simulator) / Ctrl+M (Android emulator).
  • From there you can manually reload the app, toggle Fast Refresh, and open remote debugging tools.
  • The full set of debugging tools — including remote JS debugging and inspecting network requests — gets its own dedicated lesson later in this track.
Next up: Now that you've seen a real project running, it's time to learn the actual building blocks every screen is made from — head to Core Components.