45 lines
1.7 KiB
HTML
45 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" />
|
|
<title>Product Sales Table</title>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<div class="container py-5">
|
|
<div class="alert alert-primary" role="alert">
|
|
<h2>Übung 15: Produkt-Verkaufstabelle</h2>
|
|
|
|
<p>
|
|
Es handelt sich um eine einfache React-App, die eine Liste der Produktverkäufe in einer Tabelle anzeigt, die
|
|
von einer API aufgerufen wird. Um die Übung zu vereinfachen, verwenden wir im Projekt lokale Daten, die aber
|
|
eine externe API anregen.
|
|
</p>
|
|
|
|
<p>
|
|
Du wirst jedoch feststellen, dass beim Starten der App sofort eine leere Seite mit Fehlern in der Konsole
|
|
angezeigt wird. Du kannst die Fehler überprüfen, indem du die Konsole öffnest. Die Aufgabe lautet wie folgt:
|
|
</p>
|
|
|
|
<ol class="list">
|
|
<li>
|
|
Untersuche die Fehler und debugge die Anwendung nur mit dem VSCode-Debugger. Das heißt, du darfst vorher
|
|
keine Dateien bearbeiten. Verwende das Variablenfeld im Debugger, um die Variablen zu bearbeiten.
|
|
</li>
|
|
|
|
<li>
|
|
Nachdem du die Anwendung erfolgreich debuggt hast, behebe den Fehler, indem du die Funktion fetchSalesData
|
|
änderst. Ändere nicht die Datendatei selbst. Das ist eine gute Übung, wenn du eine API aufrufst, die
|
|
manchmal fehlerhafte Daten zurückgibt.
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|