DEV Community

lucky chauhan
lucky chauhan

Posted on

How to Start a React Native Project and Build Your First “Hello World” App

#reactnative #javascript #tutorial #beginners

Below is a complete, production-ready article you can publish directly.
It covers environment setup → project creation → running → Hello World → common errors in a clean, structured way.

How to Start a React Native Project and Build Your First “Hello World” App

React Native allows you to build native Android and iOS apps using JavaScript and React. Instead of maintaining separate codebases for each platform, you write once and ship everywhere.

This guide walks through everything from zero to your first running app.

What You Will Build

A simple React Native application that displays:

Hello World 🚀
Welcome to React Native
Enter fullscreen mode Exit fullscreen mode

Running on:

  • Android Emulator or Physical Device

Prerequisites

Before starting, ensure the following are installed:

Required Tools

Tool Purpose
Node.js (LTS) JavaScript runtime
npm / yarn Package manager
Java JDK (17 recommended) Android build system
Android Studio Emulator + SDK
Code Editor VS Code recommended

1. Install Android Studio

  • Install Android SDK

  • Enable:

    • Android SDK Platform 33+
    • Android SDK Build Tools
    • Android Emulator

2. Set Environment Variables (Windows) 

ANDROID_HOME=C:\Users\<username>\AppData\Local\Android\Sdk
Enter fullscreen mode Exit fullscreen mode

Add to PATH:

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
Enter fullscreen mode Exit fullscreen mode

Verify:

adb --version
Enter fullscreen mode Exit fullscreen mode

Two Ways to Start a React Native Project

React Native supports two official approaches:

Approach Use Case
Expo (Recommended for beginners) Faster setup
React Native CLI Full native control

This article uses React Native CLI for real-world understanding.

Step 1: Create a New React Native Project

Run:

npx react-native init HelloWorldApp
Enter fullscreen mode Exit fullscreen mode

What this does:

  • Downloads React Native template
  • Creates Android & iOS folders
  • Installs dependencies

Move into project:

cd HelloWorldApp
Enter fullscreen mode Exit fullscreen mode

Step 2: Understand Project Structure 

HelloWorldApp/
 ├── android/        # Native Android code
 ├── ios/            # Native iOS code
 ├── node_modules/
 ├── App.js          # Main entry file
 ├── package.json
 └── index.js
Enter fullscreen mode Exit fullscreen mode

Key file:

  • App.js → main UI component

Step 3: Start Android Emulator

Image

Image

Image

Options:

  • Android Studio → AVD Manager → Start Emulator
  • Or connect physical device with USB debugging

Verify connection:

adb devices
Enter fullscreen mode Exit fullscreen mode

Step 4: Run the App 

npx react-native run-android
Enter fullscreen mode Exit fullscreen mode

This command:

  • Builds Android app
  • Installs APK
  • Launches emulator

First build may take 2–5 minutes.

Step 5: Write Your First “Hello World”

Open App.js and replace content:

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

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Hello World 🚀</Text>
      <Text style={styles.subtitle}>Welcome to React Native</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  title: {
    fontSize: 28,
    fontWeight: '700',
  },
  subtitle: {
    fontSize: 16,
    marginTop: 10,
    color: '#555',
  },
});
Enter fullscreen mode Exit fullscreen mode

Save file → App reloads automatically.

Hot Reload Explained

React Native uses Fast Refresh:

  • Save file
  • UI updates instantly
  • App state preserved

No rebuild required.

Common Errors & Fixes

❌ SDK location not found

Fix:

cd android
gradlew clean
Enter fullscreen mode Exit fullscreen mode

Ensure ANDROID_HOME is set.

❌ react-native-safe-area-context missing

Fix:

npm install
cd android && gradlew clean
Enter fullscreen mode Exit fullscreen mode

❌ Emulator detected but app not launching

Fix:

adb kill-server
adb start-server
Enter fullscreen mode Exit fullscreen mode

Next Steps After Hello World

Once setup is done, learn:

  • Components (View, Text, Image)
  • Navigation (react-navigation)
  • Styling (StyleSheet, NativeWind)
  • API calls (fetch, Axios)
  • State management (Context, Redux)

Summary

You learned how to:

  • Set up React Native environment
  • Create a new project
  • Run Android emulator
  • Write and run a Hello World app
  • Understand project structure

This foundation is enough to start building real mobile applications.

Top comments (0)