Mit einem funktionierenden curl-Aufruf aus Kapitel 3 in der Tasche legen wir jetzt das eigentliche React-Projekt an – mit Vite, demselben Werkzeug wie in "React für Einsteiger".

Projekt erstellen

npm create vite@latest magento-produkt-explorer -- --template react
cd magento-produkt-explorer
npm install
npm install react-router-dom

react-router-dom installieren wir direkt mit, da wir ab Kapitel 9 zwischen Produktliste und Detailseite navigieren – dieselbe Bibliothek, die auch "React für Einsteiger" ab Kapitel 17 nutzt.

Vite-Vorlage aufräumen

Löschen Sie src/App.css und src/assets/, und ersetzen Sie src/App.jsx durch ein leeres Grundgerüst, das wir in den kommenden Kapiteln füllen:

function App() {
  return (
    <div>
      <h1>magento-produkt-explorer</h1>
    </div>
  );
}

export default App;

npm run dev
# Öffnet auf http://localhost:5173 - Sie sollten 'magento-produkt-explorer' sehen

Die Zielstruktur im Vorgriff

Damit Sie wissen, worauf die kommenden Kapitel hinarbeiten, hier bereits die VOLLSTÄNDIGE Struktur, die am Ende von Kapitel 14 steht:

magento-produkt-explorer/
├── .env
├── .env.example
├── .gitignore
└── src/
    ├── App.jsx
    ├── main.jsx
    ├── api/
    │   └── magentoApi.js
    ├── components/
    │   ├── ProductCard.jsx
    │   ├── Pagination.jsx
    │   └── SearchBar.jsx
    └── pages/
        ├── ProductListPage.jsx
        └── ProductDetailPage.jsx