add Page Router & improve styling

react-advanced-tag1/package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-router-dom": "^7.5.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.21.0",
@@ -1393,6 +1394,12 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/@types/estree/-/estree-1.0.7.tgz",
@@ -2035,6 +2042,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3077,6 +3093,46 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.5.0",
+      "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/react-router/-/react-router-7.5.0.tgz",
+      "integrity": "sha512-estOHrRlDMKdlQa6Mj32gIks4J+AxNsYoE0DbTTxiMy2mPzZuWSDU+N85/r1IlNR7kGfznF3VCUlvc5IUO+B9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.5.0",
+      "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/react-router-dom/-/react-router-dom-7.5.0.tgz",
+      "integrity": "sha512-fFhGFCULy4vIseTtH5PNcY/VvDJK5gvOWcwJVHQp8JQcWVr85ENhJ3UpuF/zP1tQOIFYNRJHzXtyhU1Bdgw0RA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.5.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3178,6 +3234,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3328,6 +3390,12 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/type-check/-/type-check-0.4.0.tgz",

react-advanced-tag1/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.5.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

react-advanced-tag1/src/App.css

@@ -1,9 +1,4 @@
-#root {
+
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
 
 .logo {
   height: 6em;

react-advanced-tag1/src/App.tsx

@@ -1,17 +1,23 @@
+import { Route, Routes } from 'react-router-dom'
 import './App.css'
 // import EffectExercises from './components/exercises/EffectExercises'
-import UserEffect from './components/exercises/UserEffect'
-import { UserOverview } from './components/exercises/UserOverview'
-import Heading from './components/globals/Heading'
 import MainLayout from './layouts/MainLayout'
+import HomePage from './routes/HomePage'
+import UsersPage from './routes/UsersPage'
+import EffectExercisesPage from './routes/EffectExercisesPage'
+import FormsPage from './routes/FormsPage'
+import MemoCallbackPage from './routes/MemoCallbackPage'
 
 function App() {
 
   return <MainLayout>
-    <Heading />
+    <Routes>
-    {/* <EffectExercises /> */}
+      <Route path="/" element={<HomePage />} />
-    <UserEffect />
+      <Route path="/user" element={<UsersPage />} />
-    <UserOverview />
+      <Route path="/effect" element={<EffectExercisesPage />} />
+      <Route path="/forms" element={<FormsPage />} />
+      <Route path="/memocallback" element={<MemoCallbackPage />} />
+    </Routes>
     </MainLayout>
 }
 

react-advanced-tag1/src/components/Header/Navigation.tsx

@@ -2,8 +2,11 @@ export default function Navigation () {
     return (
         <nav>
             <ul>
-                <li>home</li>
+                <li><a href="/">Home</a></li>
-                <li>test</li>
+                <li><a href="/user">Users</a></li>
+                <li><a href="/effect">Effects</a></li>
+                <li><a href="/forms">Forms</a></li>
+                <li><a href="/memocallback">Memo und Callback</a></li>
             </ul>
         </nav>);
 }

react-advanced-tag1/src/components/Header/index.tsx

@@ -4,7 +4,7 @@ const Header = () => {
     console.log("Header rendered");
     return (
         <header>
-            <h2>My Application</h2>
+            <h1>My Application</h1>
             <Navigation />
         </header>
     );

react-advanced-tag1/src/components/exercises/MemoCallback/index.tsx

@@ -23,7 +23,6 @@ export default function MemoCallback() {
     });
     return (
         <div>
-            <h1>Memo Callback Übung</h1>
             <button onClick={handleShuffle}>Shuffle</button>
             <Search onChange={handleSearch} />
             <div>

react-advanced-tag1/src/components/globals/Heading.tsx

@@ -1,8 +1,8 @@
 export default function Heading({title = "Hallo Teilnehmer"}: {title?: string}): React.ReactElement {
     console.log("Heading rendered");
     return (
-        <h1 >
+        <h2 >
             {title}
-        </h1>
+        </h2>
     );
 }

react-advanced-tag1/src/index.css

@@ -25,7 +25,6 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }

react-advanced-tag1/src/layouts/MainLayout.css

@@ -0,0 +1,56 @@
+#root {
+    width: 100%;
+}
+
+header {
+    background-color: #1a1a1a;
+    color: #ffffff;
+    padding: 1rem;
+    text-align: center;
+}
+
+header nav {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+}
+
+header nav ul {
+    list-style: none;
+    padding: 0;
+}
+header nav li {
+    display: inline;
+}
+
+header nav a {
+    color: #ffffff;
+    text-decoration: none;
+    font-weight: bold;
+    padding: 0.5rem 1rem;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+header nav a:hover {
+    text-decoration: underline;
+}
+header nav a.active {
+    text-decoration: underline;
+}
+
+
+
+footer {
+    background-color: #1a1a1a;
+    color: #ffffff;
+    padding: 1rem;
+    text-align: center;
+}
+
+
+.content {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}

react-advanced-tag1/src/layouts/MainLayout.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
+import './MainLayout.css'
 
 export default function MainLayout({children}: {children: React.ReactNode | React.ReactElement | React.ReactElement[]}): React.ReactElement {
   
@@ -17,9 +18,13 @@ export default function MainLayout({children}: {children: React.ReactNode | Reac
   return (
     <>
         <Header />
+
+        <div className="content">
             {children}
 
             <button onClick={handleClick}>Click</button>
+        </div>
+
         <Footer />
     </>
   );

react-advanced-tag1/src/main.tsx

@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
+import { BrowserRouter } from 'react-router-dom'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )

react-advanced-tag1/src/routes/EffectExercisesPage.tsx

@@ -0,0 +1,11 @@
+import EffectExercises from "../components/exercises/EffectExercises";
+import Heading from "../components/globals/Heading"
+
+export default function EffectExercisesPage() {
+    return (
+        <div>
+            <Heading title="Effekte" />
+            <EffectExercises />
+        </div>
+    );
+}

react-advanced-tag1/src/routes/FormsPage.tsx

@@ -0,0 +1,11 @@
+import RefExercise from "../components/exercises/RefExercise";
+import Heading from "../components/globals/Heading";
+
+export default function FormsPage() {
+    return (
+        <div>
+            <Heading title="Formulare" />
+            <RefExercise />
+        </div>
+    );
+}

react-advanced-tag1/src/routes/HomePage.tsx

@@ -0,0 +1,10 @@
+import Heading from "../components/globals/Heading"
+
+export default function HomePage() {
+    return (
+        <>
+            <Heading title="Willkommen" />
+            <p>Willkommen auf der Startseite!</p>
+        </>
+    );
+}

react-advanced-tag1/src/routes/MemoCallbackPage.tsx

@@ -0,0 +1,11 @@
+import MemoCallback from "../components/exercises/MemoCallback";
+import Heading from "../components/globals/Heading";
+
+export default function MemoCallbackPage() {
+    return (
+        <>
+            <Heading title="Memo und Callback" />
+            <MemoCallback />
+        </>
+    )
+}

react-advanced-tag1/src/routes/UsersPage.tsx

@@ -0,0 +1,13 @@
+import UserEffect from "../components/exercises/UserEffect";
+import { UserOverview } from "../components/exercises/UserOverview";
+import Heading from "../components/globals/Heading";
+
+export default function UsersPage() {
+    return (
+        <div>
+            <Heading title="Benutzer" />
+            <UserEffect />
+            <UserOverview />
+        </div>
+    );
+}