Willkommen

Bibliothek:ReactVue

Kurz gesagt: Der Kurs „Web-Oberflächen“ lehrt HTML, CSS und das DOM, danach Komponenten, Zustand und Daten mit React oder Vue, mit Beispielen, die direkt in der Seite laufen.

Problem

Das Programm stimmt. Die Kunden beschweren sich

Die Summe des Warenkorbs stimmt, und die Tests laufen durch. Aber auf dem Handy ist der Button „Bestellen“ außerhalb des Bildschirms. Wer einen Screenreader benutzt, hört nur „Button“ und weiß nicht, welcher. Die Produktliste friert beim Laden ein, und bei einem schnellen Doppelklick geht die Bestellung zweimal raus.

Menschen sehen das Programm durch einen Bildschirm. Wenn der Bildschirm kaputtgeht, funktioniert das Programm nicht, egal wie richtig es darunter ist. Dieser Kurs lehrt, wie man den Bildschirm baut.

Die Idee

Wie der Browser eine Seite zeigt

1. Der Browser fragt den Server nach der Seite und bekommt HTML: Text, der sagt, was auf ihr steht.
2. Aus dem HTML baut er einen Baum aus den Elementen: eine Überschrift, einen Absatz, einen Button. Dieser Baum heißt DOM.
3. Er wendet CSS an: die Regeln für Farbe, Größe und Anordnung. Er berechnet, wohin jedes Element kommt, und zeichnet es.
4. JavaScript verändert den Baum: Es fügt der Liste ein Produkt hinzu, ändert den Text eines Buttons. Der Browser zeichnet nur neu, was betroffen ist.

Der ganze Kurs handelt von diesen vier Schritten. Zuerst machst du sie von Hand, und dann siehst du, wie React und Vue den vierten für dich übernehmen.

Die Idee

Die Sandbox

Der Code in den Lektionen läuft direkt in der Seite. Probier es aus: Klick auf „Ausführen“, dann auf den Button in der Seite darunter. Ändere den Text in script.js und führ den Code noch einmal aus.

HTML, CSS, JS

index.htmlstyle.cssscript.js

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Der Warenkorb</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Der Warenkorb</h1>
    <p id="count">Der Warenkorb ist leer</p>
    <button type="button" id="add">Brot hinzufügen</button>
    <script src="script.js"></script>
  </body>
</html>
 

<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Der Warenkorb</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Der Warenkorb</h1> <p id="count">Der Warenkorb ist leer</p> <button type="button" id="add">Brot hinzufügen</button> <script src="script.js"></script> </body> </html>

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 8px 16px; }
 

body { font-family: system-ui, sans-serif; padding: 16px; } button { font-size: 16px; padding: 8px 16px; }

let count = 0;
const text = document.querySelector('#count');
document.querySelector('#add').addEventListener('click', () => {
  count++;
  text.textContent = `Im Warenkorb: ${count} ${count === 1 ? 'Artikel' : 'Artikel'}`;
  console.log('Brot hinzugefügt, insgesamt', count);
});
 

let count = 0; const text = document.querySelector('#count'); document.querySelector('#add').addEventListener('click', () => { count++; text.textContent = `Im Warenkorb: ${count} ${count === 1 ? 'Artikel' : 'Artikel'}`; console.log('Brot hinzugefügt, insgesamt', count); });

▶ AusführenCode zurücksetzen

• Die Dateien sind in Tabs: index.html, style.css, script.js, später auch die Komponenten. Strg+Enter (⌘+Enter auf dem Mac) führt den Code aus, und „Code zurücksetzen“ bringt das Beispiel zurück.
• Die Konsole steht unter der Seite: Dort sind console.log und die Fehler.
• Die Sandbox ist abgeschottet. Der Code sieht die Seite, ihre Cookies und ihren Speicher nicht und hat kein Netz. Auf fetch('/api/…') antwortet eine Schein-API mit den Daten des Shops, und die Lektionen schalten absichtlich eine langsame Antwort, einen Fehler oder eine leere Liste ein.
• Aufgaben werden am Verhalten geprüft. „Prüfen“ klickt die Buttons an und tippt in die Felder wie ein Mensch und sucht die Elemente nach Rolle und Name, so wie ein Screenreader sie findet. Ein Button ohne Namen wird nicht gefunden, deshalb prüft die Aufgabe auch die Barrierefreiheit.
• Eine Endlosschleife im Code bringt den Browser-Tab zum Stehen. Lad dann die Seite neu: Dein Code ist gespeichert.

Die Idee

