DEV Community

SWAPNIL AHMMED SHISHIR
SWAPNIL AHMMED SHISHIR

Posted on • Edited 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

Top comments (0)