Your First React Native App

Creating Your First Project

The easiest way to create a new React Native project is using Expo. Expo is a set of tools built around React Native that makes getting started much simpler. You don't need to deal with Xcode or Android Studio configurations right away — Expo handles all of that for you.

Open your terminal and run these commands:

npx create-expo-app MyFirstApp
cd MyFirstApp
npx expo start

This creates a new project called "MyFirstApp" and starts the development server. You'll see a QR code in your terminal. Download the Expo Go app on your phone, scan the QR code, and your app will open on your device. That's it — you just built your first React Native app.

Understanding the Project Structure

Let's look at what Expo created for you. The most important file is App.js (or App.tsx if you chose TypeScript). This is the entry point of your app — the first thing that runs when your app opens.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello, World!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

Don't be intimidated by the code. We'll break it down piece by piece in the coming lessons. For now, notice that the App function returns some JSX — that's your entire screen. The StyleSheet at the bottom defines how things look.

Running Your App

There are a few ways to run your app. The quickest is on your physical phone using Expo Go — just scan the QR code. For testing on a simulator, you can press i in the terminal to open the iOS Simulator (macOS only) or a to open an Android emulator.

While your app is running, try changing the text inside <Text> and save the file. You'll see the change appear on your phone almost instantly. That's hot reloading in action — one of the best features of React Native development.

What Just Happened?

When you ran npx expo start, Expo started a development server that bundles your JavaScript code and serves it to your device. Your phone downloads the bundle, and React Native renders the UI using real native components. The JavaScript runs on your device, not on a server — this is important to understand.

Think of it this way: your JavaScript code is the brain, and the native components are the body. The brain tells the body what to display and how to behave, and the body renders everything on screen. This architecture gives you the best of both worlds — JavaScript's flexibility and native performance.