DEV Community

Cover image for From React to React Native: My First Mobile App Setup Journey
Md Enayetur Rahman
Md Enayetur Rahman

Posted on

From React to React Native: My First Mobile App Setup Journey

The Backstory

Recently, my office assigned me to work on a React Native project. I had zero experience with mobile development—my background is entirely in web development with the MERN stack (MongoDB, Express, React, Node.js). I didn't know React Native existed until this assignment came up.

Instead of panicking, I decided to learn by doing. I'm documenting everything I learn and sharing it here, hoping it helps other developers who are in the same boat—familiar with React but new to mobile development.

In this first blog post, I'll walk you through setting up a React Native development environment on Windows and compare it with what you already know from React web development.

What is React Native?

If you know React, you're already 80% there. React Native is React, but instead of rendering to the DOM (like in web browsers), it renders to native mobile components.

React Web:

<div>Hello World</div> // Renders as HTML <div>
Enter fullscreen mode Exit fullscreen mode

React Native:

<View>Hello World</View> // Renders as native Android/iOS View
Enter fullscreen mode Exit fullscreen mode

The core concepts are the same: components, props, state, hooks, JSX. The difference is the components and styling approach.

Phase 1: Environment Setup - React vs React Native

Let me break down what I did and compare it to setting up a React web project.

Step 1: Node.js Installation ✅

React (Web):

# You already have this if you do React web dev
node -v  # v20.19.3
npm -v   # 10.8.2
Enter fullscreen mode Exit fullscreen mode

React Native:

  • Same thing! Node.js is required for both.
  • I verified my Node.js installation: v20.19.3 (LTS version)
  • npm version: 10.8.2

Takeaway: If you can run npm install and npm start for React, you're good here.

Step 2: Git Installation ✅

React (Web):

git --version  # You probably already have this
Enter fullscreen mode Exit fullscreen mode

React Native:

  • Same thing! Git is needed for version control.
  • I verified: git version 2.46.0.windows.1

Takeaway: No difference. You already have Git if you're doing web development.

Step 3: Code Editor Setup ✅

React (Web):

  • VS Code with extensions: ESLint, Prettier, TypeScript support

React Native:

  • Same extensions! I installed:
    • ESLint (for linting)
    • Prettier (for code formatting)
    • TypeScript support (built-in or via extensions)

Takeaway: Your existing VS Code setup works perfectly for React Native.

Step 4: The Big Difference - Mobile Emulator Setup 📱

React (Web):

  • You just need a browser (Chrome, Firefox, etc.)
  • That's it. No additional setup.

React Native:

  • You need an Android emulator or iOS simulator to test your app
  • I installed Android Studio (this is the new part!)

What I Did:

  1. Downloaded Android Studio from developer.android.com/studio
  • This is a large download (~1GB) and takes 20-30 minutes
  1. During installation, made sure these were checked:
  • Android SDK
  • Android SDK Platform-Tools
  • Android Virtual Device (AVD)
  1. After installation:
  • Opened Android Studio → SDK Manager
  • Installed the latest Android SDK Platform
  • Created a virtual device (Pixel 6 Pro) via AVD Manager
  1. Set up environment variables (Windows):
    • Added ANDROID_HOME = C:\Users\HP\AppData\Local\Android\Sdk
    • Added to PATH: %ANDROID_HOME%\platform-tools and %ANDROID_HOME%\emulator

Why This Matters:

  • In React web dev, you run npm start and open localhost:3000 in your browser
  • In React Native, you run the app and it opens in an emulator (a virtual phone on your computer)

The Comparison:

React Web:    npm start → Browser (localhost:3000)
React Native: npm start → Android Emulator (virtual phone)
Enter fullscreen mode Exit fullscreen mode

Step 5: Creating Your First Project

React (Web):

npx create-react-app my-app
cd my-app
npm start
# Opens browser automatically
Enter fullscreen mode Exit fullscreen mode

React Native (with Expo):

npx create-expo-app physio-care --template
# When prompted, select: Blank (TypeScript)
cd physio-care
npm install
npm start
# Shows QR code and options to run on emulator
Enter fullscreen mode Exit fullscreen mode

Key Differences:

  1. Template Selection:
  • React: create-react-app has one default template
  • React Native: Expo asks you to choose (Blank, TypeScript, Navigation, etc.)
  1. Starting the Dev Server:
  • React: Opens browser automatically
  • React Native: Shows a QR code and menu with options:
    • Press a for Android emulator
    • Press i for iOS simulator
    • Press w for web browser
    • Scan QR code for physical device
  1. What You See:
    • React: Browser window with your app
    • React Native: A phone emulator window with your app

The Project Structure Comparison

React (Web) - Typical Structure:

