К содержанию

React Haupttutorial

Tutorial zum JavaScript-Framework React. Für Anfänger. Viel Theorie und Aufgaben.

Уроки

Einführung in das React-Framework

Installation des React-Frameworks

Unterführung des React-devtools-Plugins

Einführung in den Komponentenansatz in React

React Framework Website-Layout

Результат работы компонента

Die JSX-Sprache

Einführung in die JSX-Sprache in React

Rückgabe verschachtelter JSX-Tags durch Funktionen

Regeln für den Rückgabewert einer Funktion beim Herunterziehen eines Tags in JSX

Besonderheiten der Rückgabe mehrerer Tags in JSX

Rückgabe eines nicht geschlossenen JSX-Tags

Rückgabe eines leeren Tags durch eine Funktion in JSX

Einfügen von Werten von Variablen und Konstanten in JSX

Nuancen beim Einfügen von Variablenwerten

Einfügen von Arrays in JSX

Einfügen von Objekten in JSX

Einfügen von Variablen und Konstanten in Tag-Attribute in JSX

Speichern von Tags in Variablen und Konstanten in JSX

Besonderheiten der Speicherung mehrerer Tags in JSX-Konstanten

Tags auf verschiedenen Zeilen in JSX

Rückgabe von Tags via return in JSX

JSX-Tag-Schließung

Korrektheit des Layouts in React

Ausführung von JavaScript-Code

Bedingungen

Verwendung von Bedingungen in JSX

Bedingtes Rendering in React

Bedingungen für die Rückgabe von Tags in JSX

Der ternäre Operator in JSX

Verwendung des &&-Operators in JSX

Invertierung für verkürzte Bedingungen in JSX

Funktionen

Verwendung von Funktionen in React

Aufruf von Funktionen innerhalb von Tags in React

Event-Handling in JSX

Parameter in JSX-Funktionen

Das Event-Objekt in React

Das Event-Objekt bei der Parameterübergabe

Erstellung von Tags

Tags in JSX-Arrays

Erstellen eines Tag-Arrays in einer React-Schleife

Erzeugung von Tags aus einem Datenarray in React

Eindeutige Keys in Arrays von Tags in React

Ausgabe eines Arrays von Objekten in React

Eindeutige Schlüssel via id in React

Ausgabe eines Arrays von Objekten als HTML-Tabelle in React

Eindeutige IDs

Diskussion über eindeutige IDs in React

Probleme mit neuen IDs in React

Zufällige Zeichenketten für IDs in React

Generierung von IDs in React

Funktion zur Generierung von IDs in React

Verwendung der id-Funktion in React

Falsche Verwendung der id-Funktion in React

States

Einführung in States in React

Verwendung von States in React

Reaktivität von States in React

Boolescher Wert im State in React

Zähler mit States in React

Formulare

Arbeiten mit Inputs in React

Ändern von Eingabedaten bei ihrer Ausgabe in React

Datenänderung mit einer Funktion in React

Arbeiten mit mehreren Inputs in React

Verarbeitung von Formulardaten durch Klick auf einen Button in React

Arbeit mit textarea in React

Arbeit mit Checkboxen in React

Checkboxes und bedingtes Rendering in React

Arbeiten mit select in React

Select-Einträge aus einem Array in React

value-Attribute in Selects in React

Value-Attribute von Select aus Array in React

Arbeit mit Radio-Buttons in React

Standardwerte in React

Binding von Inputs an ein Array in React

Bidindung von Inputs an ein Objekt in React

Daten

Datenreaktivität in React

Reaktives Hinzufügen zu Arrays in React

Reaktive Array-Operationen in React

Reaktives Hinzufügen zu einem Array von Objekten in React

Reaktive Operationen auf Arrays von Objekten in React

Reaktive Datenanzeige in React

Komponenten

Einführung in React-Komponenten

Verwendung von Komponenten in React

Mehrere Instanzen einer Komponente in React

Komponenten-Props in React

Erstellung von Kinderkomponenten in React

Array zur Erstellung von Kinderkomponenten in React

Untergeordnete Komponenten in einer React-Schleife

Übergabe von States an Kindkomponenten in React

Übergeben der id an eine Komponente in React

Ändern des Parent-State in einer Child-Komponente in React

Bearbeiten des Parent-State in einer Child-Komponente in React

Bearbeiten des States in einer Enkelkomponente in React

Arbeitsmodi über States von Child-Komponenten in React

Konzepte

React-Konzepte bei der Arbeit mit Komponenten

Komponentendaten in React

Komponententypen in React

Unidirektionaler Datenfluss in React

State Lifting in React

Eine einzige Quelle der Wahrheit in React

Styling

Methoden zur Gestaltung von React-Komponenten

Verwendung von globalem CSS für das Styling in React

Einfügen von Daten in das style-Attribut aus einem Objekt in React

Einfügen von Daten in das style-Attribut aus einer separaten Datei in React

Arbeiten mit CSS-Stilen im style-Attribut in React

Einfügen von Daten in das style-Attribut aus Variablen in React

Styling mit Styled Components in React

Verwendung von Props mit Styled Components in React

Verwendung von Props beim bedingten Rendering mit Styled Components in React

Erweiterte Gestaltung von Komponenten in React

Einstieg in die Gestaltung mit CSS-Modulen in React

Fortsetzung des Studiums der Gestaltung mit CSS-Modulen in React

Die composes-Anweisung für Klassen in CSS Modules in React

Die composes-Anweisung für Dateien in CSS-Modulen in React

Projekte

Checklisten-Projekt in React

Notizbuch-Projekt in React