Glückwunsch!

Glückwunsch, deine Karteikarten funktionieren, und du hast das Ende des React-Kurses erreicht! Die App lädt ihre Wörter aus einer Datei, dreht die Karten um, geht den Stapel durch, zählt, was du kannst, fügt eigene Wörter hinzu und prüft sie, merkt sich alles für das nächste Mal und lässt dich üben, was du noch nicht kannst. Und das alles hast du selbst gebaut.

Noch eine letzte Verbesserung. Die Wörter, die du kannst, sind von den Karten verschwunden, also wäre es schön, sie irgendwo zu sehen. Zeige sie in einer Liste unter den Buttons. Die Liste wird berechnet wie zuLernen, nur mit der umgekehrten Bedingung, und map() macht daraus li-Elemente, jedes mit seinem key:

const gelernteWoerter = stapel.filter((wort) => gelernt.includes(wort.id));

<ul className="gelernte-woerter">
    {gelernteWoerter.map((wort) => (
        <li key={wort.id}>
            {wort.englisch}: {wort.deutsch}
        </li>
    ))}
</ul>

Wenn du magst, füge darüber eine Überschrift wie Gelernte Wörter hinzu und zeige beides nur, wenn die Liste nicht leer ist: gelernteWoerter.length > 0 && …, nicht gelernteWoerter.length && …, das eine 0 zeigen würde.

Was du gelernt hast. Jeder Teil des Kurses hat in deiner App seinen Platz gefunden:

• Komponenten: Die App besteht aus App, Karteikarte und WortFormular, jede in einer eigenen Datei, verbunden mit export default und import.
• JSX: das Markup direkt in JavaScript, mit className und Werten in geschweiften Klammern.
• Props: Karteikarte bekommt ihr Wort und seine Übersetzung, und WortFormular die Funktion onHinzufuegen.
• Listen und Bedingungen: filter() und map() mit key, der Bedingungsoperator für die Seite und die Klasse der Karte und ein vorzeitiges return beim Laden, bei einem Fehler und am Ende.
• Ereignisse: onClick, onChange und onSubmit mit preventDefault().
• State: ob die Karte umgedreht ist, der Index, die Wörter und was du kannst. Arrays im State werden nie an Ort und Stelle geändert.
• Formulare: kontrollierte Felder, die prüfen, was du eintippst, und eine Fehlermeldung zeigen.
• State teilen: Die Wörter leben in App, das dem Formular eine Funktion zum Hinzufügen gibt. Der Stapel, die Position, der Punktestand und die Karten, die noch zu lernen sind, werden berechnet, nicht gespeichert.
• Effekte: fetch() in einem Effekt lädt woerter.json, mit Wird geladen… und einer Fehlermeldung.
• Eigene Hooks: useLocalStorage merkt sich, was du kannst, und alle Hooks stehen am Anfang der Komponente.

React auf deinem eigenen Computer. In den Übungen hat unsere Seite getan, was auf deinem Computer ein Werkzeug namens Vite (französisch für „schnell“, ausgesprochen etwa „wit“) tut: Sie hat das JSX in JavaScript umgewandelt und die Dateien verbunden. So entstehen echte React-Projekte meistens. Du brauchst Node.js (nimm die LTS-Version), das npm mitbringt, ein Programm zum Installieren von Paketen (fertige Programme und Bibliotheken), und das Terminal (die Kommandozeile). Öffne das Terminal in dem Ordner, in dem das Projekt entstehen soll, und führe aus:

npm create vite@latest karteikarten

Vite stellt ein paar Fragen. Wähle das Framework React und die Variante JavaScript. Wenn es anbietet, das Projekt gleich zu installieren und zu starten, antworte mit No, damit du es selbst tun kannst; bei allen anderen Fragen ist die vorgeschlagene Antwort in Ordnung. Gehe dann in den neuen Ordner, installiere die Pakete und starte das Projekt:

cd karteikarten
npm install
npm run dev

npm install lädt React, Vite und alles, was sie brauchen, in den Ordner node_modules herunter. npm run dev startet den Entwicklungsserver von Vite und zeigt die Adresse deiner App, http://localhost:5173/. Öffne sie im Browser. Immer wenn du eine Datei speicherst, aktualisiert sich die Seite von selbst. Der Server läuft, bis du ihn im Terminal mit Strg+C beendest.

Die Dateien des Projekts sind angeordnet wie die Dateien der Übungen, nur das JavaScript liegt im Ordner src. Kopiere deine App ins Projekt:

