Ship Your First App in 60 Minutes

🎯 Learning Objectives

By the end of this lesson, you will be able to:

• Set up a React Native development environment with AI assistance
• Create a basic mobile app from scratch in under 60 minutes
• Understand the core structure of a React Native application
• Deploy your first app using Expo and test it on your phone
• Use AI tools like Cursor/Windsurf to accelerate development

ℹ️ Info Definition: React Native is a framework that lets you build mobile apps using JavaScript and React, allowing you to create apps for both iOS and Android from a single codebase.

📱 The Mobile App Revolution

Mobile apps are everywhere! Every successful business today needs a mobile presence. But traditional app development used to take months or even years. With modern AI-powered tools and frameworks like React Native, you can now build and ship apps in record time.

Why React Native?

React Native is perfect for beginners and incredibly powerful for professionals:

💡 Fun Fact: Facebook, Instagram, Tesla, and thousands of other apps are built with React Native!

🚀 Your 60-Minute App Journey

Phase One: Setup (10 minutes)

1. Install Node.js and npm
2. Install Expo CLI globally
3. Set up your development environment
4. Configure AI coding assistant

Phase 2: Create Your App (30 minutes)

1. Initialize your first app
2. Understand the project structure
3. Build your first screen
4. Add interactivity

Phase 3: Deploy and Test (20 minutes)

1. Run on your phone
2. Make it beautiful
3. Share with friends

🤖 AI-Powered Development We'll use AI tools throughout this lesson to write code faster, debug issues, and learn best practices. This is how modern developers work!

🛠 Environment Setup with AI

Step One: Install Required Tools

First, let's set up your development environment. Use these commands:

# Install Node.js (if not already installed)
# Download from https://nodejs.org/

# Install Expo CLI globally
npm install -g expo-cli

# Verify installation
expo --version

Step 2: Create Your First App

# Create a new app with Expo
expo init MyFirstApp

# Choose the "blank" template
# Navigate to your app directory
cd MyFirstApp

# Start the development server
expo start

📝 AI Tip Ask your AI assistant: "Explain what each of these commands does and why we need them for React Native development."

📱 Building Your App Structure

Understanding the Basic Structure

Your new React Native app has this structure:

MyFirstApp/
├── App.js          # Main app component
├── package.json    # Dependencies and scripts
├── app.json       # Expo configuration
├── assets/        # Images, fonts, etc.
└── node_modules/  # Installed packages

Your First Component

Let's build a simple "Hello World" app that does something interesting:

import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Alert } from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState('Welcome to my first app!');

  const handlePress = () => {
    const newCount = count + 1;
    setCount(newCount);
    
    if (newCount === 10) {
      Alert.alert('Congratulations!', 'You clicked 10 times! 🎉');
      setMessage('You did it! This is your first interactive app!');
    } else if (newCount === 5) {
      setMessage('Halfway there! Keep clicking!');
    } else {
      setMessage(`You've clicked ${newCount} times!`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>My First App</Text>
      <Text style={styles.message}>{message}</Text>
      
      <TouchableOpacity style={styles.button} onPress={handlePress}>
        <Text style={styles.buttonText}>
          Tap Me! ({count})
        </Text>
      </TouchableOpacity>
      
      <Text style={styles.subtitle}>
        Built in 60 minutes with React Native! 📱
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#4A90E2',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    color: 'white',
    marginBottom: 20,
    textAlign: 'center',
  },
  message: {
    fontSize: 18,
    color: 'white',
    marginBottom: 30,
    textAlign: 'center',
    paddingHorizontal: 20,
  },
  button: {
    backgroundColor: '#FF6B6B',
    paddingHorizontal: 30,
    paddingVertical: 15,
    borderRadius: 25,
    marginBottom: 30,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 5,
  },
  buttonText: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
  },
  subtitle: {
    fontSize: 16,
    color: 'white',
    opacity: 0.8,
  },
});

🎨 What This App Does:

• Displays a welcome message
• Has an interactive button that counts taps
• Changes messages at 5 and 10 clicks
• Shows a congratulations alert at 10 clicks
• Uses modern styling with shadows and colors

🚀 Deploy and Test Your App

Running on Your Phone

1. Install Expo Go on your phone (iOS App Store / Google Play Store)
2. Scan the QR code from your terminal when you run expo start
3. Your app opens instantly on your phone!

Making It Your Own

Use AI to help you customize your app:

AI Prompts to try:

• "Change the color scheme to use purple and gold"
• "Add a reset button to set the counter back to zero"
• "Add a random emoji that appears each time the button is pressed"
• "Create a celebration animation when reaching 10 clicks"

📊 What You've Accomplished

In just 60 minutes, you've:

• ✅ Set up a complete mobile development environment
• ✅ Created your first React Native app
• ✅ Added interactive features and state management
• ✅ Styled your app with modern design principles
• ✅ Deployed and tested on a real device
• ✅ Used AI to accelerate your development process

🎯 Next Steps

Your app development journey has just begun! Here's what you can explore next:

• Add more screens with navigation
• Connect to APIs for real data
• Add animations and advanced interactions
• Publish to app stores

📝 Summary

In this lesson, you learned:

• How to set up React Native with Expo for rapid development
• The basic structure and components of a mobile app
• How to create interactive features with state management
• How to style apps with modern design principles
• How to deploy and test on real devices
• How to use AI tools to accelerate development

🤖 Practice with AI

Code with AI: Try extending your app with these features.

Prompts to try:

• "Add a feature that tracks the user's highest score across app sessions"
• "Create a settings screen where users can change the app's theme colors"
• "Add sound effects when buttons are pressed"
• "Implement a simple game where users have to tap the button a certain number of times within a time limit"

Don't be afraid to experiment! AI can help you understand any code it generates and explain how to modify it further.