diff --git a/06_react/uebungen/u01_hello-react.zip b/06_react/uebungen/u01_hello-react.zip deleted file mode 100644 index 1f09a76..0000000 Binary files a/06_react/uebungen/u01_hello-react.zip and /dev/null differ diff --git a/06_react/uebungen/u04_react-esbuild/index.html b/06_react/uebungen/u04_react-esbuild/index.html new file mode 100644 index 0000000..d5ce758 --- /dev/null +++ b/06_react/uebungen/u04_react-esbuild/index.html @@ -0,0 +1,17 @@ + + + + + + Icon Komponente in React + + + + +
+
+
+
+
+ + diff --git a/06_react/uebungen/u04_react-esbuild/package.json b/06_react/uebungen/u04_react-esbuild/package.json new file mode 100644 index 0000000..6a8d9d6 --- /dev/null +++ b/06_react/uebungen/u04_react-esbuild/package.json @@ -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" + } +} diff --git a/06_react/uebungen/u04_react-esbuild/public/donkey-logo.min.svg b/06_react/uebungen/u04_react-esbuild/public/donkey-logo.min.svg new file mode 100644 index 0000000..190368f --- /dev/null +++ b/06_react/uebungen/u04_react-esbuild/public/donkey-logo.min.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/06_react/uebungen/u04_react-esbuild/src/App.jsx b/06_react/uebungen/u04_react-esbuild/src/App.jsx new file mode 100644 index 0000000..ccbb542 --- /dev/null +++ b/06_react/uebungen/u04_react-esbuild/src/App.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import LogoDonkey from './components/icons/LogoDonkey'; + +const App = (props) => { + // const { } = props; + + return ( + <> +
+

Hello World