• index.html liegt im Ordner des Projekts, mit <div id="root"> und einem script, das /src/main.jsx lädt. Lass es, wie es ist, bis auf den title.
• src/main.jsx rendert <App />, wie deine Datei, importiert aber ./index.css. Ändere das in ./style.css.
• src/App.jsx ist die Komponente App. Ersetze ihren Code durch deinen und speichere Karteikarte.jsx, WortFormular.jsx, useLocalStorage.js und style.css daneben in src.
• public ist für Dateien, die unverändert online gehen und die die App über ihre Adresse bekommt. Speichere woerter.json dort, und fetch("woerter.json") findet sie.

Das Beispiel von Vite hat in src auch App.css, index.css und den Ordner assets. Deine App verwendet sie nicht, du kannst sie also löschen. Und package.json listet die Pakete des Projekts und seine Befehle auf, etwa dev und build.

StrictMode. In der main.jsx von Vite ist <App /> in StrictMode eingepackt. (Vite schreibt Texte außerdem in einfache Anführungszeichen und lässt die Semikolons weg, was genauso gut funktioniert.)

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

StrictMode ändert nichts an der Seite. Es schaltet zusätzliche Prüfungen ein, solange du entwickelst: React rendert jede Komponente zweimal und führt jeden Effekt aus, räumt ihn auf und führt ihn noch einmal aus, als wäre die Komponente erschienen, verschwunden und wieder erschienen. So zeigt ein Effekt ohne Aufräumfunktion seinen Fehler sofort: Ein Intervall ohne clearInterval() würde doppelt laufen. Wir haben StrictMode in den Übungen weggelassen, weil mit ihm ein console.log() in einem Effekt alles doppelt ausgibt, was am Anfang verwirrt. Behalte es in deinem Projekt. Deine App funktioniert damit: Der Effekt lädt die Wörter nur zweimal, was nicht schadet. Die Prüfungen laufen nur in der Entwicklung, nicht in der fertigen App.

Online stellen. npm run build erzeugt die fertige App im Ordner dist: index.html, die Dateien aus public und in assets dein JavaScript und CSS, zusammengefügt und ohne JSX, bereit für Browser. Mit npm run preview kannst du es vorher ausprobieren. dist ist eine gewöhnliche Website, die jedes Webhosting ausliefern kann. Bei Netlify Drop ziehst du den Ordner auf die Seite, und deine App bekommt eine Adresse im Internet (um sie dort zu behalten, meldest du dich kostenlos an). Netlify und Vercel können dein Projekt auch von GitHub holen und nach jeder Änderung selbst bauen.

React Developer Tools ist eine Erweiterung für Chrome, Firefox und Edge. In den Entwicklerwerkzeugen des Browsers (F12, auf dem Mac Cmd+Option+I) fügt sie den Tab Components mit dem Baum deiner Komponenten hinzu: Klicke eine an, und du siehst ihre Props, ihren State und ihre anderen Hooks, und du kannst sie sogar ändern, um zu sehen, was passiert.

Wie geht es weiter? Ein paar Ideen:

• Verbessere deine Karteikarten weiter. Du weißt alles, was dafür nötig ist: ein Button, der eines deiner eigenen Wörter entfernt, Karten andersherum (erst Deutsch), das Mischen des Stapels, ein Ref, das den Cursor nach dem Hinzufügen eines Wortes zurück ins erste Feld setzt, oder mehrere Stapel (tiere.json, essen.json) mit einem select und einem Effekt, der den gewählten lädt.
• Die Dokumentation von React auf react.dev erklärt alles aus diesem Kurs ausführlicher, mit Übungen, und beschreibt jeden Hook.
• Context und useReducer: Context reicht Daten an Komponenten weit unten weiter, ohne über die Props jeder Komponente auf dem Weg zu gehen, und useReducer hält State mit vielen Arten von Änderungen an einer Stelle.
• Formular-Actions sind neu in React 19: Eine Funktion in <form action={…}> bekommt die Daten des Formulars, und useActionState und useFormStatus sagen dir, ob es noch gesendet wird und wie es ausgegangen ist.
• React Router gibt einer App mehrere Seiten mit eigenen Adressen, etwa / und /woerter.
• TypeScript beschreibt, was in den Props und im State steckt, und findet viele Fehler, noch bevor du die App ausführst. Vite hat dafür die Variante TypeScript, und der TypeScript-Kurs bringt es dir bei.
• Next.js ist ein auf React aufbauendes Framework für ganze Websites: Seiten in Dateien, Rendern auf dem Server und Laden von Daten. Auch diese Website ist damit gebaut.