ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-08-06 10:45:04 +02:00
parent fae4f8f7ce
commit 2814319650
18 changed files with 730 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
05_react/uebungen/u04_react-esbuild/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Icon Komponente in React</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="dist/bundle.js" defer></script>
</head>
<body>
<main>
<div class="container py-5">
<div id="root"></div>
</div>
</main>
</body>
</html>

530
05_react/uebungen/u04_react-esbuild/package-lock.json generated Normal file
View File

@@ -0,0 +1,530 @@
{
"name": "u04_react-esbuild",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "u04_react-esbuild",
"version": "1.0.0",
"dependencies": {
"react": "^19.2.8",
"react-dom": "^19.2.8"
},
"devDependencies": {
"esbuild": "^0.28.1"
}
},
"node_modules/@esbuild/aix-ppc64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz",
"integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==",
"cpu": [
"ppc64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"aix"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/android-arm": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz",
"integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==",
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/android-arm64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz",
"integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/android-x64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz",
"integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/darwin-arm64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz",
"integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/darwin-x64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz",
"integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/freebsd-arm64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz",
"integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/freebsd-x64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz",
"integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/linux-arm": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz",
"integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==",
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/linux-arm64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz",
"integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/linux-ia32": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz",
"integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==",
"cpu": [
"ia32"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/linux-loong64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz",
"integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==",
"cpu": [
"loong64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/linux-mips64el": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz",
"integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==",
"cpu": [
"mips64el"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/linux-ppc64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz",
"integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==",
"cpu": [
"ppc64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/linux-riscv64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz",
"integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==",
"cpu": [
"riscv64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/linux-s390x": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz",
"integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==",
"cpu": [
"s390x"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/linux-x64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz",
"integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/netbsd-arm64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz",
"integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"netbsd"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/netbsd-x64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz",
"integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"netbsd"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/openbsd-arm64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz",
"integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"openbsd"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/openbsd-x64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz",
"integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"openbsd"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/openharmony-arm64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz",
"integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"openharmony"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/sunos-x64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz",
"integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"sunos"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/win32-arm64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz",
"integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/win32-ia32": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz",
"integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==",
"cpu": [
"ia32"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@esbuild/win32-x64": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz",
"integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=18"
}
},
"node_modules/esbuild": {
"version": "0.28.1",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz",
"integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"bin": {
"esbuild": "bin/esbuild"
},
"engines": {
"node": ">=18"
},
"optionalDependencies": {
"@esbuild/aix-ppc64": "0.28.1",
"@esbuild/android-arm": "0.28.1",
"@esbuild/android-arm64": "0.28.1",
"@esbuild/android-x64": "0.28.1",
"@esbuild/darwin-arm64": "0.28.1",
"@esbuild/darwin-x64": "0.28.1",
"@esbuild/freebsd-arm64": "0.28.1",
"@esbuild/freebsd-x64": "0.28.1",
"@esbuild/linux-arm": "0.28.1",
"@esbuild/linux-arm64": "0.28.1",
"@esbuild/linux-ia32": "0.28.1",
"@esbuild/linux-loong64": "0.28.1",
"@esbuild/linux-mips64el": "0.28.1",
"@esbuild/linux-ppc64": "0.28.1",
"@esbuild/linux-riscv64": "0.28.1",
"@esbuild/linux-s390x": "0.28.1",
"@esbuild/linux-x64": "0.28.1",
"@esbuild/netbsd-arm64": "0.28.1",
"@esbuild/netbsd-x64": "0.28.1",
"@esbuild/openbsd-arm64": "0.28.1",
"@esbuild/openbsd-x64": "0.28.1",
"@esbuild/openharmony-arm64": "0.28.1",
"@esbuild/sunos-x64": "0.28.1",
"@esbuild/win32-arm64": "0.28.1",
"@esbuild/win32-ia32": "0.28.1",
"@esbuild/win32-x64": "0.28.1"
}
},
"node_modules/react": {
"version": "19.2.8",
"resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz",
"integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
"version": "19.2.8",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz",
"integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==",
"license": "MIT",
"dependencies": {
"scheduler": "^0.27.0"
},
"peerDependencies": {
"react": "^19.2.8"
}
},
"node_modules/scheduler": {
"version": "0.27.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
"license": "MIT"
}
}
}

18
05_react/uebungen/u04_react-esbuild/package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "u04_react-esbuild",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npx esbuild src/index.jsx --bundle --watch --outfile=dist/bundle.js --loader:.js=jsx"
},
"keywords": [],
"type": "module",
"dependencies": {
"react": "^19.2.8",
"react-dom": "^19.2.8"
},
"devDependencies": {
"esbuild": "^0.28.1"
}
}

1
05_react/uebungen/u04_react-esbuild/public/donkey-logo.min.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

21
05_react/uebungen/u04_react-esbuild/src/App.jsx Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import LogoDonkey from './components/icons/LogoDonkey';
const App = (props) => {
// const { } = props;
return (
<>
<div className="container">
<h1>Hello World</h1>
<hr />
<div className="row">
<div className="col-6">
<LogoDonkey />
</div>
</div>
</div>
</>
);
};
export default App;

80
05_react/uebungen/u04_react-esbuild/src/components/icons/LogoDonkey.jsx Normal file
View File

@@ -0,0 +1,80 @@
import React from 'react';
const LogoDonkey = (props) => {
// const { } = props;
return (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlSpace="preserve"
style={{
fillRule: 'evenodd',
clipRule: 'evenodd',
strokeLinejoin: 'round',
strokeMiterlimit: 2,
}}
viewBox="0 0 1613 1368">
<path
d="M1491.62 327.703c50.16-40.587 102.72-79.59 152.92-119.915l-25.83 280.393L1461.89 715c14.13 25.352 28.4 50.63 42.79 75.833 5.58 9.811 16.21 29.934 22.19 38.472-4.44 12.976-9.02 32.269-12.49 45.932l-33.12-.193c3.55-14.063 6.95-28.165 10.18-42.304-8.76-17.153-21.11-36.176-30.99-53.029-5.27-8.992-17.1-29.803-23.27-36.492-5.21-5.651-23.43-19.396-30.32-24.839l-57.69-45.595c-9.02-7.18-23.36-18.108-31.52-25.854a3790 3790 0 0 0 79.9 34.883c10.82 4.622 27.38 12.342 38.08 16.103 11.12-19.408 23.79-39.093 35.55-58.188l64.26-104.009c9.99-16.077 25.62-40.018 34.46-56.068 3.52-6.393 6.85-48.185 8.06-58.166 4.69-38.407 9.87-76.754 15.52-115.031-20.57 15.48-42.75 34.32-62.95 50.66-18.78 53.505-36.43 113.033-54.33 167.501l-28.49 86.565c-4.56 13.838-11.14 31.944-14.88 45.685l-1.29-5.393c2.3-10.028 3.74-20.126 5.56-30.234 16.33-90.641 31.56-181.542 49.86-271.809 1.47-7.288 2.87-14.507 4.66-21.727M916.43 207.704c44.769 33.604 88.1 69.829 132.46 104.027 6.86 5.295 14.41 11.109 20.87 16.827a6833 6833 0 0 1 41.74 223.08l12.21 71.991c1.13 6.395 4.09 25.45 5.79 30.617l-2.29.656-63.2-193.832-20.79-65.178c-3.86-12.199-8.24-27.736-13-39.169l-63.257-50.854c6.888 39.565 10.198 84.11 16.308 124.043 1.165 7.613 4.172 40.455 5.943 45.546 3.798 10.923 22.236 37.244 29.376 48.97l107.15 173.74a4677 4677 0 0 0 108.25-47.008l2.24 1.925-76.43 60.434c-10.13 7.985-28.28 21.239-36.65 30.226-3.2 3.426-15.5 24.819-18.4 29.725a5288 5288 0 0 0-35.02 59.795c3.1 12.683 7.7 29.414 10 41.938l-33.81-.262c-3.44-14.753-7.06-31.255-11.25-45.689 20.64-37.132 45.28-77.527 64.58-114.41l-98.43-141.667-35.592-51.293c-7.431-10.735-15.662-21.282-21.692-32.877-3.951-7.596-24.618-247.999-27.106-281.301M1219.69 1043.31c-2.79 11.8-4.44 28.03-5.98 40.2a2515 2515 0 0 1-7.3 53.97c7.43-7.73 15.18-16.75 22.37-24.81 2.7 1.21 2.96 1.43 5.42 3.19a4097 4097 0 0 1-29.29 58.56c-3.39 6.68-6.69 13.57-10.19 20.18-8.9 16.79-13.05 34.84-18.29 53.06-7.31 25.95-14.78 51.86-22.41 77.72 29.16 31.72 57.06 65.29 86.41 96.65l79.84.12c29.14-32.13 58.08-64.46 86.8-96.96-7.36-24.61-14.47-49.3-21.32-74.06-2.95-10.48-8.92-33.48-12.97-42.64-16.66-37.69-39.38-75.63-56.08-113.18 12.72 14.11 25.24 28.4 37.55 42.88-1.84-24.97-8.32-69.86-12.78-94.57 22.96 27.5 22.08 32.06 32.81 65.94l26.31 85.23c2.35-12.28 6.53-25.88 9.7-38.07 7.2-27.71 15.04-55.22 22.13-82.97 12.56-3.77 25.18-7.36 37.85-10.78-8.99 41.63-24.44 87.16-34.93 128.96-4.2 16.7-13.62 43.59-15.3 60.63-.36 3.71 6.94 28.11 8.48 33.53l13.08 47.36c-28.13 31.05-55.29 63.24-83.3 94.42-7.69 8.55-15.67 17.5-22.76 26.53l-110.06-.33-64.65-73.47c-11.64-13.15-31.3-34.1-41.59-47.75l22.85-81.08c-11.31-42.62-23.52-84.52-35.15-127.01-5.25-19.17-11.95-42.36-15.92-61.67 12.36 4.1 24.88 7.67 37.55 10.69 9.64 40.03 21.73 80.74 31.86 121.14l25.5-82.82c4.34-13.98 9.5-32.1 15.2-45.17 1.37-3.13 15.62-20.04 18.56-23.62"
style={{ fill: '#191718', fillRule: 'nonzero' }}
transform="translate(-506 -152)"
/>
<path
d="m964.12 882.509 239.67-.074c13.59 20.302 31.54 50.85 45.26 69.391-8.47 20.506-15.69 44.657-26.34 63.724-1.18 2.1-8.52 9.15-10.59 11.14-10.43 10.51-20.99 20.9-31.66 31.16-8.75 1.53-41.47 8.39-48.68 6.63-26.22-6.38-55.05-14.85-81.11-21.95-19.01-36.57-41.53-80.543-61.641-116.025a1284 1284 0 0 0-25.205-4.923c-.019-12.682-.298-26.499.296-39.073M1363.24 882.527c50.58-.964 101.17.756 151.75.291 27.29-.25 54.56-.202 81.85.189.15 12.787.18 25.576.08 38.365-8.5 1.772-17.12 3.762-25.61 5.634-15.98 33.554-39.64 74.894-57.39 108.124l-3.86 7.48c-25.69 7.76-54.32 15.66-80.31 21.45-6.66 1.49-41.79-3.49-47.46-7.01-13.08-8.13-30.93-29.46-43.47-40.05-10.32-20.237-18.51-44.265-26.57-65.342 13.31-21.086 29.21-46.841 43.74-67.508 1.43-2.037 4.48-1.524 7.25-1.623M1105.1 451.694c18.65 19.331 38.41 42.116 56.52 62.25l83.17 91.532c23.27.452 47.86.066 71.21.081 13.24-15.514 29.43-32.381 43.32-47.742l95.45-105.291-28.59 95.591c-2.89 9.652-11.85 41.969-15.48 48.649-9.2 16.895-24.99 39.914-35.95 56.324 8.15-30.165 17.07-59.243 25.78-89.16-23.07 24.539-46.59 50.88-69.56 75.834-12.26-1.991-44.55-9.279-54.75-8.337-9.51.88-35.49 6.248-46.2 8.138-21.8-22.92-42.44-47.348-64.73-70.362l-1.9 4.379c7.01 20.276 17.9 58.239 22.78 78.745-6.83-10.254-32.61-46.3-35.76-55.657-15.21-45.196-32.08-99.555-45.31-144.974"
style={{ fill: '#191718', fillRule: 'nonzero' }}
transform="translate(-506 -152)"
/>
<path
d="M1163.39 573.58c-.53-1.911-2.27-6.066-1.77-7.836.39-1.389 3.52 3.22 3.67 3.457z"
style={{ fill: '#e5e4e3', fillRule: 'nonzero' }}
transform="translate(-506 -152)"
/>
<path
d="m1228.3 712.716-51.05 109.261c10.51 14.694 21.42 28.793 31.75 43.736 10.45 8.923 17.47 28.514-.82 3.377-8.3.314-53.46 1.157-59.01-.748-18.66-9.899-41.78-24.482-60.51-35.383 10.48-6.333 29.32-15.479 38.23-21.915 9.55-6.911 27.61-25.515 36.82-34.538a6925 6925 0 0 0 64.59-63.79"
style={{ fill: '#191718', fillRule: 'nonzero' }}
transform="translate(-506 -152)"
/>
<path
d="M1209 865.713c10.45 8.923 17.47 28.514-.82 3.377-8.3.314-53.46 1.157-59.01-.748 9.58-.81 56.02 2.035 59.83-2.629"
style={{ fill: '#343233', fillRule: 'nonzero' }}
transform="translate(-506 -152)"
/>
<path
d="M1333.39 713.392c22.08 20.842 44.52 43.333 66.07 64.859 25.77 25.757 39.27 38.47 72.66 54.093-12.27 7.382-52.54 29.822-61.32 36.806-13.27.161-46.06 1.235-58.06.042-.51-1.27-.85-2.124-1.46-3.355a4142 4142 0 0 1 32.59-43.676c-16.83-35.749-34.59-72.692-50.48-108.769M1239.83 891.5c31.61-.635 66.23.218 98.01.513-9.84 14.657-19.23 29.851-28.96 44.645-3.97.074-14.65-9.322-24.74-10.04-13.74-.978-21.17 2.842-31.7 10.948-10.02-13.53-20.57-31.242-30.18-45.719zM1202.02 1241.87c.19-.83.17-1.41.78-1.89 1.93-.29 1.21 8.99 1.18 10.29l1.52 33.97c15.15 16.78 30.48 33.39 46.01 49.82 1.19 7.9 5.49 22.85 7.63 31.1-22.5-13.88-55.83-38.68-78.2-54.25 6.63-23.33 14.42-45.89 21.08-69.04"
style={{ fill: '#191718', fillRule: 'nonzero' }}
transform="translate(-506 -152)"
/>
<path
d="M1202.02 1241.87c.19-.83.17-1.41.78-1.89 1.93-.29 1.21 8.99 1.18 10.29-.65-2.95-1.14-5.47-1.96-8.4"
style={{ fill: '#828080', fillRule: 'nonzero' }}
transform="translate(-506 -152)"
/>
<path
d="M1356.86 1249.9c-.02-1.64-.45-9.44.8-10.31 1.4.25 1.71 3.54 1.97 4.76 7.02 22.26 13.86 43.81 19.96 66.33-24.57 18.49-53.29 37.07-78.72 55.08 3.26-10.11 6.52-21.35 8.5-31.79 14.28-14.97 33.11-34.63 46.26-50.24.44-10.07 1.44-24.06 1.23-33.83"
style={{ fill: '#191718', fillRule: 'nonzero' }}
transform="translate(-506 -152)"
/>
<path
d="M1356.86 1249.9c-.02-1.64-.45-9.44.8-10.31 1.4.25 1.71 3.54 1.97 4.76-2.27.24-2.13 3.36-2.77 5.55"
style={{ fill: '#696667', fillRule: 'nonzero' }}
transform="translate(-506 -152)"
/>
<path
d="M1228.78 1112.67c5.63-6.04 10.48-12.13 16.38-18.33l-10.96 21.52c-2.46-1.76-2.72-1.98-5.42-3.19M1351.28 865.837c.61 1.231.95 2.085 1.46 3.355-2.65 2.491-8.35 11.377-9.77 11.688-6.67 1.463 7.44-14.177 8.31-15.043"
style={{ fill: '#343233', fillRule: 'nonzero' }}
transform="translate(-506 -152)"
/>
<path
d="M1432.83 656.866c-.22.65-1.41 5.326-2.33 5.299-1.11-1.466.64-8.806 1.04-10.692zM1129.5 654.246c.23 1.147 1.57 6.673.48 7.453-1.55-.204-2.46-5.482-2.77-6.797z"
style={{ fill: '#696667', fillRule: 'nonzero' }}
transform="translate(-506 -152)"
/>
<path
d="M1233.99 651.16c4.95-2.98 8.72-3.172 2.24 1.925z"
style={{ fill: '#343233', fillRule: 'nonzero' }}
transform="translate(-506 -152)"
/>
</svg>
);
};
export default LogoDonkey;

10
05_react/uebungen/u04_react-esbuild/src/index.jsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);

