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: Erstellen Einer Formular-Komponente
Aufgabe
In dieser Herausforderung erstellen Sie eine Form
-Komponente mit zwei Eingabefeldern: email
und password
. Das Ziel ist es, den useRef
-Hook zu verwenden, um auf die Eingabeelemente zu verweisen und die Logik zur Formularübermittlung zu handhaben.
Anweisungen
- Importieren Sie den
useRef
-Hook aus derreact
-Bibliothek. - Deklarieren Sie innerhalb der
Form
-Komponente zweiuseRef
-Variablen:emailRef
undpasswordRef
, initialisiert mitnull
. - Setzen Sie die Eingabefelder zurück, indem Sie ihre Werte mit den
useRef
-Variablen auf einen leeren String setzen.
- Um den notwendigen Hook aus der React-Bibliothek zu importieren, fügen Sie eine
import
-Anweisung hinzu. - Für diese Aufgabe verwenden wir den
useRef
-Hook, um Daten zu speichern, ohne das Markup zu beeinflussen. - Um den passenden Variablennamen für den Ref zu bestimmen, wählen Sie ein Wort, das mit dem Ref in Verbindung steht, und fügen Sie "Ref" am Ende hinzu.
- Um den Ref mit
null
zu initialisieren, übergeben Sienull
als Anfangswert in den Klammern desuseRef
-Hooks (z.B.useRef(null)
). - Um die Formulareingabe zurückzusetzen, verwenden Sie die entsprechende Ref-Variable und weisen Sie ihrem
.current.value
einen leeren String (""
) zu.
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 5