codequick-darkmode-logo
AnmeldenRegistrieren
React-Kurs

Lehrplan:

React-Kurs

20 Lektionen 125 Online-Programmierfragen


Welche Themen werden im Kurs behandelt?

Einführung in die React Grundlagen

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. Schlussfolgerung