Welche Themen werden im Kurs behandelt?
Einführung in die React Grundlagen
Einführung in den React Kurs:
Einleitende Worte.
Was ist React und ein wenig über die Geschichte der Bibliothek.
Schwerpunkt auf der Arbeit mit einem Codebase-System.
Grundlegende React Komponente:
Lernen, was JSX in React ist.
Wie man eine grundlegende erste Komponente schreibt.
Erstellen einer Komponente mit statischen Daten und Verstehen der Grundlagen.
Erstellen einer Liste mit dynamischen Daten:
Dynamisches Erstellen von Elementen.
Verwendung der Fähigkeiten von Array.prototype.map für den dynamischen Aufbau.
Importieren und Exportieren von Komponenten aus einer Datei.
Erstellen einer Tabelle mit dynamischen Daten:
Struktur der Tabelle und ihrer Komponenten in HTML.
Verwendung einer verschachtelten Schleife zum Erstellen einer Tabelle.
Verwendung der map-Funktion auf verschachtelte Weise.
Verwendung dynamischer Daten aus einer importierten Datei.
Styling mit dem Style-Objekt:
Verstehen des Unterschieds zwischen HTML und JSX.
Lernen, Elemente auf der Seite zu stylen.
Praktizieren des dynamischen Elementaufbaus auf herausfordernde Weise mit erlernten Stilen.
Komponenten mit Zustand und Ereignissen
Integration von CSS-Dateien in React:
Integration der Welt der Stile als integraler Bestandteil des Komponentenaufbaus.
Verstehen, was className ist und der Unterschied zwischen HTML und JSX.
Integration einer umfassenden Übung des bis zu diesem Punkt im Kurs Gelernten.
Hervorhebung von CSS-Regeln und wie sie in unser gebautes System integriert werden.
Integration von Props in Komponenten:
Was sind Props in React und wann man sie verwendet.
Erstellen von Komponenten mit Props und gängige Schreibmethoden.
Verwendung von selbstgeschriebenen Komponenten im dynamischen Aufbau.
Erstellen einer Tabelle mit Props:
Erstellen einer Tabelle mit Props.
Erstellen einer intelligenten Komponente im Tabellenaufbau.
Kombinieren des dynamischen Aufbaus mit mehreren Komponenten unter Verwendung von Props und Styling mit CSS.
Verwendung von Ereignissen und useState:
Wie man Ereignisse vom Typ onClick mit Elementen verknüpft.
Was sind intelligente Komponenten und warum wir sie brauchen.
Was ist der React-Hook vom Typ useState und wie man ihn verwendet.
Erstellen von booleschen Bedingungen innerhalb des JSX einer Komponente.
Verknüpfung der Ereigniserstellung und Zustandsspeicherung für den Aufbau intelligenter React-Komponenten.
Verwendung des onChange-Ereignisses:
Wie man ein Eingabefeld zur Seite hinzufügt und useState verwendet, um Eingabewerte zu speichern.
Erstellen einer dynamischen Liste mit Benutzereingabedaten.
Ausführliche Erklärung von Arrays und der Unterschied zwischen Wert und Referenz.
Verstehen, wie man mit auf dem Zustand der Komponente gespeicherten Arrays arbeitet.
Fortgeschrittene Themen und API-Nutzung
Erstellen einer dynamischen Tabelle mit Ereignissen:
Verstehen, wie man alles bisher Gelernte integriert, um eine Tabelle dynamisch zu erstellen.
Verwendung von useState, um eine Anzahl von Eingaben zu speichern.
Beispiel für die Verwendung eines komplexen Zustands mit einem Array von Objekten.
Verwendung des useEffect-Hooks:
Was ist der React-Hook vom Typ useEffect und wie und wann man ihn verwendet.
Durchführung von Serverkommunikation mit fetch.
Darstellung von Methoden zur Absicherung unseres Codes, um unnötige Fehler zu vermeiden.
Aufbau einer intelligenten Komponente, die sowohl useState als auch useEffect-Hooks kombiniert.
Beispiel für die Verwendung von useEffect bei serverseitiger Suche:
Erkundung zusätzlicher Verwendungsmöglichkeiten für useEffect.
Verstehen, wie der Lebenszyklus der Komponente unsere Codeimplementierung beeinflusst.
Präsentation eines komplexen Beispiels für die Verwendung von useEffect.
Verwendung zusätzlicher Eingabefelder:
Was ist ein Checkbox-Eingabefeld und wie man es verwendet.
Was ist ein Radio-Eingabefeld und wie man es verwendet.
Was sind datetime- und datetime-local-Eingabefelder und wann man sie verwendet.
Erstellen einer Tabelle aus einer API mit Ergebnisfilterung:
Eine API-Anfrage stellen, um Daten über eine Tabelle zu erhalten.
Die Tabelle dynamisch erstellen.
Lernen, wie man durch intelligente Ergebnisfilterung Suchvorgänge durchführt.
Diskussion der Codearchitektur.
Fortgeschrittene Themen und Code-Architektur
Verwendung von fortgeschrittenen Filtern:
Erstellen einer Tabelle, die Informationen über Flüge anzeigt.
Erweitern der Verwendung der Tabelle mit einer intelligenten Zeilenkomponente.
Verwendung von Eingabefeldern zum Erstellen von Filtern für die Tabelle, unter Verwendung von Checkbox-, datetime- und Texteingaben.
Bulma-Bibliothek für fortgeschrittenes Styling:
Lernen, fertige Stile einzubetten.
Verwendung des bulma-Pakets, um Farbe und Stile in gemeinsam erstellten React-Projekten hinzuzufügen.
Einbetten von Stilen in eine bestehende Komponente und Durchgehen der Dokumentation der Bibliothek, die wir verwenden werden.
Sortierung in JavaScript:
Verbesserung einer bestehenden Tabellenkomponente und Hinzufügen von Sortierfähigkeiten.
Tiefgreifendes Verständnis dafür, wie Sortierungen auf Arrays mit Zahlen, Zeichenketten und Objekten funktionieren.
Sehen, wie man mit speziellen Sortierungen umgeht, wenn unser Feld kein einfacher Vergleich ist.
Kommunikationskanäle zwischen Komponenten:
Lernen, wie eine untergeordnete Komponente mit einer übergeordneten Komponente kommunizieren kann.
Implementierung von bulma-Styling in mehreren Komponenten.
Aufbau einer vielseitigen Komponente, die es uns ermöglicht, Tabs in die Anwendung einzubetten.
Beispiele für die Verwendung von Props vom Typ Funktion.
Schlussfolgerung