06_react/agenda.md

@@ -582,7 +582,7 @@ Projektarbeit
 
 **Übungen:**
 
-Übung 08 - 11
+Übung 08 - 10
 
 ---
 
@@ -595,7 +595,7 @@ Projektarbeit
 
 **Übungen:**
 
-Übung 12 - 13
+Übung 11 - 14
 
 ---
 
@@ -607,6 +607,8 @@ Projektarbeit
 - Hooks in React. `useState`, `useReducer`, `useContext`, `useId`.
 - Routing in React
 - Verschachtelte Routen und Layout-Komponenten
+- Formulare in React
+- Validierung classic
 
 **Übungen:**
 
@@ -618,9 +620,9 @@ Projektarbeit
 
 **Inhalt:**
 
-- Verschachtelte Routen und Layout-Komponenten
-- Formulare in React
-- Validierung classic
+- Validierung mit `react-hook-form` und Schema Objekten
+- Hook: `useEffect`. Arbeiten mit asynchronen Daten.
+- Asynchron arbeiten mit axios/ fetch
 
 **Übungen:**
 
@@ -632,9 +634,9 @@ Projektarbeit
 
 **Inhalt:**
 
-- Validierung mit `react-hook-form` und Schema Objekten
-- Hook: `useEffect`. Arbeiten mit asynchronen Daten.
-- Asynchron arbeiten mit axios/ fetch
+- Hook: `useEffect`, `useRef`, `useCallback`. Arbeiten mit asynchronen Daten.
+- AbortController, loading und error hinzufügen.
+- Testing in React.
 
 **Übungen:**
 
@@ -648,6 +650,7 @@ Projektarbeit
 
 - Aktualisierung von Node
 - Testing in React
+- Einführung JS/TS Debugging & Testing
 - **Exkurs: Sass 7 on 1 Struktur**
 - **Optimierung vom ProduktManager über KI**
 - **ProduktManager wird in TS migriert** 

06_react/unterricht/tag39/01_react-api-with-hooks/src/components/examples/ExampleUseCallback.jsx

@@ -35,6 +35,7 @@ const ExampleUseCallback = (props) => {
             <li
               key={`list-item-product-${idx}`} //
               className="list-group-item list-item-product"
+              data-id={product.id}
               onClick={(e) => {
                 handleClick(e, product.id);
               }}>

06_react/unterricht/tag39/02_react-app-with-tests/package-lock.json

@@ -21,7 +21,7 @@
         "@types/react-dom": "^19.3.0",
         "@vitejs/plugin-react": "^6.1.2",
         "jsdom": "^30.1.3",
-        "oxlint": "^1.89.0",
+        "oxlint": "^1.90.0",
         "sass-embedded": "^1.107.0",
         "vite": "^8.3.5",
         "vitest": "^5.0.5"

06_react/unterricht/tag39/02_react-app-with-tests/package.json

@@ -25,7 +25,7 @@
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.2",
     "jsdom": "^30.1.3",
-    "oxlint": "^1.89.0",
+    "oxlint": "^1.90.0",
     "sass-embedded": "^1.107.0",
     "vite": "^8.3.5",
     "vitest": "^5.0.5"

06_react/unterricht/tag39/02_react-app-with-tests/src/tests/ExampleComponent.test.jsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import ExampleComponent from '../components/ExampleComponent';
+import ExampleComponent from '../components/examples/ExampleComponent';
 
 // import nicht notwendig ( Findet automatisch durch globale Setting statt)
 import { test, it, expect } from 'vitest';

06_react/unterricht/tag39/02_react-app-with-tests/vite.config.js

@@ -9,7 +9,7 @@ export default defineConfig({
     // Vitest configuration
     globals: true, // make the global objects available in the test environment
     environment: 'jsdom', // use jsdom as the test environment
-    setupFiles: './src/test/setup.js', // if you have a setup file
+    setupFiles: './src/tests/setup.js', // if you have a setup file
     // more options here
   },
 });