React Native Tutorial: Build Cross-Platform Mobile Apps from Scratch 2026

React Native Tutorial: Build Cross-Platform Mobile Apps from Scratch 2026

React Native tutorial in Hindi mein aap seekhenge ki kaise aap ek hi codebase se Android aur iOS dono ke liye beautiful mobile apps bana sakte hain. Yeh complete guide beginner se lekar production-ready app tak ka coverage deta hai.

React Native Kya Hai

React Native Facebook (Meta) dwara develop kiya gaya ek framework hai jo aapko native mobile apps banane ki facility deta hai using JavaScript aur React. Sabse badi baat: ek baar code likho, aur app iOS aur Android dono par chalegi.

Traditional development mein:

• iOS ke liye Swift/Objective-C
• Android ke liye Kotlin/Java

React Native mein:

• Sirf JavaScript/TypeScript
• Ek codebase, dono platforms ke liye

React Native Setup Tutorial

Step 1: Prerequisites Install Karein

Node.js install karein (v18 LTS recommended)

Download from nodejs.org

Check installation:

node -v

npm -v

Python bhi install karein (some dependencies ke liye)

Android Studio install karein (Android development ke liye)

Step 2: Create React Native Project

Using React Native CLI (recommended for beginners):

npx react-native@latest init MyFirstApp

Navigate to project folder:

cd MyFirstApp

Start Metro bundler:

npx react-native start

Doosri terminal mein app run karein:

npx react-native run-android (Android ke liye)

npx react-native run-ios (iOS ke liye)

Step 3: VS Code Setup

VS Code extensions install karein:

• ESLint
• Prettier
• React Native Tools (by Microsoft)
• JavaScript (ES6) code snippets

React Native Basics: Component Structure

React Native mein har screen ek component hai. Aaiye samjhein ki kaise components work karte hain:

Basic Component Banana:

import React from 'react';

import { View, Text, StyleSheet, SafeAreaView, TouchableOpacity, ScrollView, StatusBar } from 'react-native';

const App = () => {

const [count, setCount] = React.useState(0);

const handlePress = () => {

setCount(count + 1);

};

return (

<SafeAreaView style={styles.container}>

<StatusBar barStyle="light-content" backgroundColor="#0a0a1a" />

{/* Header */}

<View style={styles.header}>

<Text style={styles.title}>My First App</Text>

<Text style={styles.subtitle}>Built with React Native</Text>

</View>

{/* Main Content */}

<ScrollView style={styles.content}>

<View style={styles.counterCard}>

<Text style={styles.counterLabel}>You tapped</Text>

<Text style={styles.counterValue}>{count}</Text>

<Text style={styles.counterLabel}>times</Text>

</View>

{/* Feature Cards */}

<View style={styles.featuresSection}>

<Text style={styles.sectionTitle}>Features</Text>

<View style={styles.featureCard}>

<Text style={styles.featureIcon}>📱</Text>

<View style={styles.featureText}>

<Text style={styles.featureTitle}>Cross Platform</Text>

<Text style={styles.featureDesc}>Write once, run on iOS and Android</Text>

</View>

</View>

<View style={styles.featureCard}>

<Text style={styles.featureIcon}>⚡</Text>

<View style={styles.featureText}>

<Text style={styles.featureTitle}>Native Performance</Text>

<Text style={styles.featureDesc}>Real native UI components for best UX</Text>

</View>

</View>

<View style={styles.featureCard}>

<Text style={styles.featureIcon}>📦</Text>

<View style={styles.featureText}>

<Text style={styles.featureTitle}>Rich Ecosystem</Text>

<Text style={styles.featureDesc}>Thousands of libraries and tools available</Text>

</View>

</View>

</View>

<TouchableOpacity style={styles.button} onPress={handlePress} activeOpacity={0.8}>

<Text style={styles.buttonText}>Tap Me! ({count})</Text>

</TouchableOpacity>

<TouchableOpacity style={styles.resetButton} onPress={() => setCount(0)} activeOpacity={0.8}>

<Text style={styles.resetButtonText}>Reset Counter</Text>

</TouchableOpacity>

</ScrollView>

</SafeAreaView>

);

};

const styles = StyleSheet.create({

container: { flex: 1, backgroundColor: '#0a0a1a' },

header: { padding: 24, paddingTop: 32, borderBottomWidth: 1, borderBottomColor: 'rgba(0,229,255,0.12)' },

title: { fontSize: 32, fontWeight: '700', color: '#ffffff', marginBottom: 4 },

subtitle: { fontSize: 16, color: 'rgba(232,244,253,0.60)' },

content: { flex: 1, padding: 16 },

counterCard: { backgroundColor: 'rgba(0,229,255,0.08)', borderRadius: 16, padding: 32, alignItems: 'center', marginBottom: 24, borderWidth: 1, borderColor: 'rgba(0,229,255,0.20)' },

counterLabel: { fontSize: 16, color: 'rgba(232,244,253,0.60)' },

counterValue: { fontSize: 80, fontWeight: '700', color: '#00e5ff', marginVertical: 8 },

featuresSection: { marginBottom: 24 },

sectionTitle: { fontSize: 20, fontWeight: '600', color: '#ffffff', marginBottom: 16 },

featureCard: { backgroundColor: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: 16, flexDirection: 'row', alignItems: 'center', marginBottom: 12, borderWidth: 1, borderColor: 'rgba(255,255,255,0.06)' },

featureIcon: { fontSize: 28, marginRight: 16 },

featureText: { flex: 1 },

featureTitle: { fontSize: 16, fontWeight: '600', color: '#ffffff', marginBottom: 2 },

featureDesc: { fontSize: 13, color: 'rgba(232,244,253,0.60)' },

button: { backgroundColor: '#00e5ff', paddingVertical: 16, borderRadius: 12, alignItems: 'center', marginBottom: 12 },

buttonText: { fontSize: 18, fontWeight: '700', color: '#0a0a1a' },

resetButton: { paddingVertical: 14, borderRadius: 12, alignItems: 'center', borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)' },

resetButtonText: { fontSize: 16, fontWeight: '500', color: 'rgba(232,244,253,0.70)' },

});

