Bevor wir unser erstes Projekt anlegen, brauchen Sie drei Dinge: Node.js, einen Code-Editor Ihrer Wahl, und Docker (das wir erst ab Kapitel 22 wirklich benutzen, aber am besten jetzt schon installieren). 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 es funktioniert hat:

node --version
npm --version

Beide Befehle sollten eine Versionsnummer ausgeben (z. B. v20.11.0). Falls stattdessen "command not found" erscheint, hat die Installation nicht geklappt, oder das Terminal muss neu gestartet werden.

Option A: Visual Studio Code einrichten

VS Code ist kostenlos, schlank und die mit Abstand gebräuchlichste Wahl für React-Entwicklung. Laden Sie es von code.visualstudio.com herunter und installieren Sie danach diese Erweiterungen (über das Extensions-Symbol in der linken Seitenleiste, die vier Quadrate):

• ES7+ React/Redux/React-Native snippets – Tastenkürzel, die typische Code-Bausteine automatisch einfügen.
• Prettier – Code formatter – formatiert Ihren Code beim Speichern automatisch, für einheitliche Einrückung und Stil.
• ESLint – findet typische Fehler und stilistische Probleme direkt beim Tippen.

Aktivieren Sie "Format on Save" unter Settings (Strg/Cmd+,) > Editor: Format On Save, damit Prettier bei jedem Speichern automatisch 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 React-Unterstützung aber praktisch eingebaut mit, ohne dass Sie Erweiterungen suchen müssen.

1. In PhpStorm: Settings/Preferences > Plugins öffnen, nach "JavaScript and TypeScript" suchen und sicherstellen, dass es aktiviert ist (in den meisten PhpStorm-Installationen standardmäßig aktiv).
2. 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).
3. Ein neues React-Projekt einfach über File > Open und Auswahl des Projektordners öffnen – WebStorm erkennt package.json automatisch und bietet passende Run-Konfigurationen an.

Schritt 2: Docker installieren (für später)

Ab Kapitel 22 bauen wir eine eigene kleine Bewertungs-Funktion mit einem eigenen Server und einer eigenen MySQL-Datenbank – dafür brauchen wir Docker. Installieren Sie am besten schon jetzt Docker Desktop (unter docker.com, für Windows/Mac) bzw. Docker Engine über Ihren Linux-Paketmanager. Prüfen Sie nach der Installation:

docker --version
docker compose version

Was genau Docker ist und wie es funktioniert, erklären wir ausführlich in Kapitel 22, direkt an der Stelle, wo wir es zum ersten Mal wirklich brauchen – für den Moment reicht die Installation.

Kein eigener Magento-Shop? Auch kein Problem

Ab Kapitel 22 verbindet unsere App sich außerdem mit einer Produkt-API – entweder Ihrem eigenen Magento-2-Shop oder ersatzweise einer kostenlosen, öffentlichen Test-API ohne Anmeldung. Beide Varianten zeigen wir dort nebeneinander, mit identischem Code drumherum – Sie brauchen also keinen eigenen Shop, um diesem Tutorial folgen zu können.