Einen Festivalplan mit React erstellen ist ein praktisches Projekt für Lernende, die die React-Grundlagen bereits kennen. Du machst aus einem vorbereiteten Festivalkatalog einen persönlichen Tagesplan: Veranstaltungen filtern, deine Auswahl behalten und erklären, warum ein neuer Vorschlag mit einer bereits gewählten Veranstaltung kollidiert.
Zwei Guided Labs beginnen mit zwei normalen, konfliktfreien Auswahlen, bevor eine zeitlich überlappende Veranstaltung hinzukommt. Anschließend verbindest du abgeleitete Plandaten, Zeitprüfungen und lokale Speicherung. Eine eigenständige Challenge überträgt dieselben Mechanismen auf einen anderen Festivaltag mit neuen Veranstaltungen, Bühnen und IDs. Jedes Lab stellt ein eigenes Ausgangsprojekt und eigene Daten bereit.
Was du lernen wirst
Nach Abschluss des Kurses kannst du:
- die IDs gewählter Veranstaltungen als einzige Zustandsquelle behalten und daraus mit dem aktuellen Katalog Datensätze, Anzahl und Gesamtdauer ableiten;
- den sichtbaren Katalog filtern, ohne bestehende Auswahlen zu löschen, und gleichnamige Veranstaltungen anhand stabiler IDs unterscheiden;
- halboffene Zeitintervalle prüfen, sodass unmittelbar aufeinanderfolgende Veranstaltungen erlaubt sind, echte Überschneidungen mit Angabe der konkreten Veranstaltung abgelehnt werden und eine entfernte Auswahl erneut hinzugefügt werden kann;
- unter einem kurseigenen
localStorage-Schlüssel nur eine ID-Liste speichern, weiterhin gültige Auswahlen wiederherstellen und auf fehlende alte IDs hinweisen, ohne gültige zu verlieren; - fehlerhaftes JSON abfangen und mit der nötigen minimalen
useEffect-Logik Auswahlen beim Neuladen im selben Browser und unter derselben Origin wiederherstellen, solange das Lab verfügbar bleibt.
Für wen dieser Kurs geeignet ist
Der Kurs richtet sich an Lernende, die React-Komponenten für einen nützlichen persönlichen Plan aufeinander abstimmen möchten, statt voneinander unabhängige Listen zu verwalten.
Voraussetzungen: Grundlegender Umgang mit Terminal und Pfaden, Dateibearbeitung, HTML/CSS sowie JavaScript-Arrays, -Objekte und -Funktionen; React-Komponenten, JSX, Props, State mit useState, Ereignisse, bedingtes Rendering, map/filter, stabile Listenschlüssel und kontrollierte Formulare. Die Guided Labs erklären abgeleiteten Zustand, ID-basierte Auswahl, einfache Intervallvergleiche und die nötigen Konzepte von useEffect und localStorage vor der Challenge. Dies ist kein erster React-Einstieg.
Lernumgebung: LabEx stellt ein vorbereitetes React-Projekt im Browser, seine Abhängigkeiten, eine Vorschau und synthetische Festivaldaten bereit. Du arbeitest am Frontend. Website-Beschriftungen und Laufzeitausgaben bleiben Englisch; übersetzte Lehrtexte bedeuten keine übersetzte Oberfläche.
Häufig gestellte Fragen
Was gilt als Zeitkonflikt?
Alle Veranstaltungen verwenden lokale Minuten desselben Datums. Eine darf genau dann beginnen, wenn eine andere endet; eine echte Überschneidung wird abgelehnt. Der Kurs behandelt weder Pläne über Mitternacht oder mehrere Zeitzonen noch Wegezeiten zwischen Bühnen.
Wird mein Plan auf ein anderes Gerät oder Lab übertragen?
Nein. Wiederherstellung ist auf denselben Browser, dieselbe tatsächliche Origin und die weiterhin verfügbare Lab-Umgebung beschränkt und setzt erlaubten Browserspeicher voraus. Verweigert die Browserrichtlinie den Speicherzugriff, bleiben die Auswahlen nur für diesen Besuch im Arbeitsspeicher nutzbar; Wiederherstellung nach dem Neuladen wird nicht zugesagt. localStorage ist kein Konto, kein Server-Backup und keine Zusage für dauerhafte oder VM-übergreifende Speicherung.
Entwickle ich einen vollständigen Festival-Buchungsdienst?
Nein. Du erstellst einen persönlichen Plan aus vorbereiteten synthetischen Daten. Backend-Dienste, Konten, Karten, Drag-and-drop, Routenoptimierung und dynamische Serversynchronisierung gehören nicht zum Kurs.