export default App;

Yeh code ek basic app create karta hai jismein counter functionality, feature cards, aur styling included hai.

React Native Navigation Tutorial

Multi-screen apps ke liye navigation zaroori hai. React Navigation sabse popular option hai:

npm install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context

Navigation Setup Example:

import React from 'react';

import { NavigationContainer } from '@react-navigation/native';

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {

return (

<NavigationContainer>

<Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: '#0a0a1a' }, headerTintColor: '#00e5ff', headerTitleStyle: { fontWeight: '600' } }}>

<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Home Screen' }} />

<Stack.Screen name="Profile" component={ProfileScreen} options={{ title: 'My Profile' }} />

</Stack.Navigator>

</NavigationContainer>

);

}

React Native API Integration Tutorial

Real apps mein aapko APIs se data fetch karna hoga. Yeh example shows karta hai kaise async data handling hoti hai:

import React, { useState, useEffect } from 'react';

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

const App = () => {

const [data, setData] = useState([]);

const [loading, setLoading] = useState(true);

useEffect(() => { fetchData(); }, []);

const fetchData = async () => {

try {

const response = await fetch('https://jsonplaceholder.typicode.com/posts');

const result = await response.json();

setData(result.slice(0, 20));

} catch (error) {

console.error('Error fetching data:', error);

} finally {

setLoading(false);

}

};

const renderItem = ({ item }) => (

<View style={styles.card}>

<Text style={styles.title}>{item.title}</Text>

<Text style={styles.body}>{item.body}</Text>

</View>

);

if (loading) return <View style={styles.loadingContainer}><ActivityIndicator size="large" color="#00e5ff" /><Text style={styles.loadingText}>Loading data...</Text></View>;

return <FlatList data={data} renderItem={renderItem} keyExtractor={(item) => item.id.toString()} contentContainerStyle={styles.list} />;

};

export default App;

React Native State Management

Complex apps ke liye state management zaroori hai. Redux Toolkit ya Zustand popular options hain:

Simple Context API Example for State Management:

import React, { createContext, useContext, useReducer } from 'react';

const AppContext = createContext();

const initialState = { count: 0, user: null };

const reducer = (state, action) => {

switch (action.type) {

case 'INCREMENT': return { ...state, count: state.count + 1 };

case 'SET_USER': return { ...state, user: action.payload };

default: return state;

}

};

const AppProvider = ({ children }) => {

const [state, dispatch] = useReducer(reducer, initialState);

return <AppContext.Provider value={{ state, dispatch }}>{children}</AppContext.Provider>;

};

const useAppContext = () => useContext(AppContext);

export { AppProvider, useAppContext };

React Native Style Guide

React Native mein inline styles ke bajaye organized styles use karein:

Use StyleSheet for better performance:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({

container: { flex: 1, backgroundColor: '#0a0a1a', padding: 16 },

card: { backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 12, padding: 16, marginBottom: 12, borderWidth: 1, borderColor: 'rgba(255,255,255,0.08)' },

title: { fontSize: 18, fontWeight: '600', color: '#ffffff', marginBottom: 8 },

body: { fontSize: 14, color: 'rgba(232,244,253,0.70)', lineHeight: 20 },

});

Build Your First React Native App: Checklist

1. Project setup with React Native CLI
2. Basic components: View, Text, Image, TouchableOpacity
3. Styling with StyleSheet
4. Navigation setup with React Navigation
5. API integration with fetch
6. State management
7. Form handling
8. Testing on Android emulator / real device
9. APK build for testing

Mobile App Developer Salary India 2026

React Native developer India salary:

• Fresher: 4-8 LPA
• Mid-level (2-5 years): 10-20 LPA
• Senior (5+ years): 20-40 LPA

Top companies hiring: Google, Meta, Amazon, Flipkart, Paytm, Swiggy, Zomato.

React Native Tutorial Summary

React Native cross-platform mobile development ka sabse popular framework hai. JavaScript aur React seekhkar aap iOS aur Android dono ke liye apps bana sakte hain.

Cyber Defence mein React Native ka complete course available hai jo practical projects ke saath aapko industry-ready skills deta hai.

FAQs

Kya React Native seekhne ke liye React.js aana chahiye?

Haan, React.js ki basics seekhna very helpful hai. React concepts dono mein same hain.

React Native se app publish karna free hai?

Google Play aur App Store dono par developer fee deni padti hai (approx $25 one-time for Google, $99/year for Apple).

Kya React Native native feel deta hai?

Haan, React Native real native components use karta hai, isliye performance aur feel native apps jaisa hota hai.