steffen/mms-react-abvanced
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: steffen:9ad33b98e7bb24d1d203be597e4b520b70e36171
Branches Tags
steffen:main
steffen:v2.0.0 steffen:v1.0.0
..
compare: steffen:0804eba920d7b6ce8514b65aa90c0f9e1706ff5e
Branches Tags
steffen:main
steffen:v2.0.0 steffen:v1.0.0

2 Commits
9ad33b98e7 ... 0804eba920

Author SHA1 Message Date
e560248
0804eba920 add Modal example 2025-04-08 09:58:49 +02:00
e560248
6d7060aceb add react-scan & VS Code Settings 2025-04-08 09:40:48 +02:00
7 changed files with 856 additions and 84 deletions
Expand all files Collapse all files

33
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,33 @@
{
"editor.codeActionsOnSave": {
"source.addMissingImports": "always",
"source.fixAll": "always"
},
"editor.formatOnSave": true,
"editor.detectIndentation": false,
"editor.tabSize": 2,
"files.eol": "\n",
"search.exclude": {
"**/.next": true,
"**/node_modules": true,
"**/package-lock.json": true
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json][jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}

1
react-advanced-tag1/index.html
View File

@@ -7,6 +7,7 @@
<title>React Advanced Cours</title>
</head>
<body>
<div id="modal"></div>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

842
react-advanced-tag1/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
react-advanced-tag1/package.json
View File

@@ -5,6 +5,7 @@
"type": "module",
"scripts": {
"dev": "vite",
"scan": "vite & npx react-scan@latest localhost:5173",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview",
@@ -17,7 +18,8 @@
"dependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.5.0"
"react-router-dom": "^7.5.0",
"react-scan": "^0.3.3"
},
"devDependencies": {
"@eslint/js": "^9.21.0",

18
react-advanced-tag1/src/common/components/Modal.css Normal file
View File

@@ -0,0 +1,18 @@
.modal {
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal .modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: red;
padding: 20px;
border-radius: 5px;
}

18
react-advanced-tag1/src/common/components/Modal.tsx Normal file
View File

@@ -0,0 +1,18 @@
import'./Modal.css';
interface ModalProps {
open?: boolean;
onClose?: () => void;
}
export default function Modal({ open= true, onClose }: ModalProps): React.ReactElement {
console.log("Modal rendered");
return (
<div style={{ display: open ? "block" : "none" }} className='modal' onClick={() => onClose && onClose()}>
<div className='modal-content'>
<h2>Modal</h2>
<p>This is a modal component.</p>
</div>
</div>
);
}

10
react-advanced-tag1/src/routes/ComponentWrapperPage.tsx
View File

@@ -1,14 +1,18 @@
import { createPortal } from "react-dom";
import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
import EffectExercises from "../common/components/exercises/EffectExercises";
import Modal from "../common/components/Modal";
import { useState } from "react";
export default function ComponentWrapperPage() {
const [modalOpen, setModalOpen] = useState(false);
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
<ComponentWrapper title='Komponenten Wrapper Test'>
<h1>Hallo</h1>
</ComponentWrapper>
<ComponentWrapper title='Komponenten Wrapper Test2'>
<EffectExercises />
<ComponentWrapper title='Modal Test'>
<button onClick={() => setModalOpen(!modalOpen)}>Toggle Modal</button>
{modalOpen && createPortal(<Modal onClose={() => setModalOpen(false)}/>,document.getElementById("modal") as HTMLElement)}
</ComponentWrapper>
</div>
);