Einführung: React trifft auf echte Magento-Produktdaten

Willkommen zu einem fokussierten, praxisnahen Projekt: Wir bauen magento-produkt-explorer – eine kleine React-Web-App, die eine Produktliste UND eine Detailseite mit ECHTEN Daten aus einem Magento-2-Shop lädt, über die offizielle REST API. Kein Fake-JSON, keine hartcodierten Beispieldaten – am Ende dieses Tutorials tippen Sie Ihre eigene Shop-Adresse ein und sehen IHRE echten Produkte im Browser.

Voraussetzungen

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

Für die Magento-Seite brauchen Sie Zugriff auf EINEN Magento-2-Shop mit Admin-Rechten – entweder Ihre eigene lokale Installation (z. B. mit dem Docker-Setup, das wir auch in "React für Einsteiger" Kapitel 25 nutzen) oder einen Test-/Entwicklungs-Shop, bei dem Sie Änderungen vornehmen dürfen. OHNE eigenen Shop lässt sich die Magento-spezifische API nicht sinnvoll nachvollziehen – ein wichtiger Unterschied zu Tutorials, die eine öffentliche Test-API ohne Anmeldung nutzen.

Was wir konkret bauen

Eine EINZIGE, durchgehende App mit zwei Ansichten:

Produktliste: lädt eine Seite Ihrer echten Magento-Produkte über GET /V1/products, mit Pagination und (später) serverseitiger Suche.
Produktdetails: beim Klick auf ein Produkt lädt eine zweite Ansicht ALLE Daten dieses einen Produkts – Name, Preis, SKU, benutzerdefinierte Attribute, Produktbild aus der Media Gallery, und Lagerbestand.

Der rote Faden dieses Tutorials ist die MAGENTO-SEITE: Wie aktiviert man die REST API überhaupt, wie kommt man an einen gültigen Zugangs-Token, welcher Token-Typ ist wofür gedacht, und wie liest man die – anfangs etwas sperrige – JSON-Antwortstruktur eines Magento-Produkts korrekt aus.

Zwei Wege zum Zugangs-Token – ein kurzer Vorgeschmack

Magentos REST API verlangt für Produktdaten (anders als z. B. reine Shop-Konfiguration) grundsätzlich eine Authentifizierung. Es gibt dafür ZWEI gebräuchliche Wege, die wir BEIDE bauen werden – Kapitel 3 zeigt den schnellen Weg für ein SOFORTIGES erstes Ergebnis, Kapitel 5 den für Produktions-Apps empfohlenen, saubereren Weg:

Token-Typ	Wofür geeignet
Admin-Token (Kapitel 3)	Ein Login-Aufruf mit Admin-Benutzername/-Passwort liefert SOFORT einen gültigen Token – der schnellste Weg zum ersten Ergebnis, aber technisch an einen konkreten Admin-Account gebunden und läuft nach kurzer Zeit ab.
Integration-Token (Kapitel 5)	Ein im Admin-Panel unter System → Integrationen fest angelegter, dedizierter Zugang mit eigenem Namen und eigenen Rechten – der Weg, den echte Produktions-Apps nutzen, weil er nicht an einen persönlichen Admin-Account gebunden ist.

Achtung: Ein wichtiger Sicherheitshinweis, den wir in Kapitel 6 vertiefen: In DIESEM Lern-Projekt landet der Token direkt im Browser-Code, damit Sie das Prinzip der Magento-API isoliert verstehen. In einer ECHTEN Produktions-App sollte ein Backend als Vermittler ("Proxy") zwischen Frontend und Magento stehen, damit der Token NIEMALS im an den Browser ausgelieferten Code sichtbar wird.

Aufbau dieses Tutorials

14 Kapitel, in dieser Reihenfolge: Magento-REST-API-Grundlagen verstehen, Admin-Token für ein sofortiges Ergebnis, das React-Projekt aufsetzen, eine saubere Integration einrichten, Umgebungsvariablen und Sicherheit, die Produktliste laden, Pagination und Sortierung, Navigation zur Detailseite, alle Produktdaten auslesen, Bilder und Lagerbestand, Fehlerbehandlung und Ladezustände, serverseitige Suche, und ein Abschlusskapitel mit dem kompletten Projekt im Überblick.