+
+
+
+ +
+
+
+ + ); +}; +export default App; diff --git a/06_react/uebungen/u04_react-esbuild/src/components/icons/LogoDonkey.jsx b/06_react/uebungen/u04_react-esbuild/src/components/icons/LogoDonkey.jsx new file mode 100644 index 0000000..958a172 --- /dev/null +++ b/06_react/uebungen/u04_react-esbuild/src/components/icons/LogoDonkey.jsx @@ -0,0 +1,80 @@ +import React from 'react'; + +const LogoDonkey = (props) => { + // const { } = props; + + return ( + + + + + + + + + + + + + + + ); +}; +export default LogoDonkey; diff --git a/06_react/uebungen/u04_react-esbuild/src/index.jsx b/06_react/uebungen/u04_react-esbuild/src/index.jsx new file mode 100644 index 0000000..f3564b7 --- /dev/null +++ b/06_react/uebungen/u04_react-esbuild/src/index.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; + +import App from './App'; + +ReactDOM.createRoot(document.getElementById('root')).render( + + + , +); diff --git a/06_react/uebungen/u05_product-list/.gitignore b/06_react/uebungen/u05_product-list/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/06_react/uebungen/u05_product-list/.gitignore @@ -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? diff --git a/06_react/uebungen/u05_product-list/README.md b/06_react/uebungen/u05_product-list/README.md new file mode 100644 index 0000000..7059a96 --- /dev/null +++ b/06_react/uebungen/u05_product-list/README.md @@ -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. diff --git a/06_react/uebungen/u05_product-list/eslint.config.js b/06_react/uebungen/u05_product-list/eslint.config.js new file mode 100644 index 0000000..cee1e2c --- /dev/null +++ b/06_react/uebungen/u05_product-list/eslint.config.js @@ -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_]' }], + }, + }, +]) diff --git a/06_react/uebungen/u05_product-list/index.html b/06_react/uebungen/u05_product-list/index.html new file mode 100644 index 0000000..993aedd --- /dev/null +++ b/06_react/uebungen/u05_product-list/index.html @@ -0,0 +1,14 @@ + + + + + + + Vite + React + + + +
+ + + diff --git a/06_react/uebungen/u05_product-list/package.json b/06_react/uebungen/u05_product-list/package.json new file mode 100644 index 0000000..dad349d --- /dev/null +++ b/06_react/uebungen/u05_product-list/package.json @@ -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" + } +} diff --git a/06_react/uebungen/u05_product-list/public/vite.svg b/06_react/uebungen/u05_product-list/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/06_react/uebungen/u05_product-list/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/06_react/uebungen/u05_product-list/src/App.jsx b/06_react/uebungen/u05_product-list/src/App.jsx new file mode 100644 index 0000000..af22a3e --- /dev/null +++ b/06_react/uebungen/u05_product-list/src/App.jsx @@ -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 ( +
+
+

Product List

+ +
+
+ ); +} + +export default App; diff --git a/06_react/uebungen/u05_product-list/src/assets/react.svg b/06_react/uebungen/u05_product-list/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/06_react/uebungen/u05_product-list/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/06_react/uebungen/u05_product-list/src/components/ProductList.jsx b/06_react/uebungen/u05_product-list/src/components/ProductList.jsx new file mode 100644 index 0000000..118de05 --- /dev/null +++ b/06_react/uebungen/u05_product-list/src/components/ProductList.jsx @@ -0,0 +1,15 @@ +import ProductListItem from './ProductListItem'; + +const ProductList = (props) => { + // const { } = props; + + return ( + + ); +}; +export default ProductList; diff --git a/06_react/uebungen/u05_product-list/src/components/ProductListItem.jsx b/06_react/uebungen/u05_product-list/src/components/ProductListItem.jsx new file mode 100644 index 0000000..f273980 --- /dev/null +++ b/06_react/uebungen/u05_product-list/src/components/ProductListItem.jsx @@ -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. diff --git a/06_react/uebungen/u05_product-list/src/main.jsx b/06_react/uebungen/u05_product-list/src/main.jsx new file mode 100644 index 0000000..0aef577 --- /dev/null +++ b/06_react/uebungen/u05_product-list/src/main.jsx @@ -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( + + + +); diff --git a/06_react/uebungen/u05_product-list/vite.config.js b/06_react/uebungen/u05_product-list/vite.config.js new file mode 100644 index 0000000..8b0f57b --- /dev/null +++ b/06_react/uebungen/u05_product-list/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +}) diff --git a/06_react/uebungen/u06_badge/.gitignore b/06_react/uebungen/u06_badge/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/06_react/uebungen/u06_badge/.gitignore @@ -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? diff --git a/06_react/uebungen/u06_badge/README.md b/06_react/uebungen/u06_badge/README.md new file mode 100644 index 0000000..7059a96 --- /dev/null +++ b/06_react/uebungen/u06_badge/README.md @@ -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. diff --git a/06_react/uebungen/u06_badge/eslint.config.js b/06_react/uebungen/u06_badge/eslint.config.js new file mode 100644 index 0000000..cee1e2c --- /dev/null +++ b/06_react/uebungen/u06_badge/eslint.config.js @@ -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_]' }], + }, + }, +]) diff --git a/06_react/uebungen/u06_badge/index.html b/06_react/uebungen/u06_badge/index.html new file mode 100644 index 0000000..993aedd --- /dev/null +++ b/06_react/uebungen/u06_badge/index.html @@ -0,0 +1,14 @@ + + + + + + + Vite + React + + + +
+ + + diff --git a/06_react/uebungen/u06_badge/package.json b/06_react/uebungen/u06_badge/package.json new file mode 100644 index 0000000..8e9d316 --- /dev/null +++ b/06_react/uebungen/u06_badge/package.json @@ -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" + } +} diff --git a/06_react/uebungen/u06_badge/public/vite.svg b/06_react/uebungen/u06_badge/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/06_react/uebungen/u06_badge/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/06_react/uebungen/u06_badge/src/App.jsx b/06_react/uebungen/u06_badge/src/App.jsx new file mode 100644 index 0000000..7be26b2 --- /dev/null +++ b/06_react/uebungen/u06_badge/src/App.jsx @@ -0,0 +1,32 @@ +function App() { + return ( +
+
+

Badges

+ {/* + + + */} +
+
+ ); +} + +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: + +// New diff --git a/06_react/uebungen/u06_badge/src/assets/react.svg b/06_react/uebungen/u06_badge/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/06_react/uebungen/u06_badge/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/06_react/uebungen/u06_badge/src/components/ProductList.jsx b/06_react/uebungen/u06_badge/src/components/ProductList.jsx new file mode 100644 index 0000000..118de05 --- /dev/null +++ b/06_react/uebungen/u06_badge/src/components/ProductList.jsx @@ -0,0 +1,15 @@ +import ProductListItem from './ProductListItem'; + +const ProductList = (props) => { + // const { } = props; + + return ( + + ); +}; +export default ProductList; diff --git a/06_react/uebungen/u06_badge/src/components/ProductListItem.jsx b/06_react/uebungen/u06_badge/src/components/ProductListItem.jsx new file mode 100644 index 0000000..8165797 --- /dev/null +++ b/06_react/uebungen/u06_badge/src/components/ProductListItem.jsx @@ -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; diff --git a/06_react/uebungen/u06_badge/src/main.jsx b/06_react/uebungen/u06_badge/src/main.jsx new file mode 100644 index 0000000..0aef577 --- /dev/null +++ b/06_react/uebungen/u06_badge/src/main.jsx @@ -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( + + + +); diff --git a/06_react/uebungen/u06_badge/vite.config.js b/06_react/uebungen/u06_badge/vite.config.js new file mode 100644 index 0000000..8b0f57b --- /dev/null +++ b/06_react/uebungen/u06_badge/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +}) diff --git a/06_react/uebungen/u07_product-list-2/.gitignore b/06_react/uebungen/u07_product-list-2/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/06_react/uebungen/u07_product-list-2/.gitignore @@ -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? diff --git a/06_react/uebungen/u07_product-list-2/README.md b/06_react/uebungen/u07_product-list-2/README.md new file mode 100644 index 0000000..7059a96 --- /dev/null +++ b/06_react/uebungen/u07_product-list-2/README.md @@ -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. diff --git a/06_react/uebungen/u07_product-list-2/eslint.config.js b/06_react/uebungen/u07_product-list-2/eslint.config.js new file mode 100644 index 0000000..cee1e2c --- /dev/null +++ b/06_react/uebungen/u07_product-list-2/eslint.config.js @@ -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_]' }], + }, + }, +]) diff --git a/06_react/uebungen/u07_product-list-2/index.html b/06_react/uebungen/u07_product-list-2/index.html new file mode 100644 index 0000000..993aedd --- /dev/null +++ b/06_react/uebungen/u07_product-list-2/index.html @@ -0,0 +1,14 @@ + + + + + + + Vite + React + + + +
+ + + diff --git a/06_react/uebungen/u07_product-list-2/package.json b/06_react/uebungen/u07_product-list-2/package.json new file mode 100644 index 0000000..95c6048 --- /dev/null +++ b/06_react/uebungen/u07_product-list-2/package.json @@ -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" + } +} diff --git a/06_react/uebungen/u07_product-list-2/public/vite.svg b/06_react/uebungen/u07_product-list-2/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/06_react/uebungen/u07_product-list-2/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/06_react/uebungen/u07_product-list-2/src/App.jsx b/06_react/uebungen/u07_product-list-2/src/App.jsx new file mode 100644 index 0000000..af22a3e --- /dev/null +++ b/06_react/uebungen/u07_product-list-2/src/App.jsx @@ -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 ( +
+
+

