Setting up your first React Native app using VS Code and Expo is a straightforward process, especially for beginners. Here's a step-by-step guide:
🔧 Prerequisites
Before you begin, install the following:
- Node.js: Download Node.js
- VS Code: Download VS Code
- Expo CLI: Will be installed via terminal/command prompt
- Expo Go App (on your mobile phone): Available in the App Store or Google Play
🚀 Step-by-Step Setup
1. Install Expo CLI
Open a terminal (Command Prompt, PowerShell, or Terminal on macOS):
npm install -g expo-cli
2. Create a New Project
npx create-expo-app MyFirstApp
This will prompt you to choose a template. You can choose the blank template (with or without TypeScript).
cd MyFirstApp
3. Open in VS Code
In the same terminal:
code .
This opens your project in VS Code.
4. Start the App
Run the development server:
npx expo start
It will open a browser tab with a QR code.
5. Run on Your Device
- Open the Expo Go app on your mobile phone.
- Scan the QR code from the browser.
- The app will load on your phone!
✅ Alternatively, you can use an Android/iOS emulator if you’ve set one up.
🎨 File Structure Overview
MyFirstApp/
├── App.js // Entry point
├── package.json // Dependencies and scripts
├── node_modules/
└── ...
🛠️ Optional: Install Useful VS Code Extensions
- ESLint – for JavaScript linting
- Prettier – code formatting
- React Native Tools – debugging and development support
- Expo Tools – Expo-specific utilities
Would you like a sample App.js
code to get started with a simple UI?