React Native Expo Explained Like Django

React Native Expo is a framework that simplifies mobile app development, much like how Django streamlines web development. If you are familiar with Django, understanding Expo becomes easier by drawing parallels between the two.

1. What is React Native Expo?

React Native is a framework for building mobile applications using JavaScript and React. Expo is a set of tools and services built on top of React Native that makes app development easier, handling configurations, builds, and deployments.

Django Equivalent: Think of Expo as Django’s built-in admin, ORM, and authentication system. It provides out-of-the-box features so you don’t have to configure everything manually.

2. Installation and Setup

Setting up Expo is as simple as installing Django and starting a project.

Django Setup:

pip install django
django-admin startproject myproject

Expo Setup:

npm install -g expo-cli
expo init myproject

Parallel: Just like django-admin startproject sets up a Django project structure, expo init scaffolds an Expo app with the necessary files.

3. Running the Application

In Django, you run the development server using:

python manage.py runserver

In Expo, you start the app with:

expo start

Parallel: Both commands start a development environment—Django’s for web apps and Expo’s for mobile apps.

4. Components vs. Views

In Django, a view handles logic and returns responses. In React Native, components render UI elements.

Django View:

from django.http import JsonResponse

def home(request):
    return JsonResponse({"message": "Hello, Django!"})

React Native Component:

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

export default function Home() {
  return (
    <View>
      <Text>Hello, React Native!</Text>
    </View>
  );
}

Parallel: Django views return HTTP responses, while React Native components render UI elements.

5. Database and State Management

Django uses an ORM to interact with databases, while React Native uses state and external libraries like Redux for data management.

Django Model:

from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=255)
    price = models.DecimalField(max_digits=10, decimal_places=2)

React Native State:

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

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

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Parallel: Django models store data in a database, whereas React Native manages data using state.

6. API Requests

Django provides APIs using Django REST Framework (DRF), while React Native fetches data using fetch or libraries like Axios.

Django API Endpoint:

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def api_home(request):
    return Response({"message": "Hello from Django API"})

Fetching Data in React Native:

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

export default function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('http://127.0.0.1:8000/api/home/')
      .then(response => response.json())
      .then(data => setMessage(data.message));
  }, []);

  return (
    <View>
      <Text>{message}</Text>
    </View>
  );
}

Parallel: Django serves API endpoints, and React Native fetches and displays the data.

7. Authentication

Django uses built-in authentication or Django REST Framework’s token authentication. Expo uses Firebase, Auth0, or custom authentication via API.

Django Authentication:

from django.contrib.auth import authenticate

def login_user(request):
    user = authenticate(username='user', password='pass')
    if user:
        return JsonResponse({"message": "Authenticated"})
    return JsonResponse({"error": "Invalid credentials"})

React Native Authentication:


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

export default function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    const response = await fetch('http://127.0.0.1:8000/api/login/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    });
    const data = await response.json();
    alert(data.message || data.error);
  };

  return (
    <View>
      <TextInput placeholder="Username" onChangeText={setUsername} />
      <TextInput placeholder="Password" secureTextEntry onChangeText={setPassword} />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
}

Parallel: Django handles authentication logic, while React Native sends login requests.

8. Deployment

Django Deployment:

Use Gunicorn and NGINX
Deploy to Heroku, AWS, or DigitalOcean

Expo Deployment:

Use EAS Build for iOS/Android
Deploy to Google Play Store / Apple App Store

expo build:android
expo build:ios

Parallel: Django apps are deployed on servers, while Expo apps are built and distributed on mobile stores.

Conclusion

Django	React Native Expo
Backend framework	Mobile framework
Uses Python	Uses JavaScript
Views render responses	Components render UI
Models handle data	State handles data
Django ORM for DB	Async storage, Redux, or Firebase
API with Django REST	Fetch with fetch/Axios

By drawing these comparisons, you can quickly get up to speed with React Native Expo using your Django expertise!

References

https://docs.expo.dev

https://docs.djangoproject.com/en/5.1

Newsroom