Kursinhalt
React-Meisterschaft
React-Meisterschaft
1. Einführung in die Grundlagen von React
Was Ist React?SPAs vs. MPAs in der WebentwicklungWie React mit dem Virtuellen DOM ArbeitetEinführung in JSX in ReactErstellen Komplexer JSX-ElementeElemente in React RendernHerausforderung: Rendering-ElementReact-KomponenteProps in ReactHerausforderung: Funktionale KomponentenBedingte DarstellungHerausforderung: Bedingte Darstellung - Chat-BenachrichtigungHerausforderung: Bedingte Darstellung - BankalarmRendern Einer DatensammlungHerausforderung: Rendern Einer DatensammlungZusammenfassung des Abschnitts Einführung in React
2. Styling in React Apps
Einführung in das Styling in ReactInline-StileInline-Stile in der PraxisHerausforderung: Inline-StileStyling mit der CSS-DateiStyling mit der CSS-Datei in der PraxisHerausforderung: Styling mit der CSS-DateiStyling mit CSS-ModulenDatei- und Ordnerstruktur-OrganisationHerausforderung: CSS-ModuleZusammenfassung des Abschnitts Styling in React
3. React Hooks und Context
Einführung: React Hooks und ContextUseState-HookHerausforderung: Sichtbarkeit UmschaltenuseRef-HookHerausforderung: Erstellen Einer Formular-KomponenteUseEffect-HookHerausforderung: Daten Abrufen und AnzeigenuseMemo-HookHerausforderung: AutolistenfilteringKontextKontext in der PraxisHerausforderung: Welt der Astronomie AppZusammenfassung des Abschnitts React Hooks und Context
Herausforderung: Daten Abrufen und Anzeigen
Aufgabe
Erstellen Sie eine React-Komponente namens DataFetcher, die Daten von einer API abruft und anzeigt, wenn die Komponente geladen wird.
Anweisungen
- Importieren Sie die entsprechenden Hooks aus der React-Bibliothek.
- Verwenden Sie innerhalb der Komponente den
useEffect-Hook, um Daten vom bereitgestellten API-Endpunkt abzurufen, wenn die Komponente geladen wird. - Zeigen Sie die abgerufenen Daten in einem benutzerfreundlichen Format innerhalb der Komponente an. Sie können wählen, wie Sie die Daten formatieren und präsentieren, z. B. als Liste, Tabelle oder in einem anderen geeigneten Format.
- Fügen Sie eine
import-Anweisung hinzu, um den notwendigen Hook aus der React-Bibliothek zu importieren. - Verwenden Sie die
useEffect- unduseState-Hooks für diese Aufgabe.
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 7
