Jetzt wird es konkret: Wir erstellen das Grundgerüst für unsere Produktkatalog-App – DAS Projekt, das wir durch das gesamte restliche Tutorial hindurch gemeinsam ausbauen. Jedes folgende Kapitel baut direkt auf den Dateien auf, die wir hier anlegen – nichts ist ein loses, isoliertes Beispiel. Öffnen Sie ein Terminal (in VS Code: Terminal > New Terminal; in WebStorm/PhpStorm: unten am Fensterrand den Reiter "Terminal") und wechseln Sie in den Ordner, in dem Ihr Projekt entstehen soll.

Wohin uns dieses Tutorial führt

Am Ende von Kapitel 12 haben wir eine echte, funktionierende App: eine durchsuchbare Produktliste, die live Daten von Ihrem eigenen Magento-Shop über dessen REST-API lädt, eine Detailseite pro Produkt, und einen Warenkorb, der auch nach dem Schließen der App erhalten bleibt. Das ist die Ziel-Projektstruktur, auf die wir Schritt für Schritt hinarbeiten:

produktkatalog-app/
├── App.js                        (Einstiegspunkt: Navigation)
├── app.json                      (Expo-Konfiguration)
├── package.json                  (Pakete, wie composer.json)
├── api/
│   └── magentoApi.js             (Verbindung zur Magento-REST-API)
├── components/
│   └── ProductCard.js            (wiederverwendbare Produktkarte)
├── hooks/
│   └── useCart.js                (Warenkorb, dauerhaft gespeichert)
├── screens/
│   ├── ProductListScreen.js      (Produktliste + Suche)
│   └── ProductDetailScreen.js    (Produktdetails + Warenkorb)
└── assets/                       (Icons, Bilder)

Jedes Mal, wenn ein neues Kapitel eine neue Datei anlegt oder eine bestehende ändert, zeigen wir Ihnen den vollständigen Inhalt dieser Datei UND den aktuellen Stand der Projektstruktur – Sie können diesem Tutorial also Zeile für Zeile folgen und am Ende exakt diese App vor sich haben.

Projekt erstellen

Wir verwenden bewusst das "blank"-Grundgerüst (statt des Standard-Templates mit Datei-basiertem Routing), weil wir die Navigation in Kapitel 10 selbst Schritt für Schritt aufbauen und verstehen wollen, statt sie von Anfang an "automagisch" zu bekommen:

npx create-expo-app produktkatalog-app --template blank
cd produktkatalog-app

Der Befehl lädt automatisch alles Nötige herunter und legt ein lauffähiges Grundgerüst mit genau einer Einstiegsdatei an. Das dauert beim ersten Mal ein bis zwei Minuten, je nach Internetverbindung.

Projekt starten

npx expo start

Im Terminal erscheint ein QR-Code. Öffnen Sie die Expo-Go-App auf Ihrem Handy (siehe letztes Kapitel) und scannen Sie den Code (iOS: über die normale Kamera-App, Android: direkt in Expo Go über den "Scan QR Code"-Button). Nach ein paar Sekunden Ladezeit sehen Sie die Beispiel-App live auf Ihrem Gerät – herzlichen Glückwunsch, das war Ihre erste laufende React-Native-App!

Die Ordnerstruktur verstehen

Ein frisches, "blankes" Expo-Projekt bringt genau diese Ordner/Dateien mit:

produktkatalog-app/
├── App.js          (die einzige Bildschirm-Datei – hier fangen wir an)
├── app.json        (App-Name, Icon, Farben)
├── package.json    (installierte Pakete, wie composer.json)
└── assets/         (Icons, Bilder)

App.js öffnen: unsere erste echte Projektdatei

Öffnen Sie App.js im Hauptordner – das ist der Einstiegspunkt jeder React-Native-App, vergleichbar mit der index.php eines klassischen PHP-Projekts. Ihr Editor zeigt bereits genau diesen Inhalt (von create-expo-app automatisch angelegt):

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

Ändern Sie den Text in Zeile 6 ab und speichern Sie – die App auf Ihrem Handy aktualisiert sich automatisch, ganz ohne manuellen Neustart. Dieses sofortige Feedback nennt sich "Fast Refresh" und ist einer der größten Produktivitätsvorteile von React Native gegenüber klassischer nativer Entwicklung. Im nächsten Kapitel bauen wir App.js gezielt weiter aus.