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-10-22 14:44:23 +02:00
parent fd7a5a03ca
commit 62b63ff196
65 changed files with 1005 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
06_react/uebungen/u01_hello-react.zip
BIN
View File
Binary file not shown.
06_react/uebungen/u04_react-esbuild/index.html
+17
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>
06_react/uebungen/u04_react-esbuild/package.json
+18
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.3.1",
"react-dom": "^19.3.1"
},
"devDependencies": {
"esbuild": "^0.28.2"
}
}
06_react/uebungen/u04_react-esbuild/public/donkey-logo.min.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

06_react/uebungen/u04_react-esbuild/src/App.jsx
+21
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;
06_react/uebungen/u04_react-esbuild/src/components/icons/LogoDonkey.jsx
+80
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;
06_react/uebungen/u04_react-esbuild/src/index.jsx
+10
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>,
);
06_react/uebungen/u05_product-list/.gitignore
+24
View File
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
06_react/uebungen/u05_product-list/README.md
+12
View File
@@ -0,0 +1,12 @@
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
06_react/uebungen/u05_product-list/eslint.config.js
+29
View File
@@ -0,0 +1,29 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{js,jsx}'],
extends: [
js.configs.recommended,
reactHooks.configs['recommended-latest'],
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
rules: {
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
},
},
])
06_react/uebungen/u05_product-list/index.html
+14
View File
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" /> -->
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
06_react/uebungen/u05_product-list/package.json
+28
View File
@@ -0,0 +1,28 @@
{
"name": "u05_product-list",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"bootstrap": "^5.3.8",
"react": "^19.3.1",
"react-dom": "^19.3.1"
},
"devDependencies": {
"@eslint/js": "^10.0.1",
"@types/react": "^19.3.0",
"@types/react-dom": "^19.3.0",
"@vitejs/plugin-react": "^6.1.2",
"eslint": "^10.13.0",
"eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.5.7",
"globals": "^17.13.0",
"vite": "^8.3.5"
}
}
06_react/uebungen/u05_product-list/public/vite.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

06_react/uebungen/u05_product-list/src/App.jsx
+18
View File
@@ -0,0 +1,18 @@
import ProductList from './components/ProductList';
// Vite spezifische Verzeichnis-Einstellungen
// ./ -> Pfad für "src" Ordner
// / -> Pfad für "public" Ordner
function App() {
return (
<main>
<div className="container py-5">
<h1>Product List</h1>
<ProductList />
</div>
</main>
);
}
export default App;
06_react/uebungen/u05_product-list/src/assets/react.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

06_react/uebungen/u05_product-list/src/components/ProductList.jsx
+15
View File
@@ -0,0 +1,15 @@
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;
06_react/uebungen/u05_product-list/src/components/ProductListItem.jsx
+14
View File
@@ -0,0 +1,14 @@
const ProductListItem = (props) => {
// const { } = props;
return <></>;
};
export default ProductListItem;
// Ü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.
06_react/uebungen/u05_product-list/src/main.jsx
+12
View File
@@ -0,0 +1,12 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);
06_react/uebungen/u05_product-list/vite.config.js
+7
View File
@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})
06_react/uebungen/u06_badge/.gitignore
+24
View File
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
06_react/uebungen/u06_badge/README.md
+12
View File
@@ -0,0 +1,12 @@
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
06_react/uebungen/u06_badge/eslint.config.js
+29
View File
@@ -0,0 +1,29 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{js,jsx}'],
extends: [
js.configs.recommended,
reactHooks.configs['recommended-latest'],
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
rules: {
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
},
},
])
06_react/uebungen/u06_badge/index.html
+14
View File
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" /> -->
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
06_react/uebungen/u06_badge/package.json
+28
View File
@@ -0,0 +1,28 @@
{
"name": "u06_badge",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"bootstrap": "^5.3.8",
"react": "^19.3.1",
"react-dom": "^19.3.1"
},
"devDependencies": {
"@eslint/js": "^10.0.1",
"@types/react": "^19.3.0",
"@types/react-dom": "^19.3.0",
"@vitejs/plugin-react": "^6.1.2",
"eslint": "^10.13.0",
"eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.5.7",
"globals": "^17.13.0",
"vite": "^8.3.5"
}
}
06_react/uebungen/u06_badge/public/vite.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