my-react-app/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── index.js
│   └── components/
├── package.json
└── node_modules/
Enter fullscreen mode Exit fullscreen mode

React Native (Expo) - What I Created:

physio-care/
├── .expo/           # Expo build cache and config
├── assets/          # Images, icons (instead of public/)
│   ├── icon.png
│   ├── splash-icon.png
│   ├── adaptive-icon.png
│   └── favicon.png
├── node_modules/    # Dependencies (same as React)
├── .gitignore       # Git ignore rules
├── App.tsx          # Main component (similar to App.js)
├── index.ts         # Entry point (similar to index.js)
├── app.json         # App configuration (like package.json but for mobile)
├── package.json     # Dependencies (same as React)
├── package-lock.json # Lock file (same as React)
└── tsconfig.json    # TypeScript configuration
Enter fullscreen mode Exit fullscreen mode

Key Differences:

  1. No public/ folder: Mobile apps don't have HTML files. Instead, you have assets/ for images and icons.

  2. app.json instead of index.html:

  • React: public/index.html defines your HTML structure
  • React Native: app.json defines app metadata (name, version, orientation, etc.)
  1. Entry Point:
  • React: src/index.js renders to #root div
  • React Native: index.ts registers the app component
  1. Additional Files:
    • .expo/ folder: Contains Expo build cache and configuration (similar to .next/ in Next.js or .vite/ in Vite)
    • tsconfig.json: TypeScript configuration (same as React projects using TypeScript)
    • .gitignore: Standard Git ignore file (same as React projects)

The Code Comparison

React (Web) - App.js:

import React from "react";

function App() {
  return (
    <div className="container">
      <h1>Hello World</h1>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

React Native - App.tsx (What I Created):

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
Enter fullscreen mode Exit fullscreen mode

What Changed:

  1. Components:
  • <div> → <View> (container component)
  • <h1>, <p>, etc. → <Text> (all text must be in Text component)
  • No <span>, <section>, etc.
  1. Styling:
  • className → style prop (inline styles or StyleSheet)
  • CSS classes → JavaScript objects
  • No CSS files (you can use them, but StyleSheet is preferred)
  1. Imports:
    • react-native instead of just react
    • expo-status-bar for status bar control (mobile-specific)

Running the App - Side by Side

React Web:

npm start
# Automatically opens http://localhost:3000
# You see your app in Chrome/Firefox
Enter fullscreen mode Exit fullscreen mode

React Native:

npm start
# Shows QR code and menu:
# › Press a │ open Android
# › Press w │ open web
#
# After pressing 'a':
# - Android emulator opens
# - App installs and runs on emulator
# - You see your app in a phone window
Enter fullscreen mode Exit fullscreen mode

The Experience:

  • React: Browser tab with your app
  • React Native: A phone window (emulator) with your app running like a real mobile app

What I Learned: Key Takeaways

  1. React Native is React: If you know React, you know 80% of React Native. The mental model is identical.

  2. The Setup is Different:

  • React: Browser is your "device"
  • React Native: Emulator/simulator is your "device"
  • This requires Android Studio (for Android) or Xcode (for iOS)
  1. Components are Different:
  • No HTML elements (div, span, h1)
  • Use React Native components (View, Text, Button)
  • Styling is JavaScript objects, not CSS classes
  1. Expo Makes It Easier:
  • Expo is like create-react-app for React Native
  • It handles a lot of configuration for you
  • You can test on real devices via QR code scanning
  1. The Development Loop is Similar:
    • Edit code → Save → App reloads (hot reload)
    • Same as React web development!

Common Questions (If You're Coming from React)

Q: Do I need to learn a completely new language?

A: No! It's still JavaScript/TypeScript. Same syntax, same concepts.

Q: Can I use my existing React knowledge?

A: Yes! Components, props, state, hooks, context—all work the same way.

Q: What about npm packages?

A: Some work (utility libraries), but UI libraries need to be React Native compatible. Check if a package supports React Native before installing.

Q: How do I debug?

A: Similar to React—console.log works, React DevTools can be used, and Expo provides debugging tools.

Q: Can I use TypeScript?

A: Yes! I used the TypeScript template. It's the same TypeScript you know from React.

Resources That Helped Me

Code Repository

All the code from this learning journey is available on GitHub:

Final Thoughts

If you're a React developer thinking about mobile development, don't be intimidated. The learning curve is much smaller than you think. The hardest part was setting up Android Studio and the emulator—everything else feels familiar.

The best part? You can build apps for both Android and iOS with one codebase. That's the power of React Native.

Stay tuned for Phase 2, where I'll build the actual app features and compare navigation with React Router!

About This Series:

I'm learning React Native by building a physiotherapy patient management app. Each phase will be documented with comparisons to web development concepts I already know. Follow along if you're in the same boat!

Top comments (0)