Schritt-für-Schritt Anleitung für Ihre erste React Native App mit Expo CLI

Diese Anleitung führt Sie durch die Erstellung Ihrer ersten React Native App mit Expo CLI. Expo ist eine Plattform, die den Einstieg in die React Native-Entwicklung vereinfacht und besonders für Anfänger geeignet ist.

Voraussetzungen

• Node.js (Version 14 oder höher)
• npm oder yarn
• Code-Editor (z.B. VS Code)
• Expo Go App auf Ihrem Smartphone (iOS/Android)

Schritt 1: Entwicklungsumgebung einrichten

# Installieren Sie Expo CLI global
npm install -g expo-cli

Schritt 2: Neues Projekt erstellen

# Erstellen Sie ein neues Expo-Projekt
npx create-expo-app MeineErsteApp
cd MeineErsteApp

Schritt 3: Projekt-Struktur verstehen

• App.js: Hauptkomponente Ihrer App
• package.json: Abhängigkeiten und Skripte
• assets/: Bilder und andere statische Ressourcen
• node_modules/: Installierte Bibliotheken

Schritt 4: App starten

# Starten Sie den Entwicklungsserver
npm start
# oder
expo start

Nach dem Start erhalten Sie einen QR-Code, den Sie mit der Expo Go App auf Ihrem Smartphone scannen können, um die App direkt zu testen.

Schritt 5: Hello World erstellen

Öffnen Sie App.js und ersetzen Sie den Inhalt durch:

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

function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hallo React Native mit Expo!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default App;

Schritt 6: Komponenten hinzufügen

Erstellen Sie eine neue Datei components/Button.js:

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

function Button({ title, onPress }) {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#1e90ff',
    padding: 10,
    borderRadius: 5,
    marginTop: 10,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    textAlign: 'center',
  },
});

export default Button;

Schritt 7: Komponente verwenden

Aktualisieren Sie App.js, um den Button zu verwenden:

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Button from './components/Button';

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

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hallo React Native mit Expo!</Text>
      <Text>Sie haben {count} mal geklickt</Text>
      <Button title="Klicken Sie mich!" onPress={() => setCount(count + 1)} />
    </View>
  );
}

// styles wie zuvor...

export default App;

Schritt 8: Expo-Bibliotheken verwenden

# Beispiel: Installation einer Bibliothek für Icons
expo install @expo/vector-icons

Verwendung:

import { FontAwesome } from '@expo/vector-icons';

// In Ihrer Komponente:
<FontAwesome name="star" size={24} color="gold" />

Schritt 9: Navigation mit Expo hinzufügen

# Installation von React Navigation
expo install @react-navigation/native
expo install @react-navigation/stack
expo install react-native-screens react-native-safe-area-context

Schritt 10: Debugging mit Expo

• Schütteln Sie Ihr Gerät oder drücken Sie Cmd+D (iOS) oder Ctrl+M (Android)
• Wählen Sie “Debug Remote JS” für Browserdebugger
• Expo Dev Tools im Browser bieten zusätzliche Debugging-Optionen

Schritt 11: App erstellen und teilen

# Expo-Konto erstellen und einloggen
expo login

# App veröffentlichen für Tester
expo publish

# App für Stores bauen
expo build:android
expo build:ios

Besondere Vorteile von Expo

• OTA (Over-The-Air) Updates: Änderungen können ohne Aktualisierung im App Store verteilt werden
• Einfacher Zugriff auf native Funktionen wie Kamera, Standort, Benachrichtigungen
• Kompatibles Ökosystem an Bibliotheken und Komponenten
• Einfaches Testen auf physischen Geräten ohne komplexen Build-Prozess

Tipps für Einsteiger mit Expo

• Nutzen Sie die Expo-Dokumentation
• Erkundigen Sie sich über die Expo-Einschränkungen bevor Sie ein grösseres Projekt starten
• Verwenden Sie expo eject, wenn Sie native Module benötigen, die nicht mit Expo kompatibel sind
• Testen Sie regelmässig auf verschiedenen Geräten

Häufige Fehler und Lösungen

• “Metro bundler” Fehler: Starten Sie den Server neu mit expo start -c
• Verbindungsprobleme: Stellen Sie sicher, dass Telefon und Computer im gleichen WLAN-Netzwerk sind
• Bei langsamen Builds: Verwenden Sie expo start --dev-client für schnellere Entwicklung

---

Mit dieser Anleitung sollten Sie in der Lage sein, Ihre erste React Native App mit Expo CLI zu erstellen. Viel Erfolg beim Entwickeln!