Build a Stunning Weather App with React Native: A Step-by-Step Beginner’s Guide

📘 Chapter 1: Setting Up React Native and Your Development Environment

🧭 What You’ll Learn

By the end of this chapter, you will:

• Understand the difference between Expo CLI and React Native CLI
• Set up your system for React Native development
• Create and run your first React Native app
• Understand the folder structure of a typical project
• Prepare for building a real weather app

⚙️ What Is React Native?

React Native is a JavaScript framework developed by Facebook that lets you build mobile apps using React and native platform components. You write your UI in JavaScript, and it compiles to native iOS and Android code.

Unlike traditional mobile development (Swift for iOS and Java/Kotlin for Android), React Native lets you build for both platforms with a single codebase.

🚀 Choosing Your Development Setup: Expo CLI vs React Native CLI

✅ We’ll use Expo CLI for this weather app because it simplifies setup and works great for API-based projects.

🖥 System Requirements

Make sure you have Node.js v14+, npm or yarn, and Git installed.

🔧 Step-by-Step Setup Guide Using Expo CLI

✅ Step 1: Install Node.js and Git

Download and install Node.js. It comes with npm.

Then install Git:

• Windows: Git for Windows
• macOS: brew install git or install from Git SCM

✅ Step 2: Install Expo CLI

Open terminal and run:

bash

npm install --global expo-cli

Check installation:

bash

expo --version

✅ Step 3: Create Your First Project

bash

expo init WeatherApp

Select the blank template (JavaScript) when prompted.

bash

cd WeatherApp

expo start

This opens Expo DevTools in your browser.

✅ Step 4: Run Your App

📱 On Real Device:

1. Install Expo Go from Play Store or App Store
2. Scan the QR code from your terminal/browser using Expo Go app
3. App runs instantly on your phone

💻 On Emulator:

• Android: Open Android Studio > Virtual Device Manager > Start emulator
• iOS (macOS only): Run npm run ios or open the iOS simulator from Xcode

📁 Understanding Project Structure

Here’s a breakdown of what expo init generates:

🔨 Editing Your First Component

Open App.js in your code editor (VS Code recommended).

Replace it with:

jsx

import React from 'react';

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

export default function App() {

  return (

    <View style={styles.container}>

      <Text style={styles.title}>🌤️ Weather App Starter</Text>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#87ceeb',

    alignItems: 'center',

    justifyContent: 'center',

  },

  title: {

    fontSize: 24,

    color: '#fff',

  },

});

Save the file. Your app updates automatically with hot reload.

🚨 Common Setup Errors & Fixes

💡 Developer Tips for Efficient Setup

• Use VS Code with the React Native Tools extension
• Keep Expo Go updated on your phone
• Run npm start -c to clear Expo cache
• Use component-based file structure for cleaner code organization
• Learn keyboard shortcuts for quicker development

🔗 Optional: Using React Native CLI (Advanced Users)

If you prefer full control, you can use React Native CLI:

bash

npx react-native init WeatherAppCLI

cd WeatherAppCLI

npx react-native run-android

You'll need to install Xcode for iOS and Android Studio with SDK tools for Android.

🚀 Next Steps: Ready to Build

You now have:

• ✅ React Native (Expo) set up on your system
• ✅ Your first project created and running
• ✅ An understanding of app structure and how to edit components
• ✅ Expo DevTools and mobile device or emulator working

In the next chapter, we’ll begin designing the UI of the weather app, starting with a search input, temperature display, and condition layout.