Intro to Mobile Development Workshop - React Native with AIESEC Babez

Delivering the Intro to Mobile Development workshop at AIESEC Babez – In-Tuition Algiers was a fun and practical experience! We introduced participants to how mobile apps really work and built their very first mobile screen together.

Workshop Overview

This hands-on workshop was designed to demystify mobile app development and give participants a complete introduction to building modern, cross-platform mobile applications.

Part 1: Mobile App Fundamentals

How Mobile Apps Really Work

We started by understanding the core concepts:

Mobile Operating Systems

• Android: Linux-based, open-source ecosystem
• iOS: Unix-based, Apple’s closed ecosystem
• Architecture: How OS manages apps and resources
• Permissions: Security and privacy models
• App Lifecycle: From launch to termination

Software Development Kits (SDKs)

• Android SDK: Java/Kotlin development tools
• iOS SDK: Swift/Objective-C development tools
• Platform APIs: Accessing device features
• Development Tools: Android Studio, Xcode

Virtual Machines & Runtime

• Android: Dalvik VM and ART (Android Runtime)
• iOS: Direct compilation to ARM
• JavaScript Engines: How RN executes code
• Bridge: Native and JavaScript communication

Core App Components

• Activities/ViewControllers: Screen management
• Services: Background processes
• Content Providers: Data sharing
• Broadcast Receivers: System events
• Navigation: Moving between screens

Part 2: Mobile Development Technologies

Comparing Development Approaches

We explored the three main approaches to mobile development:

1. Native Development

Android Native

• Language: Java or Kotlin
• IDE: Android Studio
• Pros: Best performance, full platform access
• Cons: Separate codebase for each platform

iOS Native

• Language: Swift or Objective-C
• IDE: Xcode
• Pros: Optimized for iOS, best UX
• Cons: Mac required, iOS-only

2. Cross-Platform Development

React Native (Our Focus!)

• Language: JavaScript/TypeScript + React
• Write once, run on both iOS and Android
• Native components rendered
• Large community and ecosystem
• Used by: Facebook, Instagram, Discord, Shopify

Flutter

• Language: Dart
• Custom rendering engine
• Fast performance
• Used by: Google Pay, Alibaba

Ionic/Capacitor

• Web technologies: HTML, CSS, JavaScript
• WebView-based
• Progressive Web Apps

3. Hybrid Development

Cordova/PhoneGap

• Web app wrapped in native container
• Access to native features via plugins
• Pros: Web skills sufficient
• Cons: Performance limitations

Why React Native?

We chose React Native as our starting point because:

• Single Codebase: iOS + Android from one code
• React Knowledge: Leverage web development skills
• Hot Reloading: See changes instantly
• Native Performance: Real native components
• Large Community: Tons of libraries and support
• Industry Adoption: Used by major companies
• Expo: Easy setup and development

Part 3: React Native Fundamentals

Core Concepts

We walked through the building blocks of React Native:

Components

• Built-in Components: View, Text, Image, ScrollView
• Difference from HTML: No div, span, p tags
• Platform-Specific Components: iOS vs Android differences
• Custom Components: Building reusable UI elements

JSX (JavaScript XML)

// JSX allows writing UI in JavaScript
const WelcomeScreen = () => (
  <View>
    <Text>Hello, Mobile World!</Text>
  </View>
);

Props (Properties)

• Passing Data: Parent to child communication
• Configuration: Customizing component behavior
• Immutability: Props cannot be changed by child
• TypeScript: Type-safe props

State Management

• useState Hook: Managing component state
• State Updates: Triggering re-renders
• Lifting State: Sharing state between components
• State vs Props: Understanding the difference

Styling in React Native

StyleSheet API

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Flexbox Layout

• Main Concepts: flexDirection, justifyContent, alignItems
• Responsive Design: Adapting to screen sizes
• Dimensions API: Getting device dimensions
• Platform-Specific Styles: iOS vs Android differences

Part 4: Hands-On Project

Building Our First Mobile Screen

Participants learned by doing! We created a complete mobile screen together using Expo and React Native.

Setting Up the Project

# Initialize Expo project
npx create-expo-app my-first-app
cd my-first-app
npm start

Project Structure

• App.js: Main component
• package.json: Dependencies
• assets/: Images and fonts
• components/: Reusable components

Building the Screen

We created a welcome screen with:

• Header: App title with custom styling
• Image: Logo or hero image
• Text: Welcome message
• Button: Interactive element
• Input: Text input field
• ScrollView: Scrollable content

Features Implemented

1. Layout: Using Flexbox for responsive design
2. Styling: Custom colors, fonts, spacing
3. Images: Loading and displaying images
4. User Input: Text input with state management
5. Interactivity: Button press handlers
6. Navigation: Intro to React Navigation (brief overview)

Running the App

Participants experienced the magic of seeing their code running live:

Expo Go App

• Install: Download Expo Go on iOS or Android
• Scan QR Code: Connect to development server
• Live Reload: See changes instantly
• Device Testing: Real device testing without deployment

Practical Learning Outcomes

By the end of the workshop, participants could:

• Understand how mobile apps work under the hood
• Compare different mobile development approaches
• Set up a React Native development environment
• Create functional components with simple hooks
• Style components using StyleSheet and Flexbox
• Manage component state
• Handle user input and interactions
• Run apps on physical devices via Expo Go
• Debug and iterate on mobile applications

Technologies Used

Development Tools

• Expo: Simplified React Native development
• Node.js: JavaScript runtime
• npm/yarn: Package managers
• VS Code: Code editor with React Native extensions

Key Libraries

• React: UI library
• React Native: Mobile framework
• Expo SDK: Device features and APIs

Workshop Experience

The hands-on nature meant everyone left with:

• A working mobile app running on their phone
• Understanding of mobile development fundamentals
• Confidence to continue building mobile apps
• Resources for self-learning
• Ideas for their own mobile app projects

Seeing participants’ excitement when they scanned the QR code and saw their code running on their actual phones was priceless! That “aha!” moment when everything clicked together was incredibly rewarding.

Resources Shared

Learning Paths

• React Native documentation
• Expo documentation
• React fundamentals course
• JavaScript ES6+ features

Tools & Setup Guides

• Expo installation guide
• VS Code extensions for React Native
• Debugging tools and techniques
• Best practices and style guide

Project Ideas

• Todo list app
• Weather app with API
• Note-taking app
• Recipe book
• Fitness tracker

Communities

• React Native subreddit
• Expo Discord server
• Stack Overflow tags
• Dev.to React Native community