06_react/uebungen/u06_badge/src/App.jsx
+32
View File
@@ -0,0 +1,32 @@
function App() {
return (
<main>
<div className="container py-5">
<h1>Badges</h1>
{/* <Badge text="Neu" variant="success" />
<Badge text="Oh oh" variant="danger" />
<Badge text="new idea" variant="info" />
<Badge text="Rabatt" variant="warning" /> */}
</div>
</main>
);
}
export default App;
// Übung 6: Badge Komponente
// Erstelle eine neue Komponente namens Badge, die einen Text als Prop erhält und diesen als Badge anzeigt. Verwende dabei die von Bootstrap bereitgestellten Klassen für Badges, siehe https://getbootstrap.com/docs/5.3/components/badge.
// Die Badge-Komponente soll folgende Props akzeptieren:
// - text: Der Text, der im Badge angezeigt werden soll (String, Standardwert: "").
// - variant: Die Hintergrundfarbe des Badges (String, Standardwert: "secondary"). Erlaubte Werte sind: primary, secondary, success, danger, warning, info, light, dark.
// Diese Werte werden mit dem Klassenpräfix text-bg- kombiniert, um die entsprechende Bootstrap Klasse zu erstellen.
// Dies würde einen grünen Badge mit dem Text "Neu" anzeigen. Die variant Prop "success" wird mit dem Klassenpräfix text-bg- kombiniert, um die Bootstrap Klasse text-bg-success zu erzeugen.
// Die HTML-Struktur für die Badge-Komponente von Bootstrap sieht wie folgt aus:
// <span class="badge text-bg-secondary">New</span>
06_react/uebungen/u06_badge/src/assets/react.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

06_react/uebungen/u06_badge/src/components/ProductList.jsx
+15
View File
@@ -0,0 +1,15 @@
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;
06_react/uebungen/u06_badge/src/components/ProductListItem.jsx
+15
View File
@@ -0,0 +1,15 @@
// Ü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;
06_react/uebungen/u06_badge/src/main.jsx
+12
View File
@@ -0,0 +1,12 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);
06_react/uebungen/u06_badge/vite.config.js
+7
View File
@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})
06_react/uebungen/u07_product-list-2/.gitignore
+24
View File
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
06_react/uebungen/u07_product-list-2/README.md
+12
View File
@@ -0,0 +1,12 @@
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
06_react/uebungen/u07_product-list-2/eslint.config.js
+29
View File
@@ -0,0 +1,29 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{js,jsx}'],
extends: [
js.configs.recommended,
reactHooks.configs['recommended-latest'],
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
rules: {
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
},
},
])
06_react/uebungen/u07_product-list-2/index.html
+14
View File
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" /> -->
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
06_react/uebungen/u07_product-list-2/package.json
+28
View File
@@ -0,0 +1,28 @@
{
"name": "u07_product-list-2",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"bootstrap": "^5.3.8",
"react": "^19.3.1",
"react-dom": "^19.3.1"
},
"devDependencies": {
"@eslint/js": "^10.0.1",
"@types/react": "^19.3.0",
"@types/react-dom": "^19.3.0",
"@vitejs/plugin-react": "^6.1.2",
"eslint": "^10.13.0",
"eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.5.7",
"globals": "^17.13.0",
"vite": "^8.3.5"
}
}
06_react/uebungen/u07_product-list-2/public/vite.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

06_react/uebungen/u07_product-list-2/src/App.jsx
+18
View File
@@ -0,0 +1,18 @@
import ProductList from './components/ProductList';
// Vite spezifische Verzeichnis-Einstellungen
// ./ -> Pfad für "src" Ordner
// / -> Pfad für "public" Ordner
function App() {
return (
<main>
<div className="container py-5">
<h1>Product List</h1>
<ProductList />
</div>
</main>
);
}
export default App;
06_react/uebungen/u07_product-list-2/src/assets/react.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