4
05_react/uebungen/u05_product-list/src/components/ProductList.jsx
View File

@@ -4,10 +4,10 @@ const ProductList = (props) => {
// const { } = props;
return (
<ul className="m-list-products list-group">
<ul className="m-list-products list-group list-group-flush">
<ProductListItem title="Product 1" description="lorem ipsum" price={10} />
<ProductListItem title="Product 2" price={20}>
Ipsum lorem
<p> Ipsum lorem</p>
</ProductListItem>
</ul>
);

12
05_react/uebungen/u05_product-list/src/components/ProductListItem.jsx
View File

@@ -1,7 +1,15 @@
const ProductListItem = (props) => {
// const { } = props;
const { title, children, description = '', price } = props;
return <></>;
return (
<li className="product-list-item list-group-item">
<h2>{title}</h2>
<p>{children || <p>{description}</p>}</p>
<p>
<strong>{price} Lira</strong>
</p>
</li>
);
};
export default ProductListItem;
// Übung 5: Erweiterung der ProductListItem-Komponente

6
05_react/uebungen/u06_badge/src/App.jsx
View File

@@ -1,12 +1,14 @@
import Badge from './components/Badge';
function App() {
return (
<main>
<div className="container py-5">
<h1>Badges</h1>
{/* <Badge text="Neu" variant="success" />
<Badge text="Neu" variant="success" />
<Badge text="Oh oh" variant="danger" />
<Badge text="new idea" variant="info" />
<Badge text="Rabatt" variant="warning" /> */}
<Badge text="Rabatt" variant="warning" />
</div>
</main>
);

6
05_react/uebungen/u06_badge/src/components/Badge.jsx Normal file
View File

@@ -0,0 +1,6 @@
const Badge = (props) => {
const { text = '', variant = 'secondary' } = props;
return <span className={`badge text-bg-${variant} mx-1`}>{text}</span>;
};
export default Badge;

15
05_react/uebungen/u06_badge/src/components/ProductList.jsx
View File

@@ -1,15 +0,0 @@
import ProductListItem from './ProductListItem';
const ProductList = (props) => {
// const { } = props;
return (
<ul className="m-list-products list-group">
<ProductListItem title="Product 1" description="lorem ipsum" price={10} />
<ProductListItem title="Product 2" price={20}>
Ipsum lorem
</ProductListItem>
</ul>
);
};
export default ProductList;

15
05_react/uebungen/u06_badge/src/components/ProductListItem.jsx
View File

@@ -1,15 +0,0 @@
// Übung 5: Erweiterung der ProductListItem-Komponente
// Passe die ProductListItem-Komponente wie folgt an:
// Erweitere die ProductListItem-Komponente um ein weiteres Prop namens description, so dass der Produktbeschreibungstext entweder über das description-Prop oder als Kind-Komponente übergeben werden kann.
// Verwende das description-Prop, um den Beschreibungstext anzuzeigen, wenn er übergeben wird.
// Erweitere die Komponente um eine optionale Prop namens price, um den Preis des Produkts übergeben und anzuzeigen.
const ProductListItem = (props) => {
// const { } = props;
return <></>;
};
export default ProductListItem;

6
05_react/uebungen/u07_product-list-2/src/components/Badge.jsx Normal file
View File

@@ -0,0 +1,6 @@
const Badge = (props) => {
const { text = '', variant = 'secondary' } = props;
return <span className={`badge text-bg-${variant} mx-1`}>{text}</span>;
};
export default Badge;

6
05_react/uebungen/u07_product-list-2/src/components/ProductList.jsx
View File

@@ -6,9 +6,13 @@ const ProductList = (props) => {
return (
<ul className="m-list-products list-group">
<ProductListItem title="Product 1" description="lorem ipsum" price={10} />
<ProductListItem title="Product 2" price={20}>
<ProductListItem title="Product 2" price={20} variant="primary">
Ipsum lorem
</ProductListItem>
<ProductListItem title="Product 3" description="lorem ipsum" price={4.99} />
<ProductListItem title="Product 4" description="lorem ipsum" price={9.99} />
<ProductListItem title="Product 5" description="lorem ipsum" price={10} />
<ProductListItem title="Product 6" description="lorem ipsum" price={10000} variant="warning" />
</ul>
);
};

18
05_react/uebungen/u07_product-list-2/src/components/ProductListItem.jsx
View File

@@ -1,10 +1,20 @@
const ProductListItem = (props) => {
// const { } = props;
import Badge from './Badge';
return <></>;
const ProductListItem = (props) => {
const { title, description, price, children, variant } = props;
return (
<li className="product-list-item list-group-item">
<h2>{title}</h2>
<p>{children || description}</p>
<p>
<strong>Price: </strong>
<Badge text={`${price.toFixed(2)} €`} variant={price < 10 ? 'success' : variant} />
</p>
</li>
);
};
export default ProductListItem;
// Übung 7: Erweiterung der ProductListItem-Komponente Part II
// Passe die ProductListItem-Komponente wie folgt an: