Create a React Native app with Expo, run it on your phone, and make your first edit with instant reload — the fastest path from zero to a running app on a real device.
Why: React Native turns React code into real native iOS and Android UI. The fastest way to start is Expo — a toolchain that runs your app with no Xcode or Android Studio setup. create-expo-app scaffolds a project; npx runs it without a global install.
Scaffold a new app
npx create-expo-app@latest my-appMove in and start the dev server
cd my-appnpx expo startWhy: you do not need a simulator to start — install the "Expo Go" app on your iPhone or Android, then scan the QR code that expo start prints in the terminal. Your app loads on the real device over your network. Note: simulators work too (press i for iOS, a for Android in the terminal) once you have Xcode or Android Studio.
expo start ─prints─▶ QR code in the terminal
│
scan with Expo Go ───┘──▶ app runs on your real phone
or press i (iOS sim) / a (Android sim) / w (web)Why: a React Native app is a React component tree, but instead of HTML tags you use native components — View (a container) and Text (for text). Everything you know from React — components, props, state — applies. Edit App.js and the change appears instantly (Fast Refresh).
import { View, Text } from 'react-native'
export default function App() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Hello, React Native!</Text>
</View>
)
}Why: there is no new state model to learn — useState, useEffect, and props are identical to React for the web. Only the components differ (View instead of div, Text instead of span). Here a button updates state and the screen re-renders.
import { useState } from 'react'
import { View, Text, Button } from 'react-native'
export default function App() {
const [count, setCount] = useState(0)
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>You tapped {count} times</Text>
<Button title="Tap me" onPress={() => setCount(count + 1)} />
</View>
)
}Note: shake the device (or press m in the terminal) to open the in-app Developer Menu — toggle Fast Refresh, open the debugger, and reload. console.log output appears in your terminal, and runtime errors show in LogBox, a red/yellow overlay on the device. These three — Dev Menu, terminal logs, LogBox — are your everyday debugging loop.
shake device / press m ─▶ Developer Menu (reload, debug, Fast Refresh)
console.log(...) ─▶ printed in the expo terminal
runtime error / warning ─▶ LogBox overlay on the device screen