Zum Inhalt
wannacode

Web-Oberflächen: React

Der Kurs ist für React und Vue derselbe, und die Beispiele hier nutzen React. Der erste Teil (HTML, CSS, das DOM) ist gemeinsam, der zweite sind Komponenten. Jedes Beispiel läuft und lässt sich direkt auf der Seite ändern.

Modul 0

Willkommen

1 Lektion · wie der Browser eine Seite zeigt, die Sandbox, React oder Vue

  1. Willkommen

Modul 1

HTML: Die Struktur der Seite

4 Lektionen · Elemente, Text, Formulare, Barrierefreiheit

  1. Das HTML-Dokument
  2. Text, Links, Bilder, Tabellen
  3. Formulare
  4. Barrierefreiheit

Modul 2

CSS: Wie die Seite aussieht

5 Lektionen · die Kaskade, Boxen, Flexbox, Grid, für das Smartphone

  1. Selektoren und die Kaskade
  2. Das Box-Modell
  3. Flexbox: Reihe und Spalte
  4. Grid: Zeilen und Spalten
  5. Responsive Design

Modul 3

JavaScript in der Seite

4 Lektionen · das DOM, Ereignisse, eine Liste aus Daten, fetch

  1. Das DOM: die Seite aus JavaScript
  2. Ereignisse
  3. Eine Liste aus Daten
  4. Daten aus einer API

Modul 4

Komponenten

4 Lektionen · JSX und Templates, Props, Listen, Bedingungen

  1. Die erste Komponente
  2. Props: Daten von oben
  3. Listen und Keys
  4. Bedingungen: leer, Fehler, lädt

Modul 5

Zustand

4 Lektionen · useState und ref, Aktualisierungen, Abgeleitetes, Geteiltes

  1. Zustand
  2. Objekte und Arrays aktualisieren
  3. Abgeleiteter Zustand
  4. Gemeinsamer Zustand: nach oben

Modul 6

Effekte, Daten und Formulare

4 Lektionen · Effekte, Daten aus einer API, Formulare, gemeinsamer Zustand

  1. Effekte
  2. Daten von einer API in einer Komponente
  3. Formulare in einer Komponente
  4. Gemeinsamer Zustand

Modul 7

Eine ganze App

4 Lektionen · Routing, Geschwindigkeit, Tests, ein echtes Projekt

  1. Routing
  2. Geschwindigkeit: wann eine Komponente neu rendert
  3. Komponenten testen
  4. Von der Sandbox zum Projekt

Modul 8

Projekt: Das Schaufenster des Shops

1 Lektion · Katalog, Warenkorb, Bestellung und API in einem

  1. Das Schaufenster des Shops

Übung

Aufgaben

Alle Aufgaben aus den Lektionen an einem Ort, nach Modulen.

Erstellt von Ivo Gergov im Rahmen der Kampagne von Evo Tech für zugängliche Programmierausbildung ·