Web-Oberflächen

Jedes Programm in den anderen Kursen gibt in die Konsole aus. Menschen sehen ein Programm aber durch einen Bildschirm: eine Liste von Produkten, einen Button „Kaufen“, ein Formular, das sagt, was falsch ist, eine Seite, die lädt, ohne einzufrieren. Dieser Kurs lehrt, wie man einen solchen Bildschirm baut: zuerst die Plattform des Browsers, dann die Komponenten, aus denen eine große Oberfläche besteht.

Wähle die Bibliothek

ReactVue

Was du lernst

Der Kurs hat zwei Teile.

Teil 1: die Plattform

• Die Struktur der Seite: die Elemente und der Baum, den der Browser daraus baut, Text, Links und Tabellen, Formulare, Barrierefreiheit.
• Wie sie aussieht: die Kaskade und die Spezifität, die Boxen, Flexbox, Grid und eine Seite, die auf dem Smartphone funktioniert.
• JavaScript in der Seite: das DOM, Ereignisse, eine Liste aus Daten und Daten aus einer API, mit Laden, Fehler und leer.

Teil 2: Komponenten mit React oder Vue

• Komponenten: die Oberfläche als Funktion der Daten, Props, Listen und Keys, Bedingungen.
• Zustand: neu zeichnen, unveränderliche Aktualisierungen, abgeleiteter und gemeinsamer Zustand.
• Effekte, Daten und Formulare: Effekte und Aufräumen, Anfragen, die um die Wette laufen, Formulare mit Prüfungen, gemeinsamer Zustand.
• Eine ganze App: Routing, Geschwindigkeit, Komponententests und wie ein echtes Projekt aussieht.
• Projekt: Das Schaufenster des Shops: ein Katalog, ein Warenkorb, eine Bestellung und eine API in einer App.

So lernst du hier

Jede Lektion beginnt bei einem Problem in einem Online-Shop: ein Preis, der plötzlich ein Link ist, ein Button außerhalb des Smartphone-Bildschirms, eine Liste, die alte Daten zeigt. Dann zeigt eine Szene die Idee: den Baum, den der Browser baut, die Regel, die die Kaskade gewinnt, das Ereignis, das nach oben sprudelt, die Komponente, die neu zeichnet.

Der Code läuft direkt in der Seite, in einer Sandbox ohne Netzwerk und mit einer vorgetäuschten API des Shops. Aufgaben werden nach dem Verhalten geprüft: Die Prüfung klickt die Buttons und findet die Elemente nach Rolle und Name, so wie ein Screenreader sie findet. Der erste Teil ist für React und Vue derselbe, und im zweiten wählst du die Bibliothek und kannst sie jederzeit wechseln.

Was du wissen musst

JavaScript bis „Modernes JavaScript“: Funktionen, Objekte, Arrays mit map und filter, Module und async/await. Im Browser musst du nichts installieren.