From cd4f632c856d2836524e7c29b40bc7a34cd1db7f Mon Sep 17 00:00:00 2001 From: e560248 Date: Mon, 7 Apr 2025 17:01:44 +0200 Subject: [PATCH] add Page Router & improve styling --- react-advanced-tag1/package-lock.json | 70 ++++++++++++++++++- react-advanced-tag1/package.json | 3 +- react-advanced-tag1/src/App.css | 7 +- react-advanced-tag1/src/App.tsx | 20 ++++-- .../src/components/Header/Navigation.tsx | 7 +- .../src/components/Header/index.tsx | 2 +- .../exercises/MemoCallback/index.tsx | 1 - .../src/components/globals/Heading.tsx | 4 +- react-advanced-tag1/src/index.css | 1 - .../src/layouts/MainLayout.css | 56 +++++++++++++++ .../src/layouts/MainLayout.tsx | 5 ++ react-advanced-tag1/src/main.tsx | 5 +- .../src/routes/EffectExercisesPage.tsx | 11 +++ react-advanced-tag1/src/routes/FormsPage.tsx | 11 +++ react-advanced-tag1/src/routes/HomePage.tsx | 10 +++ .../src/routes/MemoCallbackPage.tsx | 11 +++ react-advanced-tag1/src/routes/UsersPage.tsx | 13 ++++ 17 files changed, 214 insertions(+), 23 deletions(-) create mode 100644 react-advanced-tag1/src/layouts/MainLayout.css create mode 100644 react-advanced-tag1/src/routes/EffectExercisesPage.tsx create mode 100644 react-advanced-tag1/src/routes/FormsPage.tsx create mode 100644 react-advanced-tag1/src/routes/HomePage.tsx create mode 100644 react-advanced-tag1/src/routes/MemoCallbackPage.tsx create mode 100644 react-advanced-tag1/src/routes/UsersPage.tsx diff --git a/react-advanced-tag1/package-lock.json b/react-advanced-tag1/package-lock.json index 4577098..3b2a24c 100644 --- a/react-advanced-tag1/package-lock.json +++ b/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", diff --git a/react-advanced-tag1/package.json b/react-advanced-tag1/package.json index 6bb960f..86a1054 100644 --- a/react-advanced-tag1/package.json +++ b/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", diff --git a/react-advanced-tag1/src/App.css b/react-advanced-tag1/src/App.css index 59657e8..80815d6 100644 --- a/react-advanced-tag1/src/App.css +++ b/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; diff --git a/react-advanced-tag1/src/App.tsx b/react-advanced-tag1/src/App.tsx index 35690fa..521f805 100644 --- a/react-advanced-tag1/src/App.tsx +++ b/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 - - {/* */} - - + + } /> + } /> + } /> + } /> + } /> + } diff --git a/react-advanced-tag1/src/components/Header/Navigation.tsx b/react-advanced-tag1/src/components/Header/Navigation.tsx index dd76375..5a7232c 100644 --- a/react-advanced-tag1/src/components/Header/Navigation.tsx +++ b/react-advanced-tag1/src/components/Header/Navigation.tsx @@ -2,8 +2,11 @@ export default function Navigation () { return ( ); } \ No newline at end of file diff --git a/react-advanced-tag1/src/components/Header/index.tsx b/react-advanced-tag1/src/components/Header/index.tsx index 33bc505..9019224 100644 --- a/react-advanced-tag1/src/components/Header/index.tsx +++ b/react-advanced-tag1/src/components/Header/index.tsx @@ -4,7 +4,7 @@ const Header = () => { console.log("Header rendered"); return (
-

My Application

+

My Application

); diff --git a/react-advanced-tag1/src/components/exercises/MemoCallback/index.tsx b/react-advanced-tag1/src/components/exercises/MemoCallback/index.tsx index 319a8af..c30cac5 100644 --- a/react-advanced-tag1/src/components/exercises/MemoCallback/index.tsx +++ b/react-advanced-tag1/src/components/exercises/MemoCallback/index.tsx @@ -23,7 +23,6 @@ export default function MemoCallback() { }); return (
-

Memo Callback Übung

diff --git a/react-advanced-tag1/src/components/globals/Heading.tsx b/react-advanced-tag1/src/components/globals/Heading.tsx index ab12170..713ce22 100644 --- a/react-advanced-tag1/src/components/globals/Heading.tsx +++ b/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 ( -

+

{title} -

+ ); } \ No newline at end of file diff --git a/react-advanced-tag1/src/index.css b/react-advanced-tag1/src/index.css index 08a3ac9..0ca03a0 100644 --- a/react-advanced-tag1/src/index.css +++ b/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; } diff --git a/react-advanced-tag1/src/layouts/MainLayout.css b/react-advanced-tag1/src/layouts/MainLayout.css new file mode 100644 index 0000000..6ee3ccb --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/react-advanced-tag1/src/layouts/MainLayout.tsx b/react-advanced-tag1/src/layouts/MainLayout.tsx index 1aca3ee..40a8b58 100644 --- a/react-advanced-tag1/src/layouts/MainLayout.tsx +++ b/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 ( <>
+ +
{children} +
+