Jetzt wird es konkret: Wir erstellen das Grundgerüst für produktkatalog-web – DAS Projekt, das wir durch das gesamte restliche Tutorial hindurch gemeinsam ausbauen. Öffnen Sie ein Terminal und wechseln Sie in den Ordner, in dem Ihr Projekt entstehen soll.

Wohin uns dieses Tutorial führt

Am Ende dieser Serie haben wir eine echte, funktionierende Webseite: eine durchsuchbare Produktliste mit Daten aus einer echten API, Detailseiten mit Bewertungsformular, mehrere Unterseiten mit Routing, einen einfachen Login-Bereich, und eine selbst gebaute Bewertungs-Funktion mit eigenem Server und eigener Datenbank. Das ist die Ziel-Projektstruktur, auf die wir hinarbeiten:

produktkatalog-web/
├── index.html
├── package.json
├── vite.config.js
├── docker-compose.yml            (MySQL-Container für Bewertungen)
├── server/                       (eigener Node/Express-Server)
│   ├── package.json
│   ├── server.js
│   └── db.js
└── src/
    ├── main.jsx
    ├── App.jsx                   (Routing)
    ├── index.css
    ├── api/
    │   ├── magentoApi.js         (Magento-REST-API: Produkte)
    │   └── reviewsApi.js         (eigener Server: Bewertungen)
    ├── context/
    │   └── AuthContext.jsx       (einfacher Login-Zustand)
    ├── components/
    │   ├── ProductCard.jsx
    │   └── ProtectedRoute.jsx
    ├── hooks/
    │   └── useDocumentTitle.js   (Custom Hook)
    └── pages/
        ├── ProductListPage.jsx
        ├── ProductDetailPage.jsx
        ├── ReviewsPage.jsx       (verschachtelte Route)
        ├── LoginPage.jsx
        └── AccountPage.jsx       (geschützte Route)

Genau wie im React-Native-Tutorial gilt: Jedes Kapitel, das eine Datei anlegt oder ändert, zeigt deren VOLLSTÄNDIGEN Inhalt UND die aktuelle Projektstruktur – Sie können Zeile für Zeile mittippen und haben am Ende genau diese App vor sich.

Warum Vite statt Create React App?

Es gibt mehrere Werkzeuge, um ein neues React-Projekt zu starten. Wir nutzen Vite (französisch für "schnell", ausgesprochen "wiit") – das inzwischen gebräuchlichste Werkzeug, deutlich schneller beim Starten und bei Änderungen als ältere Alternativen, und ohne unnötige Altlasten.

npm create vite@latest produktkatalog-web -- --template react
cd produktkatalog-web
npm install

Wählen Sie bei der interaktiven Nachfrage "React" und "JavaScript" (nicht TypeScript – dazu gibt es ein eigenes, fortgeschritteneres Tutorial). npm install lädt alle Abhängigkeiten herunter, die in package.json gelistet sind.

Projekt starten

npm run dev

Im Terminal erscheint eine lokale Adresse, meist http://localhost:5173. Öffnen Sie sie im Browser – Sie sehen die Vite-Beispielseite live, und jede Codeänderung erscheint sofort im Browser, ganz ohne manuellen Neustart ("Hot Module Replacement", das Web-Äquivalent zum "Fast Refresh" aus dem React-Native-Tutorial).

Die Ordnerstruktur verstehen

Ein frisches Vite-React-Projekt bringt u. a. diese Ordner/Dateien mit:

produktkatalog-web/
├── index.html       (die einzige, echte HTML-Datei der ganzen App)
├── package.json     (installierte Pakete, wie composer.json)
├── vite.config.js   (Build-Werkzeug-Konfiguration)
└── src/
    ├── main.jsx     (Einstiegspunkt: startet die App in index.html)
    ├── App.jsx      (unsere erste eigene Komponente – hier fangen wir an)
    └── index.css

index.html ist deshalb "die einzige echte HTML-Datei", weil React eine Single-Page-Application (SPA) baut: der Browser lädt EINMAL diese eine HTML-Seite, und React tauscht danach nur noch den Inhalt innerhalb aus – ganz ohne dass der Browser jemals eine komplett neue Seite nachladen muss. Das erklärt auch, warum index.html fast leer ist – nur ein <div id="root">, in das React seinen gesamten Inhalt hineinrendert.

App.jsx öffnen: unsere erste echte Projektdatei

Öffnen Sie src/App.jsx – das ist unsere Hauptkomponente. Ihr Editor zeigt bereits genau diesen Inhalt:

function App() {
  return (
    <div>
      <h1>Vite + React</h1>
    </div>
  );
}

export default App;

.jsx statt .js als Dateiendung ist Konvention (nicht zwingend erforderlich, aber üblich): Sie markiert Dateien, die JSX enthalten – mehr zu JSX im nächsten Kapitel. Ändern Sie den Text in Zeile 3 ab und speichern Sie – die Seite im Browser aktualisiert sich sofort.