Product List

+ +
+
+ ); +} + +export default App; diff --git a/06_react/uebungen/u07_product-list-2/src/assets/react.svg b/06_react/uebungen/u07_product-list-2/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/06_react/uebungen/u07_product-list-2/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/06_react/uebungen/u07_product-list-2/src/components/ProductList.jsx b/06_react/uebungen/u07_product-list-2/src/components/ProductList.jsx new file mode 100644 index 0000000..322f022 --- /dev/null +++ b/06_react/uebungen/u07_product-list-2/src/components/ProductList.jsx @@ -0,0 +1,28 @@ +import ProductListItem from './ProductListItem'; + +const ProductList = (props) => { + // const { } = props; + + return ( + + ); +}; +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. diff --git a/06_react/uebungen/u07_product-list-2/src/components/ProductListItem.jsx b/06_react/uebungen/u07_product-list-2/src/components/ProductListItem.jsx new file mode 100644 index 0000000..05b60fd --- /dev/null +++ b/06_react/uebungen/u07_product-list-2/src/components/ProductListItem.jsx @@ -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. diff --git a/06_react/uebungen/u07_product-list-2/src/main.jsx b/06_react/uebungen/u07_product-list-2/src/main.jsx new file mode 100644 index 0000000..0aef577 --- /dev/null +++ b/06_react/uebungen/u07_product-list-2/src/main.jsx @@ -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( + + + +); diff --git a/06_react/uebungen/u07_product-list-2/vite.config.js b/06_react/uebungen/u07_product-list-2/vite.config.js new file mode 100644 index 0000000..8b0f57b --- /dev/null +++ b/06_react/uebungen/u07_product-list-2/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +}) diff --git a/06_react/uebungen/u08_badge-2/.gitignore b/06_react/uebungen/u08_badge-2/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/06_react/uebungen/u08_badge-2/.gitignore @@ -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? diff --git a/06_react/uebungen/u08_badge-2/README.md b/06_react/uebungen/u08_badge-2/README.md new file mode 100644 index 0000000..7059a96 --- /dev/null +++ b/06_react/uebungen/u08_badge-2/README.md @@ -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. diff --git a/06_react/uebungen/u08_badge-2/eslint.config.js b/06_react/uebungen/u08_badge-2/eslint.config.js new file mode 100644 index 0000000..cee1e2c --- /dev/null +++ b/06_react/uebungen/u08_badge-2/eslint.config.js @@ -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_]' }], + }, + }, +]) diff --git a/06_react/uebungen/u08_badge-2/index.html b/06_react/uebungen/u08_badge-2/index.html new file mode 100644 index 0000000..4d9c683 --- /dev/null +++ b/06_react/uebungen/u08_badge-2/index.html @@ -0,0 +1,29 @@ + + + + + + + Übung 8: Badge Komponente Part 2 + + + +
+
+
+

Ü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. +

+
+
+ + + diff --git a/06_react/uebungen/u08_badge-2/package.json b/06_react/uebungen/u08_badge-2/package.json new file mode 100644 index 0000000..66d137a --- /dev/null +++ b/06_react/uebungen/u08_badge-2/package.json @@ -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" + } +} diff --git a/06_react/uebungen/u08_badge-2/public/vite.svg b/06_react/uebungen/u08_badge-2/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/06_react/uebungen/u08_badge-2/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/06_react/uebungen/u08_badge-2/src/App.jsx b/06_react/uebungen/u08_badge-2/src/App.jsx new file mode 100644 index 0000000..c0fa506 --- /dev/null +++ b/06_react/uebungen/u08_badge-2/src/App.jsx @@ -0,0 +1,21 @@ +function App() { + return ( +
+
+

Badges

+ {/* + + + */} +
+
+ ); +} + +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. diff --git a/06_react/uebungen/u08_badge-2/src/assets/react.svg b/06_react/uebungen/u08_badge-2/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/06_react/uebungen/u08_badge-2/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/06_react/uebungen/u08_badge-2/src/components/ProductList.jsx b/06_react/uebungen/u08_badge-2/src/components/ProductList.jsx new file mode 100644 index 0000000..118de05 --- /dev/null +++ b/06_react/uebungen/u08_badge-2/src/components/ProductList.jsx @@ -0,0 +1,15 @@ +import ProductListItem from './ProductListItem'; + +const ProductList = (props) => { + // const { } = props; + + return ( + + ); +}; +export default ProductList; diff --git a/06_react/uebungen/u08_badge-2/src/components/ProductListItem.jsx b/06_react/uebungen/u08_badge-2/src/components/ProductListItem.jsx new file mode 100644 index 0000000..8165797 --- /dev/null +++ b/06_react/uebungen/u08_badge-2/src/components/ProductListItem.jsx @@ -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; diff --git a/06_react/uebungen/u08_badge-2/src/main.jsx b/06_react/uebungen/u08_badge-2/src/main.jsx new file mode 100644 index 0000000..0aef577 --- /dev/null +++ b/06_react/uebungen/u08_badge-2/src/main.jsx @@ -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( + + + +); diff --git a/06_react/uebungen/u08_badge-2/vite.config.js b/06_react/uebungen/u08_badge-2/vite.config.js new file mode 100644 index 0000000..8b0f57b --- /dev/null +++ b/06_react/uebungen/u08_badge-2/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +}) diff --git a/06_react/uebungen/uebungen-01-03-react.zip b/06_react/uebungen/uebungen-01-03-react.zip deleted file mode 100644 index e66188b..0000000 Binary files a/06_react/uebungen/uebungen-01-03-react.zip and /dev/null differ diff --git a/06_react/uebungen/uebungen-05-08-react.zip b/06_react/uebungen/uebungen-05-08-react.zip new file mode 100644 index 0000000..9cca0dc Binary files /dev/null and b/06_react/uebungen/uebungen-05-08-react.zip differ diff --git a/06_react/unterricht/tag34/04_reusable-components/public/logo-js.min.svg b/06_react/unterricht/tag34/04_reusable-components/public/logo-js.min.svg new file mode 100644 index 0000000..4acd335 --- /dev/null +++ b/06_react/unterricht/tag34/04_reusable-components/public/logo-js.min.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/06_react/unterricht/tag34/04_reusable-components/src/App.jsx b/06_react/unterricht/tag34/04_reusable-components/src/App.jsx index 2161d04..b835297 100644 --- a/06_react/unterricht/tag34/04_reusable-components/src/App.jsx +++ b/06_react/unterricht/tag34/04_reusable-components/src/App.jsx @@ -1,18 +1,25 @@ import Button from './components/buttons/Button'; +import HeaderMain from './components/headers/HeaderMain'; +import InputAmount from './components/inputs/InputAmount'; function App(props) { // const { } = props; return ( -
-

Reusable Components

-
- -
- -
- -
+ <> + +
+

Reusable Components

+ + +
+ +
+ +
+ +
+ ); } export default App; diff --git a/06_react/unterricht/tag34/04_reusable-components/src/components/headers/HeaderMain.jsx b/06_react/unterricht/tag34/04_reusable-components/src/components/headers/HeaderMain.jsx new file mode 100644 index 0000000..d99ef0f --- /dev/null +++ b/06_react/unterricht/tag34/04_reusable-components/src/components/headers/HeaderMain.jsx @@ -0,0 +1,12 @@ +import LogoMain from '../logos/LogoMain'; + +const HeaderMain = () => { + return ( +
+
+ +
+
+ ); +}; +export default HeaderMain; diff --git a/06_react/unterricht/tag34/04_reusable-components/src/components/inputs/InputAmount.jsx b/06_react/unterricht/tag34/04_reusable-components/src/components/inputs/InputAmount.jsx new file mode 100644 index 0000000..652c779 --- /dev/null +++ b/06_react/unterricht/tag34/04_reusable-components/src/components/inputs/InputAmount.jsx @@ -0,0 +1,26 @@ +import { FaMinus, FaPlus } from 'react-icons/fa6'; + +const InputAmount = (props) => { + // const { } = props; + + return ( +
+
+ + + + + + + +
+
+ ); +}; +export default InputAmount; diff --git a/06_react/unterricht/tag34/04_reusable-components/src/components/logos/LogoMain.jsx b/06_react/unterricht/tag34/04_reusable-components/src/components/logos/LogoMain.jsx new file mode 100644 index 0000000..d813bf0 --- /dev/null +++ b/06_react/unterricht/tag34/04_reusable-components/src/components/logos/LogoMain.jsx @@ -0,0 +1,12 @@ +import Logo from '/logo-js.min.svg'; +const LogoMain = (props) => { + // const { } = props; + + return ( +
+ JS Course +
Firmen Slogan
+
+ ); +}; +export default LogoMain; diff --git a/06_react/unterricht/tag34/04_reusable-components/src/styles/05_modules/_header-main.scss b/06_react/unterricht/tag34/04_reusable-components/src/styles/05_modules/_header-main.scss index cb67561..2884477 100644 --- a/06_react/unterricht/tag34/04_reusable-components/src/styles/05_modules/_header-main.scss +++ b/06_react/unterricht/tag34/04_reusable-components/src/styles/05_modules/_header-main.scss @@ -1,9 +1,9 @@ -.header-main { +.m-header-main { width: 100%; height: 400px; // https://cssreference.io/property/background/ - background: black url('../../assets/img/header-bg.webp') center no-repeat border-box; + background: #efefef url('../../assets/img/header-bg.webp') center no-repeat border-box; background-size: cover; display: flex; diff --git a/06_react/unterricht/tag34/04_reusable-components/src/styles/05_modules/_index.scss b/06_react/unterricht/tag34/04_reusable-components/src/styles/05_modules/_index.scss index a508513..594a29d 100644 --- a/06_react/unterricht/tag34/04_reusable-components/src/styles/05_modules/_index.scss +++ b/06_react/unterricht/tag34/04_reusable-components/src/styles/05_modules/_index.scss @@ -1,6 +1,7 @@ @forward 'button'; // @forward 'chuck-norris-joke'; -// @forward 'header-main'; -// @forward 'logo-main'; +@forward 'header-main'; +@forward 'input-amount'; +@forward 'logo-main'; // @forward 'menu-main'; // @forward 'product-manager'; diff --git a/06_react/unterricht/tag34/04_reusable-components/src/styles/05_modules/_input-amount.scss b/06_react/unterricht/tag34/04_reusable-components/src/styles/05_modules/_input-amount.scss new file mode 100644 index 0000000..8701a7c --- /dev/null +++ b/06_react/unterricht/tag34/04_reusable-components/src/styles/05_modules/_input-amount.scss @@ -0,0 +1,27 @@ +.m-input-amount { + .input-group { + .input-group-text { + padding: 0; + display: inline-block; + overflow: hidden; + button { + border-radius: 0; + } + } + input { + max-width: 85px; + text-align: center; + } + /* Für Chrome, Safari, Edge und Opera */ + input::-webkit-outer-spin-button, + input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + + /* Für Firefox */ + input[type='number'] { + appearance: textfield; + } + } +}