feat: init react
This commit is contained in:
Philippe Torrel
Binary file not shown.
@@ -542,83 +542,11 @@ Projektarbeit
|
||||
|
||||
---
|
||||
|
||||
# Einführung in React
|
||||
|
||||
---
|
||||
|
||||
### Tag 36
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- **Exkurs: Finalisierung Projekt Webseite in TS (Gulp)**
|
||||
- Einführung in REACT
|
||||
- VDOM von REACT
|
||||
- React im Vergleich zu anderen Frameworks (Stats)
|
||||
- Verwendung von Bundlern
|
||||
- Build Tools im Vergleich & Einführung in Vite
|
||||
- Komponenten in React
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 01 - 03
|
||||
|
||||
---
|
||||
|
||||
### Tag 37
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Einsatz von Bundlern
|
||||
- Komponenten in React
|
||||
- Wiederverwendbare Komponenten in React
|
||||
- Gestaltungsmöglichkeiten in Frameworks
|
||||
- EventHandler in React
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 04 - 07
|
||||
|
||||
---
|
||||
|
||||
### Tag 38
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Beispiele der Gestaltungsmöglichkeiten in Frameworks
|
||||
- Layout & wiederverwendbare Komponenten
|
||||
- EventHandler in React
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 08 - 11
|
||||
|
||||
---
|
||||
|
||||
### Tag 39
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Layout & wiederverwendbare Komponenten Part II
|
||||
- EventHandler in React `onSubmit`, `onChange`, `onClick`
|
||||
- Hooks in React.
|
||||
|
||||
**Übungen:**
|
||||
|
||||
offene Übungen.
|
||||
Übung 12 - 14
|
||||
|
||||
---
|
||||
|
||||
### Tag 40
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Hooks in React. `useState`, `useReducer`, `useContext`, `useId`.
|
||||
- Routing in React
|
||||
- Verschachtelte Routen und Layout-Komponenten
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 15
|
||||
|
||||
---
|
||||
|
||||
4
04_typescript/unterricht/tag36/README.md
Normal file
4
04_typescript/unterricht/tag36/README.md
Normal file
@@ -0,0 +1,4 @@
|
||||
# Exkurs: Webseite in TS finalisiert
|
||||
|
||||
- mit Copilot und mit Claude Code zum Vergleich
|
||||
- Webseite Struktur mit `gulp` optimiert.
|
||||
BIN
05_react.zip
Normal file
BIN
05_react.zip
Normal file
Binary file not shown.
15
05_react/.vscode/extensions.json
vendored
Normal file
15
05_react/.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"kamikillerto.vscode-colorize",
|
||||
"sleistner.vscode-fileutils",
|
||||
"bierner.github-markdown-preview",
|
||||
"bradgashler.htmltagwrap",
|
||||
"zhuangtongfa.material-theme",
|
||||
"techer.open-in-browser",
|
||||
"esbenp.prettier-vscode",
|
||||
"pdconsec.vscode-print",
|
||||
"vscode-icons-team.vscode-icons",
|
||||
"formulahendry.auto-rename-tag",
|
||||
"tomoki1207.pdf"
|
||||
]
|
||||
}
|
||||
332
05_react/.vscode/marp-theme.css
vendored
Normal file
332
05_react/.vscode/marp-theme.css
vendored
Normal file
@@ -0,0 +1,332 @@
|
||||
/* @theme marp-theme */
|
||||
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* Marp Dracula theme.
|
||||
* @theme marp-theme
|
||||
* @author Daniel Nicolas Gisolfi & modified by Philippe Botzek
|
||||
*
|
||||
* @auto-scaling true
|
||||
* @size 4:3 960px 720px
|
||||
* @size 16:9 1280px 720px
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Lato:400,900|IBM+Plex+Sans:400,700');
|
||||
|
||||
:root {
|
||||
--dracula-background: #282a36;
|
||||
--dracula-current-line: #44475a;
|
||||
--dracula-foreground: #f8f8f2;
|
||||
--dracula-comment: #6272a4;
|
||||
--dracula-cyan: #8be9fd;
|
||||
--dracula-green: #50fa7b;
|
||||
--dracula-orange: #ffb86c;
|
||||
--dracula-pink: #ff79c6;
|
||||
--dracula-purple: #bd93f9;
|
||||
--dracula-red: #ff5555;
|
||||
--dracula-yellow: #f1fa8c;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: var(--dracula-background);
|
||||
}
|
||||
|
||||
/* Dracula Foreground */
|
||||
.hljs,
|
||||
.hljs-subst,
|
||||
.hljs-typing,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable {
|
||||
color: var(--dracula-foreground);
|
||||
}
|
||||
|
||||
/* Dracula Comment */
|
||||
.hljs-comment,
|
||||
.hljs-quote,
|
||||
.hljs-deletion {
|
||||
color: var(--dracula-comment);
|
||||
}
|
||||
|
||||
/* Dracula Cyan */
|
||||
.hljs-meta .hljs-doctag,
|
||||
.hljs-built_in,
|
||||
.hljs-selector-tag,
|
||||
.hljs-section,
|
||||
.hljs-link,
|
||||
.hljs-class {
|
||||
color: var(--dracula-cyan);
|
||||
}
|
||||
|
||||
/* Dracula Green */
|
||||
.hljs-title {
|
||||
color: var(--dracula-green);
|
||||
}
|
||||
|
||||
/* Dracula Orange */
|
||||
.hljs-params {
|
||||
color: var(--dracula-orange);
|
||||
}
|
||||
|
||||
/* Dracula Pink */
|
||||
.hljs-keyword {
|
||||
color: var(--dracula-pink);
|
||||
}
|
||||
|
||||
/* Dracula Purple */
|
||||
.hljs-literal,
|
||||
.hljs-number {
|
||||
color: var(--dracula-purple);
|
||||
}
|
||||
|
||||
/* Dracula Red */
|
||||
.hljs-regexp {
|
||||
color: var(--dracula-red);
|
||||
}
|
||||
|
||||
/* Dracula Yellow */
|
||||
.hljs-string,
|
||||
.hljs-name,
|
||||
.hljs-type,
|
||||
.hljs-attr,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-addition,
|
||||
.hljs-template-tag {
|
||||
color: var(--dracula-yellow);
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-literal,
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-doctag,
|
||||
.hljs-type,
|
||||
.hljs-name,
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-params,
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
svg[data-marp-fitting='svg'] {
|
||||
max-height: 580px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0.5em 0 0 0;
|
||||
color: var(--dracula-pink);
|
||||
}
|
||||
h1 strong,
|
||||
h2 strong,
|
||||
h3 strong,
|
||||
h4 strong,
|
||||
h5 strong,
|
||||
h6 strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
p,
|
||||
blockquote {
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
|
||||
ul > li,
|
||||
ol > li {
|
||||
margin: 0.3em 0 0 0;
|
||||
color: var(--dracula-cyan);
|
||||
}
|
||||
ul > li > p,
|
||||
ol > li > p {
|
||||
margin: 0.6em 0 0 0;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 0;
|
||||
margin: -0.1em 0.15em;
|
||||
padding: 0.1em 0.2em;
|
||||
vertical-align: baseline;
|
||||
color: var(--dracula-green);
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin: 1em 0 0 0;
|
||||
min-height: 1em;
|
||||
overflow: visible;
|
||||
}
|
||||
pre code {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
pre code svg[data-marp-fitting='svg'] {
|
||||
max-height: calc(580px - 1em);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 0 0 0;
|
||||
padding: 0 1em;
|
||||
position: relative;
|
||||
color: var(--dracula-orange);
|
||||
}
|
||||
blockquote::after,
|
||||
blockquote::before {
|
||||
content: '“';
|
||||
display: block;
|
||||
font-family: 'Times New Roman', serif;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
color: var(--dracula-green);
|
||||
}
|
||||
blockquote::before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
blockquote::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
blockquote > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
table th,
|
||||
table td {
|
||||
padding: 0.2em 0.4em;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
section {
|
||||
font-size: 35px;
|
||||
font-family: 'IBM Plex Sans';
|
||||
line-height: 1.35;
|
||||
letter-spacing: 1.25px;
|
||||
padding: 70px;
|
||||
color: var(--dracula-foreground);
|
||||
background-color: var(--dracula-background);
|
||||
}
|
||||
section > *:first-child,
|
||||
section > header:first-child + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
section a,
|
||||
section mark {
|
||||
color: var(--dracula-red);
|
||||
}
|
||||
section code {
|
||||
background: var(--dracula-current-line);
|
||||
color: var(--dracula-current-green);
|
||||
}
|
||||
section h1 strong,
|
||||
section h2 strong,
|
||||
section h3 strong,
|
||||
section h4 strong,
|
||||
section h5 strong,
|
||||
section h6 strong {
|
||||
color: var(--dracula-current-line);
|
||||
}
|
||||
section pre > code {
|
||||
background: var(--dracula-current-line);
|
||||
}
|
||||
section header,
|
||||
section footer,
|
||||
section section::after,
|
||||
section blockquote::before,
|
||||
section blockquote::after {
|
||||
color: var(--dracula-comment);
|
||||
}
|
||||
section table th,
|
||||
section table td {
|
||||
border-color: var(--dracula-current-line);
|
||||
}
|
||||
section table thead th {
|
||||
background: var(--dracula-current-line);
|
||||
color: var(--dracula-yellow);
|
||||
}
|
||||
section table tbody > tr:nth-child(even) td,
|
||||
section table tbody > tr:nth-child(even) th {
|
||||
background: var(--dracula-current-line);
|
||||
}
|
||||
|
||||
header,
|
||||
footer,
|
||||
section::after {
|
||||
box-sizing: border-box;
|
||||
font-size: 66%;
|
||||
height: 70px;
|
||||
line-height: 50px;
|
||||
overflow: hidden;
|
||||
padding: 10px 25px;
|
||||
position: absolute;
|
||||
color: var(--dracula-comment);
|
||||
}
|
||||
|
||||
header {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
section::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 80%;
|
||||
}
|
||||
30
05_react/.vscode/settings.json
vendored
Normal file
30
05_react/.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"workbench.iconTheme": "vscode-icons",
|
||||
"workbench.colorTheme": "One Dark Pro",
|
||||
"prettier.printWidth": 120,
|
||||
"prettier.singleQuote": true,
|
||||
"editor.hover.enabled": "on",
|
||||
"editor.wordWrap": "on",
|
||||
"explorer.confirmDelete": false,
|
||||
"explorer.confirmDragAndDrop": false,
|
||||
"editor.quickSuggestionsDelay": 600,
|
||||
"editor.tabSize": 2,
|
||||
"editor.formatOnSave": true,
|
||||
"emmet.includeLanguages": {
|
||||
"javascript": "javascriptreact",
|
||||
"ejs": "html"
|
||||
},
|
||||
"html.format.unformatted": "wbr,%",
|
||||
"files.associations": {
|
||||
"*.ejs": "html"
|
||||
},
|
||||
"editor.fontFamily": "'MesloLGS NF', Hack, Consolas, 'Courier New', monospace",
|
||||
"oneDarkPro.markdownStyle": false,
|
||||
"explorer.compactFolders": false,
|
||||
"workbench.editor.labelFormat": "short",
|
||||
"editor.hover.delay": 800,
|
||||
"editor.bracketPairColorization.enabled": true,
|
||||
"editor.guides.bracketPairs": "active",
|
||||
"markdown.marp.themes": ["./.vscode/marp-theme.css"],
|
||||
"markdown-preview-github-styles.colorTheme": "light"
|
||||
}
|
||||
73
05_react/.vscode/snippets.code-snippets
vendored
Normal file
73
05_react/.vscode/snippets.code-snippets
vendored
Normal file
@@ -0,0 +1,73 @@
|
||||
{
|
||||
"Output HTML Element": {
|
||||
"scope": "html",
|
||||
"prefix": "output",
|
||||
"body": ["<div class=\"output alert alert-secondary my-3\"></div>"],
|
||||
"description": "generate a div Element with output alert and alert secondary class"
|
||||
},
|
||||
"Bootstrap html": {
|
||||
"scope": "html",
|
||||
"prefix": "!bs",
|
||||
"body": [
|
||||
"<!DOCTYPE html>",
|
||||
"<html lang=\"de\">",
|
||||
"\t<head>",
|
||||
"\t\t<meta charset=\"UTF-8\" />",
|
||||
"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />",
|
||||
"\t\t<title>$0</title>",
|
||||
"\t\t<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\" rel=\"stylesheet\" />",
|
||||
"\t</head>",
|
||||
"\t<body>",
|
||||
"\t\t<main>",
|
||||
"\t\t\t<div class=\"container py-5\">",
|
||||
"\t\t\t\t<h1>$0</h1>",
|
||||
"\t\t\t</div>",
|
||||
"\t\t</main>",
|
||||
"\t\t<script>",
|
||||
"\t\t\t'use strict';",
|
||||
"\t\t\t",
|
||||
"\t\t</script>",
|
||||
"\t</body>",
|
||||
"</html>"
|
||||
],
|
||||
"description": "Generate HTML with Bootstrap CDN and script-tag"
|
||||
},
|
||||
"$ und $$ helper function": {
|
||||
"scope": "javascript,typescript",
|
||||
"prefix": "$$$",
|
||||
"body": [
|
||||
"const $ = (qs) => document.querySelector(qs);",
|
||||
"const $$ = (qs) => Array.from(document.querySelectorAll(qs));"
|
||||
],
|
||||
"description": "$ and $$ shorthand helper function"
|
||||
},
|
||||
|
||||
"JavaScript Dateivorlage": {
|
||||
"scope": "javascript,typescript",
|
||||
"prefix": "vjs",
|
||||
"body": [
|
||||
"'use strict';",
|
||||
"",
|
||||
"(() => {",
|
||||
"",
|
||||
"\t// === DOM & VARS =======",
|
||||
"\tconst DOM = {};",
|
||||
"",
|
||||
"\t// === INIT =============",
|
||||
"\tconst init = () => {",
|
||||
"",
|
||||
"\t}",
|
||||
"",
|
||||
"\t// === EVENTHANDLER =====",
|
||||
"",
|
||||
"\t// === XHR/FETCH ========",
|
||||
"",
|
||||
"\t// === FUNCTIONS ========",
|
||||
"",
|
||||
"\tinit();",
|
||||
"",
|
||||
"})();"
|
||||
],
|
||||
"description": "JavaScript Dateivorlage"
|
||||
}
|
||||
}
|
||||
618
05_react/agenda.md
Normal file
618
05_react/agenda.md
Normal file
@@ -0,0 +1,618 @@
|
||||
---
|
||||
marp: true
|
||||
theme: default
|
||||
---
|
||||
|
||||
## JavaScript Grundlagen Teil 1.
|
||||
|
||||
---
|
||||
|
||||
#### Tag 01
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Vorstellungsrunde
|
||||
- Einrichtung der IDE
|
||||
- Tools für die Webentwicklung (Emmet, Markdown, VS-Code)
|
||||
- Arbeiten mit VSCode
|
||||
- Konsolenausgaben mit `console.log()`
|
||||
|
||||
**Übungen:**
|
||||
|
||||
- Übungen Content Factory
|
||||
|
||||
---
|
||||
|
||||
#### Tag 02
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Dialogfenster in JS `prompt()`, `alert()`, `confirm()`
|
||||
- Kommentare in JS
|
||||
- Rechnen in JS
|
||||
- Datentyp String, Number, Boolean
|
||||
- literal und typeof
|
||||
- Prioritätsreihenfolge
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 3 - 6
|
||||
|
||||
---
|
||||
|
||||
#### Tag 03
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Variablen und Konstanten in JS
|
||||
- Zusammengesetzte Zuweisungsoperatoren
|
||||
- Increment & Decrement
|
||||
- Strings verketten mit +
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 7 - 12
|
||||
|
||||
---
|
||||
|
||||
#### Tag 04
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Escape-Notation
|
||||
- Implizite und explizite Typkonvertierung
|
||||
- NaN - Paradoxon
|
||||
- Math Object
|
||||
- Number.toFixed()
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 14 - 18
|
||||
|
||||
---
|
||||
|
||||
#### Tag 05
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Repetition der Inhalte
|
||||
- Relationale Operatoren & Vergleichoperatoren
|
||||
- isNaN
|
||||
- Lexikographische Vergleiche
|
||||
- **Exkurs: HTML-Formularfelder**
|
||||
- 1:1 Meeting
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung Kontaktformular mit HTML und BS
|
||||
|
||||
---
|
||||
|
||||
#### Tag 06
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- **Exkurs: HTML Formularfelder mit BS**
|
||||
- if else Verzweigung und ternärer Operator
|
||||
- logische Operatoren UND und ODER
|
||||
- unärer Operator (!)
|
||||
- String Methoden Part I
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 19 - 26
|
||||
|
||||
---
|
||||
|
||||
#### Tag 07
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- String Methoden Part II
|
||||
- Funktionen in JS
|
||||
- Funktionen mit Übergabeparameter
|
||||
- Funktionen mit Rückgabewerten
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 26 - 35
|
||||
|
||||
---
|
||||
|
||||
#### Tag 08
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Funktionen mit Übergabeparameter
|
||||
- Funktionen mit Rückgabewerten
|
||||
- Guards
|
||||
- Array Part 1
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 35 - 38
|
||||
|
||||
---
|
||||
|
||||
#### Tag 09
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Array Methoden toSorted, toReversed, toSpliced
|
||||
- toSorted, toReversed
|
||||
- Array sort mit "compare function"
|
||||
- Array: Higher Order Funktionen Part (sort map, forEach, reduce, some, every)
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 39 - 48
|
||||
|
||||
---
|
||||
|
||||
#### Tag 10
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Array.find und Array.findIndex
|
||||
- Alle Array Higher Order Funktionen im Überblick
|
||||
- local scoping
|
||||
- **Exkurs: Schleifen**
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 46 - 48
|
||||
|
||||
---
|
||||
|
||||
## JavaScript für Fortgeschrittene
|
||||
|
||||
---
|
||||
|
||||
#### Tag 11
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Einführung in JS für Fortgeschrittene
|
||||
- Objekte in JS
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Projektarbeit
|
||||
Abschlussquiz - JS Grundlagen
|
||||
|
||||
---
|
||||
|
||||
#### Tag 12
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Destructuring von Objekten und Arrays
|
||||
- Rekursion
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 01 - 10
|
||||
|
||||
---
|
||||
|
||||
#### Tag 13
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Promises
|
||||
- Callback-Hell
|
||||
- Installation von node (npm) und Windows Terminal (für Node)
|
||||
- **Exkurs: Statische Webseite mit Sass und HTML**
|
||||
- **Exkurs: Versionierung mit Github Part I**
|
||||
|
||||
**Übungen:**
|
||||
|
||||
---
|
||||
|
||||
#### Tag 14
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Promise Aufbau
|
||||
- Promise in Funktionen
|
||||
- File System von Node
|
||||
- commonjs vs esm
|
||||
- async await
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 09 - 11
|
||||
|
||||
---
|
||||
|
||||
#### Tag 15
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Wiederholung der Inhalte
|
||||
- Promise.all()
|
||||
- **Exkurs: Switch Case Abfragen**
|
||||
- **Exkurs: Statische Webseite mit Sass und HTML**
|
||||
- **Exkurs: Versionierung mit Github Part I**
|
||||
- 1:1 Meeting
|
||||
|
||||
---
|
||||
|
||||
#### Tag 16
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- **Exkurs: Statische Webseite mit Sass und HTML Part II**
|
||||
- Mehrdimensionale Arrays
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Projektarbeiten
|
||||
Übungen 11 -13
|
||||
|
||||
---
|
||||
|
||||
#### Tag 17
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Chess-Beispiel
|
||||
- Arbeiten mit Fetch API
|
||||
- fetch mit Promise und async...await
|
||||
- Joke API auslesen
|
||||
- **Exkurs: Versionierung mit Github Part I**
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übungen 14 - 24
|
||||
|
||||
---
|
||||
|
||||
#### Tag 18
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- XML-HttpRequest und AJAX mit jQuery
|
||||
- Node Installation (Wiederholung)
|
||||
- Node Standardbib
|
||||
- fs
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Projektarbeit
|
||||
|
||||
---
|
||||
|
||||
#### Tag 19
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- NPM Befehle
|
||||
- CSV to HTML
|
||||
- Node Standardbib
|
||||
- zlib (stream)
|
||||
- Crypto
|
||||
- Abschluss von JS für Fortgeschrittene
|
||||
- Projektvorstellung 1 + 2
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übungen 25 - 31
|
||||
|
||||
---
|
||||
|
||||
#### Tag 20
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- **Einrichtung von Git**
|
||||
- **Exkurs: Webseite mit Gulp, SASS, HTML/CSS, JS**
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Projektarbeit
|
||||
Übungen 31 - 32
|
||||
|
||||
---
|
||||
|
||||
# JavaScript und das Document Object Model (DOM)
|
||||
|
||||
---
|
||||
|
||||
#### Tag 21
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Einführung in JS DOM
|
||||
- DOM Selection (querySelector, querySelectorAll)
|
||||
- $ & $$ Helper
|
||||
- CSS Selektoren
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übungen 01 - 05
|
||||
|
||||
---
|
||||
|
||||
#### Tag 22
|
||||
|
||||
- Defer & Async
|
||||
- JS Dateien auslagern
|
||||
- Chat Gestaltung (DOMTokenList Objekt)
|
||||
- Optimierung von Projektstruktur
|
||||
- Events in JS MouseEvent, KeyboardEvent
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übungen 06 - 07
|
||||
|
||||
---
|
||||
|
||||
#### Tag 23
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Projekt: Newsboard
|
||||
- HTML Element Progress
|
||||
- IDL-Attribut vs. Content-Attribut
|
||||
- HTML Attribute mit boolescher Zuweisung
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 08 - 10
|
||||
|
||||
---
|
||||
|
||||
#### Tag 24
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Tooltip: HTML erweitern mit Data-Attribut
|
||||
- Dataset Attribut, DOMStringMap Objekt
|
||||
- getComputedStyle, Attribute mit boolscher Zuweisung
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 11 - 14
|
||||
|
||||
---
|
||||
|
||||
#### Tag 25
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- DOM Creation - Elemente erstellen
|
||||
- createElement() & appendChild()
|
||||
- Projekt: Produktmanager Part I
|
||||
- DOM Creation Befehle
|
||||
- Entfernen von Elementen
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 15 - 17
|
||||
**Projektarbeit / Content Factory**
|
||||
|
||||
---
|
||||
|
||||
#### Tag 26
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Import von Modulen in JS (Browserseitig)
|
||||
- Separation of Concerns
|
||||
- Projekt: Produktmanager final
|
||||
- DOM Traversal Befehle & alle DOM Bereiche
|
||||
- insertBefore(), appendChild(), append(), prepend(), before(), after()
|
||||
- Refactoring von Produktmanager mit Template
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 18 + optionale Übungen
|
||||
**Projektarbeit / Content Factory**
|
||||
|
||||
---
|
||||
|
||||
#### Tag 27
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- **Exkurs: Weitere Events: Drag and Drop**
|
||||
- **Rest API erstellen mit Express**
|
||||
- JS DOM Projektvorstellung
|
||||
- Abschlussquiz JS DOM
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Projekte
|
||||
|
||||
---
|
||||
|
||||
#### Tag 28
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- **Exkurs: DOM Inhalte über REST API mit Express Part I**
|
||||
- **Routing in JS**
|
||||
- CRUD - Create - (Read) - Update - Delete
|
||||
- Object Methoden.
|
||||
- Verwendung von Modulen (Bootstrap)
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Projekte & optionale Übungen
|
||||
|
||||
---
|
||||
|
||||
#### Tag 29
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- **Exkurs: DOM Inhalte über mit REST API Express**
|
||||
- **Erweiterung Frontend um REST API**
|
||||
- CRUD - Create - Read - Update - Delete
|
||||
- BREAD - Browse - Read - Edit - Add - Delete
|
||||
- Verwendung von Modulen (Modal von BS, Toastify, Splide)
|
||||
|
||||
**Übungen**
|
||||
|
||||
Projekte + weiteres Modul einbinden
|
||||
|
||||
---
|
||||
|
||||
#### Tag 30
|
||||
|
||||
- **Projektfinalisierung Express + REST API**
|
||||
- Einführung in Typescript
|
||||
- Meeting
|
||||
|
||||
---
|
||||
|
||||
### Tag 31
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Typescript Grundlagen
|
||||
- Typescript Annotationen
|
||||
- Typescript "more Types"
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übungen 1 - 5
|
||||
|
||||
---
|
||||
|
||||
### Tag 32
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Typescript Annotationen
|
||||
- Primitive Types, Object, Union Types
|
||||
- type statement vs interface
|
||||
- Type Assertion with as and <>
|
||||
- Typescript "more Types"
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übungen 4 - 9
|
||||
|
||||
---
|
||||
|
||||
### Tag 33
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Typescript "more Types"
|
||||
- Interface, as statement, literale
|
||||
- Typescript Narrowing with Guards
|
||||
- truthiness, equality, in-operator, type-predicate
|
||||
- TS Funktionen und Objekte
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übungen 10 - 19
|
||||
|
||||
---
|
||||
|
||||
### Tag 34
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- TS Funktionen und Objekte
|
||||
- Abschluss TypeScript Grundlagen
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übungen 20 - 31
|
||||
Projektarbeit
|
||||
|
||||
---
|
||||
|
||||
### Tag 35
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Abschlussquiz
|
||||
- Projekt-Webseite in TS
|
||||
- Optimierung mit KI
|
||||
- 1:1 Meeting
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Projektarbeit
|
||||
|
||||
---
|
||||
|
||||
### Tag 36
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- **Exkurs: Finalisierung Projekt Webseite in TS (Gulp)**
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Einführung in React
|
||||
|
||||
---
|
||||
|
||||
|
||||
### Tag 37
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Einführung in REACT
|
||||
- VDOM von REACT
|
||||
- Build Tools im Vergleich & Einführung in Vite
|
||||
- Komponenten in React
|
||||
- Wiederverwendbare Komponenten in React
|
||||
- Gestaltungsmöglichkeiten in Frameworks
|
||||
- EventHandler in React
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 01 - 5
|
||||
|
||||
---
|
||||
|
||||
### Tag 38
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Beispiele der Gestaltungsmöglichkeiten in Frameworks
|
||||
- Layout & wiederverwendbare Komponenten
|
||||
- EventHandler in React
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 08 - 11
|
||||
|
||||
---
|
||||
|
||||
### Tag 39
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Layout & wiederverwendbare Komponenten Part II
|
||||
- EventHandler in React `onSubmit`, `onChange`, `onClick`
|
||||
- Hooks in React.
|
||||
|
||||
**Übungen:**
|
||||
|
||||
offene Übungen.
|
||||
Übung 12 - 14
|
||||
|
||||
---
|
||||
|
||||
### Tag 40
|
||||
|
||||
**Inhalt:**
|
||||
|
||||
- Hooks in React. `useState`, `useReducer`, `useContext`, `useId`.
|
||||
- Routing in React
|
||||
- Verschachtelte Routen und Layout-Komponenten
|
||||
|
||||
**Übungen:**
|
||||
|
||||
Übung 15
|
||||
|
||||
---
|
||||
Binary file not shown.
@@ -1,14 +0,0 @@
|
||||
{
|
||||
"name": "webseite-gulp-ts-frontend",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "gulpfile.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"type": "module",
|
||||
"devDependencies": {
|
||||
"gulp": "^5.0.1"
|
||||
}
|
||||
}
|
||||
2
webseite-gulp-ts/frontend/package-lock.json
generated
2
webseite-gulp-ts/frontend/package-lock.json
generated
@@ -25,7 +25,7 @@
|
||||
"@rollup/plugin-replace": "^6.0.3",
|
||||
"@rollup/plugin-typescript": "^12.3.0",
|
||||
"@rollup/stream": "^3.0.1",
|
||||
"@types/bootstrap": "^5.2.10",
|
||||
"@types/bootstrap": "^5.2.11",
|
||||
"@types/toastify-js": "^1.12.4",
|
||||
"browser-sync": "^3.0.4",
|
||||
"core-js": "^3.46.0",
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
"@rollup/plugin-replace": "^6.0.3",
|
||||
"@rollup/plugin-typescript": "^12.3.0",
|
||||
"@rollup/stream": "^3.0.1",
|
||||
"@types/bootstrap": "^5.2.10",
|
||||
"@types/bootstrap": "^5.2.11",
|
||||
"@types/toastify-js": "^1.12.4",
|
||||
"browser-sync": "^3.0.4",
|
||||
"core-js": "^3.46.0",
|
||||
|
||||
@@ -110,7 +110,7 @@ const ProductManager = (el: HTMLElement | null = null): ProductManagerApi | null
|
||||
});
|
||||
};
|
||||
|
||||
const onClickSave = (e: MouseEvent): void => {
|
||||
const onClickSave = (e: PointerEvent): void => {
|
||||
const btnEl = e.currentTarget as HTMLButtonElement;
|
||||
const icon = query<HTMLElement>(btnEl, 'i');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user