ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
JS/06_react/agenda.md
T
Philippe Torrel 2426cd56bc
2026-10-30 09:31:44 +01:00

674 lines
9.2 KiB
Markdown
Raw Permalink Blame History

---
marp: true
theme: default
---
## JavaScript Grundlagen Teil 1.
---
#### Tag 01
**Inhalt:**
- Vorstellungsrunde
- Einrichtung der IDE
- Tools für die Webentwicklung (Emmet, Markdown, VS-Code, Co-Pilot)
- Arbeiten mit VSCode
- Konsolenausgaben mit `console.log()`
**Übungen:**
- Übungen: 1 - 3, 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 (Content-Factory bis 1.3.3)
---
#### Tag 03
**Inhalt:**
- Variablen und Konstanten in JS
- Zusammengesetzte Zuweisungsoperatoren
- Increment & Decrement
- Strings verketten mit +
- Escape-Notation
- Implizite und explizite Typkonvertierung
**Übungen:**
Übung 7 - 12
---
#### Tag 04
**Inhalt:**
- Escape-Notation
- Implizite und explizite Typkonvertierung
- NaN - Paradoxon
- Math Object
- Number.toFixed()
- isNaN
- Lexikographische Vergleiche
**Übungen:**
Übung 14 - 18
---
#### Tag 05
**Inhalt:**
- Repetition der Inhalte
- Relationale Operatoren & Vergleichoperatoren
- **Exkurs: Webseitenstruktur + SASS HTML-Formularfelder**
- 1:1 Meeting
**Übungen:**
Übung Kontaktformular mit HTML und BS,
Lektion 10 erarbeiten
---
#### Tag 06
**Inhalt:**
- **Exkurs: HTML Formularfelder mit BS**
- if else Verzweigung und ternärer Operator
**Übungen:**
Übung 19 - 21 + Kontaktformular
---
#### Tag 07
**Inhalt:**
- logische Operatoren UND und ODER
- unärer Operator (!)
- String Methoden
- Funktionen in JS + mit Übergabeparameter + mit Rückgabewerten
**Übungen:**
Übung 22 - 31
---
#### Tag 08
**Inhalt:**
- Funktionen mit Rückgabewerten
- Guards, Restparameter, Defaulparameter
- Array Part 1
**Übungen:**
Übung 32 - 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 - 45 + optionale Übung
---
#### Tag 10
**Inhalt:**
- Array.find und Array.findIndex
- Alle Array Higher Order Funktionen im Überblick
- local scoping
- Git SCM und Windows Terminal einrichten
**Übungen:**
Übung 46 - 48
---
## JavaScript für Fortgeschrittene
---
#### Tag 11
**Inhalt:**
- **Exkurs: Schleifen**
- 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 - 09
---
#### Tag 13
**Inhalt:**
- Promises
- Callback-Hell
- Promise Aufbau
- Promise in Funktionen
- File System von Node
- commonjs vs esm
**Übungen:**
Übung 10 - 11
---
#### Tag 14
**Inhalt:**
- util promisify
- Promise.all()
- async await
- Mehrdimensionale Arrays
- Chess-Beispiel
**Übungen:**
Übung 12 - 19
---
#### Tag 15
**Inhalt:**
- Wiederholung der Inhalte
- Arbeiten mit Fetch API
- **Exkurs: Switch Case Abfragen**
- **Exkurs: Statische Webseite mit Sass und HTML**
- **Exkurs: Versionierung mit Github Part (SSH)**
- 1:1 Meeting
**Übungen:**
Übung 20 - 24
---
#### Tag 15
**Inhalt:**
- Wiederholung der Inhalte
- Promise.all()
- **Exkurs: Switch Case Abfragen**
- **Exkurs: Statische Webseite mit Sass und HTML**
- 1:1 Meeting
**Übungen:**
Übung 20 - 24
---
#### Tag 16
**Inhalt:**
- **Exkurs: Statische Webseite mit Sass und HTML Part II**
- Node Module: HTTP-Server, npm-run-all und SVGO
**Übungen:**
Projektarbeit + Wetter API Key besorgen
---
#### Tag 17
**Inhalt:**
- XML-HttpRequest und AJAX mit jQuery
- Node Module für die Projekt-Entwicklungsumgebung
- Wetter API auslesen
- fetch in der Praxis: Joke API auslesen
- Was ist Node.js? (Wiederholung)
**Übungen:**
Projektarbeit
Übungen Public API auslesen
---
#### Tag 18
**Inhalt:**
- Node Standardbib (fs, zlib (stream), Crypto)
- Import vs. require (Teil II)
- NPM Befehle
- Abschluss von JS für Fortgeschrittene
- Projektvorstellung 1 + 2 JS Advanced
**Übungen:**
Übungen 25 - 31
---
# JavaScript und das Document Object Model (DOM)
---
#### Tag 19
- Einführung in JS DOM
- DOM Selection (querySelector, querySelectorAll, $ & $$ Helper)
- CSS Selektoren
- Typ-, Attribut-, Kombinator- und Pseudoklassen - Selektoren
**Übungen:**
Übungen 01 - 05
---
#### Tag 20
**Inhalt:**
- Chat Gestaltung (DOMTokenList Objekt)
- Defer & Async
- JS Dateien auslagern
- Optimierung von Projektstruktur
- **Exkurs: Projektstruktur mit Gulp**
**Übungen:**
Übung 06 - 07
---
#### Tag 21
**Inhalt:**
- **Exkurs: Projektstruktur mit Gulp Part II**
- Events in JS MouseEvent, KeyboardEvent
- Projekt: Newsboard
**Übungen:**
Übung 08 - 9
---
#### Tag 22
**Inhalt:**
- HTML Element Progress
- IDL-Attribut vs. Content-Attribut
- HTML Attribute mit boolescher Zuweisung
- Tooltip: HTML erweitern mit Data-Attribut
- Dataset Attribut, DOMStringMap Objekt
- getComputedStyle, Attribute mit boolscher Zuweisung
**Übungen:**
Übung 10 - 14
---
#### Tag 23
**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 24
**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
- JS DOM Projektvorstellung
**Übungen:**
Übung 18 + optionale Übungen
**Projektarbeit / Content Factory**
---
#### Tag 25
**Inhalt:**
- **Exkurs: Weitere Events: Drag and Drop**
- **Rest API erstellen mit Express**
- **Exkurs: DOM Inhalte über REST API mit Express Part I**
- CRUD - Create - (Read) - Update - Delete
- **Routing in JS**
- Abschlussquiz JS DOM
- **1:1 Meeting**
**Übungen:**
Projekte
---
## BROWSER API
---
#### Tag 26
**Inhalt:**
- **Exkurs: DOM Inhalte 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 & optionale Übungen
---
#### Tag 27
- **Exkurs: Gulp Build Prozess**
- **SASS 7 on 1 mit Bootstrap 6**
- **Projektfinalisierung Express + REST API**
- Einführung in Typescript
---
### Tag 28
**Inhalt:**
- Typescript Grundlagen
- Typescript Annotationen
- Typescript "more Types"
**Übungen:**
Übungen 1 - 5
---
### Tag 29
**Inhalt:**
- Typescript Annotationen
- Primitive Types, Object, Union Types
- type statement vs interface
- Type Assertion with as and <>
- Typescript "more Types"
- Interface, as statement
**Übungen:**
Übungen 4 - 9
---
### Tag 30
**Inhalt:**
- Typescript literale
- Projektvorstellung
- **Exkurs: Vite vs Gulp**
- **Produktmanager Refactoring mit Bootstrap 6**
**Übungen:**
Übungen 10 - 11
Projekt 1: TaskManager
---
### Tag 31
**Inhalt:**
- Narrowing with Guards
- truthiness, equality, in-operator, type-predicate
- TS Funktionen und Objekte
**Übungen:**
Übungen 12 - 21
---
### Tag 32
**Inhalt:**
- TS Funktionen und Objekte Part II
- Vorstellung Projekt 2
- Abschluss TypeScript Grundlagen
**Übungen:**
Übungen 22 - 31
Projektarbeit
---
# Einführung in React
---
### Tag 33
**Inhalt:**
- Einführung in REACT
- VDOM von REACT
- ES6 Module mit ohne Bundler
- Build Tools im Vergleich &amp; Einführung in Vite
**Übungen:**
Übung 01 - 03
---
### Tag 34
**Inhalt:**
- Build Tools im Vergleich &amp; Einführung in Vite
- Beispiele der Gestaltungsmöglichkeiten in Frameworks
- Layout & wiederverwendbare Komponenten
- EventHandler in React
**Übungen:**
Übung 04 - 07
---
### Tag 35
**Inhalt:**
- Layout & wiederverwendbare Komponenten Part II
- EventHandler in React `onSubmit`, `onChange`, `onClick`
- Hooks in React.
- 1:1 Meeting
**Übungen:**
Übung 08 - 10
---
### Tag 36
**Inhalt:**
- Einführung in Hooks in React.
- Hooks in React. `useState`, `useReducer`
**Übungen:**
Übung 11 - 14
---
### Tag 37
**Inhalt:**
- Hooks in React. `useState`, `useReducer`, `useContext`, `useId`.
- Routing in React
- Verschachtelte Routen und Layout-Komponenten
- Formulare in React
- Validierung classic
**Übungen:**
Übung 14 - 15
---
### Tag 38
**Inhalt:**
- Validierung mit `react-hook-form` und Schema Objekten
- Hook: `useEffect`. Arbeiten mit asynchronen Daten.
- Asynchron arbeiten mit axios/ fetch
**Übungen:**
Übung 16 - 18
---
### Tag 39
**Inhalt:**
- Hook: `useEffect`, `useRef`, `useCallback`. Arbeiten mit asynchronen Daten.
- AbortController, loading und error hinzufügen.
- Testing in React.
**Übungen:**
Übung 19
---
### Tag 40
**Inhalt:**
- Aktualisierung von Node
- Testing in React
- Einführung JS/TS Debugging & Testing
- **Exkurs: Sass 7 on 1 Struktur**
- **Optimierung vom ProduktManager über KI**
- **ProduktManager wird in TS migriert**
**Übungen:**
Übung 20
---
### TBA
**Inhalt:**
- Typische Fehlermeldungen: Syntaxfehler, Referenzfehler, TypeError
- Einrichtung von TS, Testing
- Logische Fehler
- Mocking mit async Data
- Weitere Techniken: Snapshot & Cypress
Reference in New Issue View Git Blame Copy Permalink