Entwicklungsumgebung für React Native einrichten

Bevor Sie Ihre erste App bauen, brauchen Sie drei Dinge: Node.js (die Laufzeitumgebung, auf der die Entwicklungswerkzeuge laufen), einen Code-Editor Ihrer Wahl, und die Expo-Kommandozeile. Dieses Kapitel deckt beide gängigen Editoren ab – Sie brauchen nur einen davon.

Schritt 1: Node.js installieren

Laden Sie die aktuelle LTS-Version ("Long Term Support", die stabile Empfehlung) von nodejs.org herunter und installieren Sie sie wie gewohnt. Prüfen Sie danach in einem Terminal, ob alles funktioniert hat:

node --version
npm --version

Beide Befehle sollten eine Versionsnummer ausgeben (z. B. v20.11.0). Kommt stattdessen eine Fehlermeldung wie "command not found", war die Installation nicht erfolgreich oder der Terminal muss neu gestartet werden.

Option A: Visual Studio Code einrichten

VS Code ist kostenlos, leichtgewichtig und die mit Abstand am weitesten verbreitete Wahl für React-Native-Entwicklung. Laden Sie es von code.visualstudio.com herunter und installieren Sie danach diese Erweiterungen (über das Erweiterungen-Icon in der linken Seitenleiste, Symbol mit den vier Quadraten):

ES7+ React/Redux/React-Native snippets – Tastenkürzel, die typische Code-Bausteine automatisch einfügen.
Prettier – Code formatter – formatiert Ihren Code automatisch beim Speichern, damit Einrückung und Stil konsistent bleiben.
React Native Tools (von Microsoft) – Debugging-Unterstützung direkt im Editor.

Aktivieren Sie "Format on Save" unter Einstellungen (Strg/Cmd+,) > Editor: Format On Save, damit Prettier automatisch bei jedem Speichern läuft.

Option B: WebStorm/PhpStorm einrichten

WebStorm (bzw. PhpStorm mit aktiviertem JavaScript-Plugin, falls Sie – wie in diesem Projekt – bereits PhpStorm für Magento nutzen) ist kostenpflichtig, bringt aber React-Native-Unterstützung praktisch vollständig eingebaut mit, ganz ohne Erweiterungen suchen zu müssen.

In PhpStorm: Settings/Preferences > Plugins öffnen, nach "JavaScript and TypeScript" suchen und sicherstellen, dass es aktiviert ist (in den meisten PhpStorm-Installationen standardmäßig der Fall).
Optional das Plugin React Native Console installieren – zeigt Metro-Bundler-Logs direkt in einem eigenen Tool-Fenster an.
Unter Settings > Languages & Frameworks > JavaScript > Prettier Prettier aktivieren und "Run on save" ankreuzen, sobald das Projekt existiert (Prettier wird als Projekt-Abhängigkeit installiert, siehe nächstes Kapitel).
Ein neues React-Native-Projekt öffnen Sie einfach über File > Open und den Projektordner auswählen – WebStorm erkennt package.json automatisch und bietet passende Ausführungs-Konfigurationen an.

Tipp: Beide Editoren funktionieren gleich gut – WebStorm/PhpStorm hat mehr eingebaute Funktionen ohne Zusatzinstallation, VS Code ist kostenlos und etwas schlanker. Dieses Tutorial funktioniert identisch mit beiden; wo es Unterschiede gibt (z. B. beim Debugging), wird das explizit erwähnt.

Schritt 2: Expo-Kommandozeile

Eine separate Installation der Expo-Kommandozeile ist nicht mehr nötig – wir nutzen sie im nächsten Kapitel direkt über npx (ein Werkzeug, das mit Node.js automatisch mitkommt und Pakete bei Bedarf temporär herunterlädt, ohne sie dauerhaft zu installieren).

Schritt 3: Die Expo-Go-App auf Ihrem Handy

Laden Sie zusätzlich die kostenlose App Expo Go aus dem App Store (iOS) bzw. Google Play Store (Android) auf Ihr eigenes Handy. Damit können Sie Ihre entstehende App schon in den nächsten Kapiteln live auf einem echten Gerät sehen, ganz ohne Veröffentlichung – dazu mehr im Kapitel "Auf dem eigenen Gerät testen".