React Native ist ein Framework, mit dem Sie mit JavaScript echte, native Apps für iOS und Android bauen – eine Codebasis, zwei Plattformen. In diesem Tutorial bauen wir gemeinsam Schritt für Schritt eine kleine, aber vollständige Produktkatalog-App: mit Produktliste, Detailseite, Suchfunktion und Favoriten. Am Ende wissen Sie nicht nur, WIE man React Native benutzt, sondern auch WARUM jeder einzelne Baustein so funktioniert, wie er funktioniert.

Für wen ist dieses Tutorial?

Für alle, die noch nie mit React Native gearbeitet haben – egal ob Sie schon programmieren können oder ganz neu einsteigen. Wo es hilfreich ist, vergleichen wir React-Native-Konzepte direkt mit bekannten HTML/CSS-Bausteinen, damit alle, die schon einmal eine Webseite gebaut haben, sofort eine Eselsbrücke haben.

Was React Native anders macht als eine Webseite

Eine normale Webseite läuft im Browser und wird aus HTML, CSS und JavaScript zusammengesetzt. Eine React-Native-App läuft dagegen direkt auf dem Handy – ohne Browser dazwischen – und wird aus echten nativen Bausteinen des jeweiligen Betriebssystems zusammengesetzt. Sie schreiben trotzdem JavaScript (bzw. eine Mischung aus JavaScript und einer HTML-ähnlichen Syntax namens JSX), aber React Native übersetzt das im Hintergrund in echte iOS- und Android-Bausteine.

Warum React Native (und nicht z. B. Swift oder Kotlin direkt)?

• Eine Codebasis, zwei Plattformen: Sie schreiben den Code einmal und er läuft (mit kleinen Anpassungen) sowohl auf iOS als auch auf Android.
• JavaScript statt Swift/Kotlin: Wenn Sie schon etwas Web-Erfahrung haben, ist der Einstieg deutlich leichter als eine komplett neue Sprache pro Plattform zu lernen.
• Große Community: Für fast jedes Problem gibt es bereits eine fertige Lösung als Paket ("Library") zum Nachinstallieren.
• Wird von Meta (Facebook, Instagram) entwickelt und in echten, großen Apps eingesetzt – kein Nischen-Experiment.

Expo vs. "Bare React Native"

Es gibt zwei Wege, ein React-Native-Projekt zu starten: Expo (ein Werkzeug-Set, das viele native Konfigurationsschritte automatisch übernimmt) oder "Bare React Native" (volle Kontrolle, aber Sie müssen mehr selbst einrichten, inkl. Xcode/Android Studio von Anfang an). Für dieses Tutorial nutzen wir Expo – der mit Abstand einfachste Einstieg, und für unser Beispielprojekt völlig ausreichend. Sie können später jederzeit zu Bare React Native wechseln, falls Sie eine sehr spezielle native Funktion brauchen, die Expo nicht abdeckt.

Was Sie ab Kapitel 8 zusätzlich brauchen

Ab Kapitel 8 lädt unsere App echte Produktdaten von einer Server-API – wir verwenden dafür Magentos REST-API, da dieses Tutorial aus dem Umfeld eines Magento-Shops entstanden ist. Das bedeutet: Sie brauchen entweder Zugriff auf einen eigenen Magento-2-Shop (z. B. eine lokale Docker-Installation) ODER Sie nutzen ersatzweise eine kostenlose, öffentliche Test-API ohne Anmeldung – wir zeigen ab Kapitel 8 beide Varianten nebeneinander, mit identischem Code drumherum. Ohne eines von beidem funktioniert nur der Teil des Tutorials bis einschließlich Kapitel 7.