React Native Expo Tutorial for Beginners: Build Your First Mobile App Fast!

Introduction

Want to create a mobile app using JavaScript? You’re in the right place. In this tutorial, we’ll walk you through how to build your first mobile app using React Native and Expo — no complex setup required!

Expo makes it super easy for beginners to start building cross-platform apps. You don’t need Android Studio or Xcode to get started — just a computer, a smartphone, and an internet connection.

What You Will Learn

• What is React Native and Expo
• How to set up the Expo environment
• Create your first Expo app
• Run the app on Android and iOS
• Modify and test your code

Prerequisites

Before we start, make sure you have:

• Node.js installed (Download here)
• A code editor (we recommend VS Code)
• A smartphone with the Expo Go app (available on Play Store and App Store)

Step 1: Install Expo CLI

Open your terminal or command prompt and run:

npm install -g expo-cli

This installs the Expo command-line tool globally on your system.

Step 2: Create a New App

Now create your first app:

expo init MyFirstApp

Choose the blank template (or a template with navigation if you want more features).

Move into your project folder:

cd MyFirstApp

Step 3: Start the Development Server

To start your app:

npm start

or

expo start

This will open a new tab in your browser with a QR code.

Step 4: Run the App on Your Device

1. Open the Expo Go app on your phone.
2. Scan the QR code from the terminal/browser.
3. Your app will open instantly!
4. No need for emulators or complex setup. That’s the beauty of Expo!

Step 5: Edit Your App

Open the App.js file in your code editor. You’ll see something like this:

import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello, world!</Text>
    </View>
  );
}

Try changing the text to:

<Text>Welcome to My First App with Expo!</Text>

Save the file — your app will reload automatically on your phone!

Add a Button

Let’s make it more interactive. Update App.js like this:

import React, { useState } from 'react';
import { Text, View, Button } from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>You clicked {count} times</Text>
      <Button title="Click me" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Now you’ve got a clickable counter app!

Summary

You just built your first mobile app using React Native and Expo. Here’s what we covered:

Installed Expo CLI
Created a new project
Ran the app on a real device
Edited and tested your first component