06_react/uebungen/u07_product-list-2/src/components/ProductList.jsx
+28
View File
@@ -0,0 +1,28 @@
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;
// Übung 7: Erweiterung der ProductListItem-Komponente Part II
// Passe die ProductListItem-Komponente wie folgt an:
// Erweitere die ProductListItem-Komponente um ein weiteres Prop namens price, um den Preis des Produkts anzuzeigen.
// Verwende das price-Prop, um den Preis des Produkts anzuzeigen, wenn er übergeben wird.
// Für die Angabe des Preises kannst du die Badge-Komponente verwenden, die du in der vorherigen Übung erstellt hast.
// Der Preis soll in der Ausgabe auf zwei Nachkommastellen gerundet werden.
// Füge eine Bedingung hinzu, wenn der Preis unter 10 Dollar liegt, soll der Preis in grün angezeigt werden.
06_react/uebungen/u07_product-list-2/src/components/ProductListItem.jsx
+19
View File
@@ -0,0 +1,19 @@
const ProductListItem = (props) => {
// const { } = props;
return <></>;
};
export default ProductListItem;
// Übung 7: Erweiterung der ProductListItem-Komponente Part II
// Passe die ProductListItem-Komponente wie folgt an:
// Erweitere die ProductListItem-Komponente um ein weiteres Prop namens price, um den Preis des Produkts anzuzeigen.
// Verwende das price-Prop, um den Preis des Produkts anzuzeigen, wenn er übergeben wird.
// Für die Angabe des Preises kannst du die Badge-Komponente verwenden, die du in der vorherigen Übung erstellt hast.
// Der Preis soll in der Ausgabe auf zwei Nachkommastellen gerundet werden.
// Füge eine Bedingung hinzu, wenn der Preis unter 10 Dollar liegt, soll der Preis in grün angezeigt werden.
06_react/uebungen/u07_product-list-2/src/main.jsx
+12
View File
@@ -0,0 +1,12 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);
06_react/uebungen/u07_product-list-2/vite.config.js
+7
View File
@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})
06_react/uebungen/u08_badge-2/.gitignore
+24
View File
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
06_react/uebungen/u08_badge-2/README.md
+12
View File
@@ -0,0 +1,12 @@
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
06_react/uebungen/u08_badge-2/eslint.config.js
+29
View File
@@ -0,0 +1,29 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{js,jsx}'],
extends: [
js.configs.recommended,
reactHooks.configs['recommended-latest'],
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
rules: {
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
},
},
])
06_react/uebungen/u08_badge-2/index.html
+29
View File
@@ -0,0 +1,29 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 8: Badge Komponente Part 2</title>
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" /> -->
</head>
<body>
<div id="root"></div>
<div class="container py-2">
<div class="alert alert-primary">
<h2>Übung 8: Badge Komponente Part 2</h2>
<p>
Nachdem Du in Übung 6 die Badge-Komponente erstellt hast, erweitere sie um die Möglichkeit, die
Hintergrundfarbe über eine color-Prop mit einem Hex-Farbwert zu definieren. Nutze hierfür die
Inline-Styling-Methode.
</p>
<p>
Die <code>color</code>-Prop hat Priorität vor der variant-Prop. Wenn color gesetzt ist, wird die
Hintergrundfarbe des Badges mit diesem Wert festgelegt. Andernfalls wird die Hintergrundfarbe über die
variant-Prop bestimmt, wie in Übung 6 beschrieben.
</p>
</div>
</div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
06_react/uebungen/u08_badge-2/package.json
+28
View File
@@ -0,0 +1,28 @@
{
"name": "u08_badge-2",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"bootstrap": "^5.3.8",
"react": "^19.3.1",
"react-dom": "^19.3.1"
},
"devDependencies": {
"@eslint/js": "^10.0.1",
"@types/react": "^19.3.0",
"@types/react-dom": "^19.3.0",
"@vitejs/plugin-react": "^6.1.2",
"eslint": "^10.13.0",
"eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.5.7",
"globals": "^17.13.0",
"vite": "^8.3.5"
}
}
06_react/uebungen/u08_badge-2/public/vite.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

06_react/uebungen/u08_badge-2/src/App.jsx
+21
View File
@@ -0,0 +1,21 @@
function App() {
return (
<main>
<div className="container py-5">
<h1>Badges</h1>
{/* <Badge text="Neu" variant="success" />
<Badge text="Oh oh" variant="danger" />
<Badge text="new idea" variant="info" />
<Badge text="Rabatt" variant="warning" /> */}
</div>
</main>
);
}
export default App;
// Übung 8: Badge Komponente Part 2
// Nachdem Du in Übung 6 die Badge-Komponente erstellt hast, erweitere sie um die Möglichkeit, die Hintergrundfarbe über eine color-Prop mit einem Hex-Farbwert zu definieren. Nutze hierfür die Inline-Styling-Methode.
// Die color-Prop hat Priorität vor der variant-Prop. Wenn color gesetzt ist, wird die Hintergrundfarbe des Badges mit diesem Wert festgelegt. Andernfalls wird die Hintergrundfarbe über die variant-Prop bestimmt, wie in Übung 6 beschrieben.
06_react/uebungen/u08_badge-2/src/assets/react.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

06_react/uebungen/u08_badge-2/src/components/ProductList.jsx
+15
View File
@@ -0,0 +1,15 @@
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;
06_react/uebungen/u08_badge-2/src/components/ProductListItem.jsx
+15
View File
@@ -0,0 +1,15 @@
// Ü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;
06_react/uebungen/u08_badge-2/src/main.jsx
+12
View File
@@ -0,0 +1,12 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);
06_react/uebungen/u08_badge-2/vite.config.js
+7
View File
@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})
06_react/uebungen/uebungen-01-03-react.zip
BIN
View File
Binary file not shown.
06_react/uebungen/uebungen-05-08-react.zip
BIN
View File
Binary file not shown.