DEV Community

SWAPNIL AHMMED SHISHIR
SWAPNIL AHMMED SHISHIR

Posted on

Setting up your first React Native app using VS Code and Expo

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:

  1. Node.js: Download Node.js
  2. VS Code: Download VS Code
  3. Expo CLI: Will be installed via terminal/command prompt
  4. 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
Enter fullscreen mode Exit fullscreen mode

2. Create a New Project 

npx create-expo-app MyFirstApp
Enter fullscreen mode Exit fullscreen mode

This will prompt you to choose a template. You can choose the blank template (with or without TypeScript).

cd MyFirstApp
Enter fullscreen mode Exit fullscreen mode

3. Open in VS Code

In the same terminal:

code .
Enter fullscreen mode Exit fullscreen mode

This opens your project in VS Code.

4. Start the App

Run the development server:

npx expo start
Enter fullscreen mode Exit fullscreen mode

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/
└── ...
Enter fullscreen mode Exit fullscreen mode

🛠️ 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?

Top comments (0)