Eine Karteikarte

Willkommen im Abschlussprojekt des React-Kurses! In dieser Lektion fügst du zusammen, was du gelernt hast, und baust eine ganze App: Karteikarten zum Lernen englischer Wörter. Eine Karte zeigt ein englisches Wort, und wenn du darauf klickst, dreht sie sich um und zeigt das deutsche. Du gehst den Stapel durch, markierst die Wörter, die du schon kannst, und fügst eigene hinzu. Die App merkt sich für das nächste Mal, was du kannst, und lässt dich am Ende nur die Wörter üben, die du noch nicht kannst.

Du nutzt Komponenten und Props, Ereignisse und State, Listen und Bedingungen, ein Formular, einen Effekt, der Daten lädt, und deinen eigenen Hook. Jede Übung knüpft dort an, wo die vorige aufgehört hat (der Editor beginnt mit ihrem fertigen Code), und fügt ein Stück hinzu.

Die Dateien. App.jsx zeigt eine Überschrift und eine Karte. Die Karte ist eine eigene Komponente, Karteikarte in Karteikarte.jsx, und bekommt zwei Props: das englische wort und seine deutsche uebersetzung. Vorerst zeigt sie nur das Wort. main.jsx und index.html sind wie in den anderen Lektionen (nur der Titel ist anders). style.css enthält schon die Stile für die ganze App, auch für Klassen, die du später hinzufügst, etwa umgedreht für eine umgedrehte Karte.

Die Karte umdrehen. Ob die Karte umgedreht ist, ändert sich durch einen Klick, und die Seite zeigt es an, also ist es State: ein Boolean in Karteikarte, zuerst false. Ein Klick ändert ihn auf das Gegenteil, und die Karte zeigt je nach State eine ihrer beiden Props:

{umgedreht ? uebersetzung : wort}

Die Karte ist ein button, kein div: Einen Button erreichst du auch mit der Tab-Taste und kannst ihn mit Enter oder der Leertaste drücken, die Karten funktionieren also auch mit der Tastatur.