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: Sichtbarkeit Umschalten
Aufgabe
Erstellen Sie eine Komponente, die einen Button und einen Textabsatz enthält. Implementieren Sie die notwendige Logik mit dem useState
Hook, um die Sichtbarkeit des Textabsatzes zu toggeln, wenn der Button geklickt wird.
Anweisungen
- Importieren Sie den
useState
Hook aus der React-Bibliothek. - Deklarieren Sie eine Zustandsvariable namens
isVisible
mit demuseState
Hook. Initialisieren Sie sie mit dem Wertfalse
. - Implementieren Sie eine Funktion namens
toggleVisibility
, die beim Aufruf denisVisible
Zustand zwischentrue
undfalse
wechselt. - Verwenden Sie die
toggleVisibility
Funktion alsonClick
Handler für den Button.
- Fügen Sie eine
import
-Anweisung hinzu, um den entsprechenden Hook aus der React-Bibliothek zu importieren. - Für diese Aufgabe verwenden wir den
useState
-Hook, da wir den Zustand der Absatzsichtbarkeit verwalten. - Um den geeigneten Variablennamen für den Zustand zu bestimmen, beobachten Sie die Funktion, die mit der Zustandssetzung verbunden ist, nämlich
setIsVisible
. Entfernen Sie das Präfix "set" und verwenden Sie einen Kleinbuchstaben für den ersten Buchstaben des Variablennamens, derisVisible
sein sollte. - Um die
toggleVisibility
-Funktion beim Klicken auf den Button aufzurufen, weisen Sie sie als Wert für dasonClick
-Attribut des Buttons zu.
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 3