React Haupttutorial
Einführung
React Installation
Anschluss des react-devtools Plugins
Komponentenansatz
Website-Layout
Ergebnis der Komponentenarbeit
Die JSX-Sprache
Einführung in JSX
Rückgabe verschachtelter Tags
Tag-Abruf nach unten
Rückgabe mehrerer Tags
Rückgabe eines nicht geschlossenen Tags
Rückgabe eines leeren Tags durch eine Funktion
Einfügen von Variablenwerten
Nuancen beim Einfügen von Variablen
Einfügen von Arrays
Einfügen von Objekten
Einfügen in Attribute
Speichern von Tags in JSX
Speichern mehrerer Tags
Tags in verschiedenen Zeilen
Rückgabe von Tags
Geschlossenheit von JSX-Tags
Korrektheit des Markups
Ausführung von JavaScript-Code
Bedingungen
Bedingungen in JSX
Anzeige nach Bedingung
Bedingungen für die Rückgabe eines Tags
Ternärer Operator in JSX
Verwendung des &&-Operators in JSX
Invertierung für verkürzte Bedingungen
Funktionen
Verwendung von Funktionen
Aufruf von Funktionen innerhalb von Tags
Anhängen von Event-Handlern
Parameter von Event-Handlern
Event-Objekt
Event-Objekt bei Parameterübergabe
Erstellung von Tags
Array von Tags
Array von Tags in einer Schleife
Tags aus einem Array mit Daten
Schlüssel in Arrays
Array von Objekten
Schlüssel via ID
Tabelle aus einem Array von Objekten
Eindeutige IDs
Diskussion
Probleme mit neuen IDs
Zufällige Zeichenketten für IDs
Generierung von IDs
Funktion zur Generierung von IDs
Verwendung der ID-Funktion
Falsche Verwendung der Funktion
States
Einführung in States
Verwendung
Reaktivität
Boolescher Wert im State
Zähler bei der Arbeit mit States
Formulare
Arbeit mit Inputs
Ändern von Input-Daten bei der Ausgabe
Datenänderung mit einer Funktion
Arbeit mit mehreren Inputs
Formulardatenverarbeitung
Arbeit mit Textarea
Arbeit mit Checkboxen
Checkboxen und bedingtes Rendering
Arbeit mit Selects
Select-Optionen aus einem Array
Value-Attribute in Select
Value-Attribute des Selects aus einem Array
Arbeit mit Radio-Buttons
Standardwerte
Binding von Inputs an ein Array
Binding von Inputs an ein Objekt
Daten
Einführung
Reaktives Hinzufügen zu Arrays
Reaktive Array-Operationen
Reaktives Hinzufügen zu Objekt-Arrays
Reaktive Operationen auf Objekt-Arrays
Reaktive Datenanzeige
Komponenten
Einführung in Komponenten
Verwendung von Komponenten
Mehrere Instanzen einer Komponente
Komponenten-Props
Untergeordnete Komponenten
Array zum Erstellen untergeordneter Komponenten
Untergeordnete Komponenten in einer Schleife
Übergeben von States an untergeordnete Komponenten
Übergeben einer ID an eine Komponente
Ändern des Parent-State
Bearbeiten des Parent-State
Bearbeiten des Grandparent-State
Betriebsmodi über States
Konzepte
Einführung
Komponentendaten
Komponententypen
Unidirektionaler Datenfluss
Hochziehen des Zustands
Eine Quelle der Wahrheit
Styling
Styling-Methoden in React
Globales CSS
Einfügen von Daten in das style-Attribut aus einem Objekt
Einfügen von Daten in das style-Attribut aus einer separaten Datei
Arbeit mit CSS-Stilen im style-Attribut
Einfügen von Daten in das style-Attribut aus Variablen
Styled Components
Props in Styled Components
Props und Conditional Rendering in Styled Components
Komponenten mit erweitertem Styling
Erste Schritte mit CSS Modules
Weitere Arbeit mit CSS Modules
Die composes-Anweisung für Klassen
Die composes-Anweisung für Dateien