Einführung: React Native trifft auf echte Magento-Produktdaten

Willkommen zur mobilen Variante unseres fokussierten Magento-Projekts: Wir bauen magento-produkt-explorer-app – eine kleine React-Native/Expo-App, die eine Produktliste UND eine Detailseite mit ECHTEN Daten aus einem Magento-2-Shop lädt, über dieselbe offizielle REST API wie in unserem React-Web-Tutorial. Gleiche API, gleiche Datenstruktur – aber mit FlatList statt einer Web-Liste und React Navigation statt React Router.

Voraussetzungen

Dieses Tutorial setzt React-Native-Grundkenntnisse voraus (Components, Props, State, useEffect, FlatList) – falls Ihnen das neu ist, arbeiten Sie zuerst unser "React Native für Einsteiger"-Tutorial durch. Hier geht es AUSSCHLIESSLICH um die Magento-REST-API-Integration, nicht um React Native selbst.

Für die Magento-Seite brauchen Sie – GENAU wie im React-Web-Tutorial – Zugriff auf EINEN Magento-2-Shop mit Admin-Rechten. Haben Sie das React-Web-Tutorial bereits durchgearbeitet, können Sie hier denselben Shop UND dieselbe Integration (Kapitel 5) weiterverwenden – die Magento-Seite ist plattformunabhängig identisch.

Was wir konkret bauen

Eine EINZIGE, durchgehende App mit zwei Screens:

Produktliste-Screen: lädt eine Seite Ihrer echten Magento-Produkte über GET /V1/products, dargestellt mit FlatList, mit Pagination und (später) serverseitiger Suche.
Produktdetail-Screen: beim Antippen eines Produkts navigiert React Navigation zu einem zweiten Screen, der ALLE Daten dieses einen Produkts lädt – Name, Preis, SKU, benutzerdefinierte Attribute, Produktbild aus der Media Gallery, und Lagerbestand.

Der rote Faden bleibt DERSELBE wie im React-Web-Tutorial: Wie aktiviert man die REST API, wie kommt man an einen gültigen Zugangs-Token, und wie liest man die JSON-Antwortstruktur eines Magento-Produkts korrekt aus – DIESMAL innerhalb einer React-Native-App.

Was sich gegenüber der React-Web-Version unterscheidet

Bereich	Unterschied zur Web-Version
Liste anzeigen	React-Web: `<ul>`/`<li>` mit `.map()`. React Native: `<FlatList>`, das große Listen performant nur die sichtbaren Einträge rendert.
Navigation	React-Web: React Router (`BrowserRouter`, `useNavigate`). React Native: React Navigation (`NavigationContainer`, `navigation.navigate()`).
Umgebungsvariablen	React-Web: Vite mit `VITE_`-Präfix. React Native/Expo: eingebaute `EXPO_PUBLIC_`-Variablen, ebenfalls über `.env`.

Die Magento-API-Aufrufe selbst, die Token-Beschaffung und die Datenstruktur bleiben IDENTISCH – nur die React-seitige Darstellung unterscheidet sich.

Aufbau dieses Tutorials

14 Kapitel, in derselben Reihenfolge wie die Web-Version: Magento-REST-API-Grundlagen, Admin-Token für ein sofortiges Ergebnis, das Expo-Projekt aufsetzen, eine saubere Integration einrichten, Umgebungsvariablen und Sicherheit, die Produktliste mit FlatList laden, Pagination und Sortierung, Navigation zum Detail-Screen, alle Produktdaten auslesen, Bilder und Lagerbestand, Fehlerbehandlung und Ladezustände, serverseitige Suche, und ein Abschlusskapitel mit dem kompletten Projekt im Überblick.