Die zwei Teile

Der erste Teil ist die Plattform: HTML, CSS und das DOM. Sie ist für React und Vue dieselbe, deshalb sind Text und Code auf beiden Seiten gleich.

• Die Struktur der Seite: Elemente und der Baum, Text und Links, Formulare, Barrierefreiheit.
• Wie sie aussieht: die Kaskade, die Boxen, Flexbox, Grid, eine Seite fürs Handy.
• JavaScript in der Seite: das DOM, Ereignisse, eine Liste aus Daten, Daten aus einer API.

Der zweite Teil sind Komponenten: warum es bei einer großen Oberfläche schiefgeht, das DOM von Hand zu ändern, und wie die Oberfläche zu einer Funktion der Daten wird.

• Komponenten, Zustand, Effekte, Daten und Formulare, Eine ganze App (Routing, Geschwindigkeit, Tests, ein echtes Projekt).
• Projekt: Das Schaufenster des Shops: Katalog, Warenkorb und Bestellung in einer App.

Die Idee

React oder Vue

Die beiden Bibliotheken lösen dieselbe Aufgabe: Du beschreibst, wie die Oberfläche für bestimmte Daten aussieht, und die Bibliothek aktualisiert die Seite, wenn sich die Daten ändern. Hier ist derselbe Warenkorb in beiden:

React

App.jsx

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <main>
      <h1>Der Warenkorb</h1>
      <p>{count === 0 ? 'Der Warenkorb ist leer' : `Im Warenkorb: ${count} ${count === 1 ? 'Artikel' : 'Artikel'}`}</p>
      <button type="button" onClick={() => setCount(count + 1)}>Brot hinzufügen</button>
    </main>
  );
}
 

import { useState } from 'react'; export default function App() { const [count, setCount] = useState(0); return ( <main> <h1>Der Warenkorb</h1> <p>{count === 0 ? 'Der Warenkorb ist leer' : `Im Warenkorb: ${count} ${count === 1 ? 'Artikel' : 'Artikel'}`}</p> <button type="button" onClick={() => setCount(count + 1)}>Brot hinzufügen</button> </main> ); }

▶ AusführenCode zurücksetzen

Das ist der Code in React: Die Komponente ist eine Funktion, die JSX zurückgibt. Der Vue-Code steht auf der Seite für Vue.

Wir stellen sie nicht in eine Rangliste. Die Ideen sind dieselben, der Unterschied liegt in der Schreibweise: React ist JavaScript mit HTML darin, Vue ist ein HTML-Template mit JavaScript darin. Wähl eine mit „Bibliothek:“ über der Lektion und wechsle jederzeit. Wenn du nicht weißt, welche: Schau, was die Firmen benutzen, bei denen du arbeiten möchtest. Wenn du die eine kennst, lernst du die andere in wenigen Tagen. Es gibt auch andere (Angular, Svelte, Solid). Sie beruhen auf denselben Ideen.

Die Idee

Was du wissen musst

Von JavaScript brauchst du Funktionen, Objekte und Arrays mit map und filter, Module mit import und async/await: der Kurs JavaScript bis „Modernes JavaScript“. Wo eine Lektion etwas daraus benutzt, verweist sie darauf.

Im Browser musst du nichts installieren. Für ein eigenes Projekt außerhalb der Sandbox brauchst du Node.js, einen Editor (zum Beispiel VS Code) und Vite, das ein leeres Projekt anlegt:

npm create vite@latest shop -- --template react
cd shop
npm install
npm run dev

Diese Befehle laufen hier nicht. Wie ein echtes Projekt aussieht, zeigt die letzte Lektion von „Eine ganze App“.

Test

Teste dich

1. Der Browser hat HTML bekommen. Was tut er, bevor er etwas zeichnet?

Er baut aus den Elementen einen Baum (das DOM) und berechnet, wohin jedes kommtEr führt JavaScript aus, und JavaScript zeichnet die SeiteEr zeichnet den Text Zeile für Zeile

2. Der Code in der Sandbox ruft fetch("https://example.com/data") auf. Was passiert?

Die Anfrage geht nicht raus: Die Sandbox hat kein Netz und antwortet nur auf /api/… des ShopsDie Lektionsseite lädt neuDie Daten kommen aus dem Internet

3. React oder Vue: Was ist besser?

Vue, weil es neuer istKeins von beiden: Sie lösen dieselbe Aufgabe auf verschiedene Weise, und die Wahl trifft das TeamReact, weil es bekannter ist

Prüfen

Lektion von vorn beginnen