React.js-Tutorial


  • React.js ist eine JavaScript-Bibliothek, zur Erstellung von Oberflächen für Webanwendungen
  • React.js wird seit 2011 von Facebook entwickelt und ist derzeit eine der populärsten Bibliotheken zur Entwicklung von Webanwendungen
  • React.js abstrahiert vom DOM und ermöglicht so eine einfachere Oberflächenprogrammierung und eine bessere Performance
  • React.js verwendet außerdem ein hierarchisches Komponentenmodell und das Konzept des unidirektionalen Datenflusses und ermöglicht so eine gute Wiederverwendbarkeit von Oberflächenkomponenten und einen einfachen strukturierten Aufbau auch komplexer Webanwendungen
  • Nach anfänglichen Schwierigkeiten und Diskussionen um die Lizenzierung, steht React.js nun seit 2017 unter der MIT-Lizenz
  • ...mehr lesen...

  • Die vom React-Team empfohlene Lösung um mit React.js Anwendungen zu entwickeln, ist die Verwendung von Create-React-App
  • Create-React-App ist eine komfortable Umgebung, um Single-Page-Anwendungen mit React zu erstellen
  • Dazu muss Node.js und der Paketmanager npm bereits installiert sein
  • Nach der Installation von Node.js und npm kann Create-React-App mit dem Paketmanager npm wie folgt installiert werden:
    npm install -g create-react-app
  • Nach erfolgreicher Installation können mit Create-React-App wie folgt React-Anwendungen erstellt werden:
    npx create-react-app meinereactapp
  • Nach erfolgreicher Erstellung, kann die Anwendung aus ihrem Verzeichnis heraus wie folgt gestartet werden:
    npm start
  • ...mehr lesen...

  • Die vom React-Team empfohlene Lösung um mit React.js Anwendungen zu entwickeln, ist die Verwendung von Create-React-App
  • Create-React-App ist eine komfortable Umgebung, um Single-Page-Anwendungen mit React zu erstellen
  • Dazu muss Node.js und der Paketmanager npm bereits installiert sein
  • Nach der Installation von Node.js und npm kann Create-React-App mit dem Paketmanager npm wie folgt installiert werden:
    sudo npm install -g create-react-app
  • Nach erfolgreicher Installation können mit Create-React-App wie folgt React-Anwendungen erstellt werden:
    sudo npx create-react-app meinereactapp
  • Wird der „npx“-Befehl vom Betriebssystem nicht erkannt, muss die Version von npm wie folgt aktualisiert werden:
    sudo npm install npm@latest -g
  • Nach erfolgreicher Erstellung, kann die Anwendung aus ihrem Verzeichnis heraus wie folgt gestartet werden:
    npm start
  • ...mehr lesen...

  • Die vom React-Team empfohlene Lösung um mit React.js Anwendungen zu entwickeln, ist die Verwendung von Create-React-App
  • Create-React-App ist eine komfortable Umgebung, um Single-Page-Anwendungen mit React zu erstellen
  • Dazu muss Node.js und der Paketmanager npm bereits installiert sein
  • Nach der Installation von Node.js und npm kann Create-React-App mit dem Paketmanager npm wie folgt installiert werden:
    sudo npm install -g create-react-app
  • Nach erfolgreicher Installation können mit Create-React-App wie folgt React-Anwendungen erstellt werden:
    sudo npx create-react-app meinereactapp
  • Wird der „npx“-Befehl vom Betriebssystem nicht erkannt, muss die Version von npm wie folgt aktualisiert werden:
    sudo npm install npm@latest -g
  • Nach erfolgreicher Erstellung, kann die Anwendung aus ihrem Verzeichnis heraus wie folgt gestartet werden:
    npm start
  • ...mehr lesen...

  • Bei der Erstellung einer neuen React-App wird ein Verzeichnis mit dem Namen der React-App angelegt
  • Für ein minimales Setup können im Verzeichnis „public“ alle Dateien bis auf „index.html und im Verzeichnis „src“ alle Dateien bis auf „index.js“ gelöscht werden
  • Die Datei „index.html“ ist die HTML-Einstiegsseite für die React-App und muss ein Wurzelelement mit einem „id“-Attribut enthalten
  • Die Datei „index.js“ muss die Module „react“ und „react-dom“ einbinden und die sog. Render-Funktion enthalten
  • Mit Hilfe der Render-Funktion „ReactDOM.render()“ stellt die React-App HTML-Code dar
  • Der erste Parameter enthält den anzuzeigenden HTML-Code und der zweite Parameter den Verweis auf das Wurzelelement, in dem der HTML-Code dargestellt werden soll
  • ...mehr lesen...

  • React-Komponenten sind in sich geschlossene und wiederverwendbare Quellcode-Einheiten, die HTML zurückgeben
  • React-Komponenten können als Klassen- oder als Funktions-Komponenten definiert werden und müssen immer mit einem Grossbuchstaben beginnen
  • React-Klassen-Komponenten müssen von „React.Component“ erben und die Methode „render()“ enthalten, die den HTML-Code zurückgibt
  • React-Funktions-Komponenten erben nicht von „React.Component“ und geben den HTML-Code direkt mit „return“ zurück
  • Eine React-Komponente wird wie ein normales HTML-Element eingebunden
  • Mit Hilfe von Konstruktoren können Eigenschaften von Komponenten initialisiert werden, die mit Hilfe des „state“-Objekts verwaltet werden
  • An Komponenten können auch Parameter übergeben werden, die beim Aufruf der Komponente gesetzt und mit dem „props“-Objekt verwaltet werden
  • Komponenten in externe Dateien bekommen die Endung „.js“, müssen ebenfalls „React“ sowie „ReactDOM“ einbinden und zusätzlich mit der Anweisung „export default Modulname;“ enden
  • Externe Module werden mit „inport Modulname from `Pfad und Dateiname`“ eingebunden
  • ...mehr lesen...

  • Mit Hilfe des „props“-Objekts können Parameter an eine React-Komponente übergeben werden
  • Dabei werden beim Aufruf der Komponente die Parameter wie HTML-Attribute übergeben
  • Innerhalb der Komponente wird mit „this.props.parametername auf den entsprechenden Parameter zugegriffen
  • Sollen Variablen an eine Komponente übergeben werden, so werden die Variablen in geschweifte Klammern gesetzt
  • Mit dem „props“-Objekt können Parameter bei verschachtelten Komponenten auch von einer Komponente zur nächsten weitergegeben werden
  • Wenn eine Komponente über einen Konstruktor verfügt, sollte das „props“-Objekt auch an den Konstruktor und den Konstruktor der Eltern-Komponente übergeben werden
  • ...mehr lesen...

  • Das „state“-Objekt dient der Verwaltung der Eigenschaften von React-Komponenten und ist in allen React-Komponenten vorhanden
  • Bei Änderungen des „state“-Objekts, d. h. der Eigenschaften einer Komponente, wird die Komponente neu geladen und dargestellt
  • Das „state“-Objekt einer Komponente wird im Konstruktor der Komponente initialisiert
  • Der Zugriff auf die entsprechende Eigenschaft erfolgt dann über „this.state.eigenschaftsname
  • Mit Hilfe der Methode „this.setState()“ können die Werte der Eigenschaften einer Komponente geändert werden
  • Nachdem eine oder mehrere Eigenschaften einer Komponente geändert wurden, wird die Methode „render()“ aufgerufen, wodurch der Inhalt der Komponente neu geladen und dargestellt wird
  • ...mehr lesen...

  • Mit Hilfe von Events kann eine Anwendung auf Benutzeraktionen reagieren
  • So können beim Eintreten bestimmter Events, z. B. beim Klicken auf einen Button, entsprechende Funktionen ausgeführt werden
  • Events müssen bei React mit der sog. „camelCase“-Schreibweise definiert und die auszuführende Funktion in geschweifte Klammern gesetzt werden
  • Die Funktion die ausgeführt wird, wenn ein Event eintritt wird auch als Event-Handler bezeichnet
  • Sollen Parameter an den Event-Handler übergeben werden, muss der Event-Handler mit „bind()“ an das „this“ gebunden werden
  • Werden stattdessen beim Event-Attribut sog. Lambda-Ausdrücke verwendet, kann die Bindung mit „bind()“ entfallen
  • Wenn ein Ereignis ausgelöst wird, wird ein ein Event-Objekt erzeugt, das zusätzliche Informationen zum ausgelösten Ereignis enthält und beim Verwenden von „bind()“ automatisch als letzer Parameter an den Event-Handler übergeben wird
  • Werden hingegen Lambda-Ausdrücke verwendet, so muss das Event-Objekt manuell übergeben werden
  • ...mehr lesen...

CSS

  • Bei Inline-Styles werden die Style-Informationen direkt innerhalb des entsprechenden HTML-Elements mit dem Style-Attribut gesetzt
  • Bei React muss der Wert des Style-Attributs ein JavaScript-Objekt sein und in doppelte geschweifte Klammern gesetzt werden
  • Außerdem muss für die CSS-Eigenschaften die sog. „camelCase“-Syntax verwendet und die Eigenschaftswerte in Anführungsstriche gesetzt werden
  • Bei einem externen Stylesheet werden die Style-Informationen in einer externen Datei mit der Endung „.css“ erfasst und in die React-Anwendung mit „import“ eingebunden
  • Wird für ein externes Stylesheet die Endung „.module.css“ verwendet, wird die CSS-Datei als Modul deklariert und kann mit „import name from ‚...module.css‘“ über den Namen angesprochen werden
  • ...mehr lesen...

  • Formulare dienen der Interaktion des Benutzers mit einer Webseite
  • Das „form“-Element ist ein Container, in dem alle zu einem Formular gehörenden Formularelemente platziert werden
  • In React werden Formulardaten durch die Komponente verwaltet, in der sich das Formular befindet
  • Dabei werden die Formulardaten in Komponenten-Eigenschaften, d. h. dem „state“-Objekt, gespeichert
  • Dazu müssen die entsprechenden Eigenschaften zuvor im Konstruktor initialisiert werden
  • Mit Hilfe von Event-Attributen in den Formularelementen und passenden Event-Handlern können die Benutzer-aktionen behandelt werden
  • Der Zugriff innerhalb des Event-Handlers auf die Daten im Formular erfolgt über das Event-Objekt mit „event.target.value“
  • Mit Hilfe von „event.target.attributname können auch andere Attribute eines Formularelements ausgelesen werden
  • Soll für das Setzen der entsprechenden Eigenschaft im „state“-Objekt eine Variable verwendet werden, so muss die Variable in rechteckige Klammern gesetzt werden
  • Auch für Formularelemente können Variablen verwendet werden, die dann in Abhängigkeit bestimmter Eigenschaftswerte ein- bzw. ausgeblendet werden können
  • Wird in einem Formular ein „submit“-Button verwendet, kann mit dem Event-Attribut „onSubmit“ im „form“-Element ein Event-Handler für das Absenden des Formulars mit dem Formular verknüpft werden
  • ...mehr lesen...

  • Mit dem „select“-Element können Auswahllisten und mit dem „option“-Element die einzelnen Auswahloptionen realisiert werden
  • Mit type=“number“ im „input“-Element kann ein Zahlenfeld definiert werden, welches nur die Eingabe von Zahlen erlaubt
  • Mit type=“date“ im „input“-Element kann ein Datumsfeld definiert werden, welches nur die Eingabe eines Datums erlaubt und zusätzlich einen ausklappbaren Kalender zur Auswahl eines Datums anbietet
  • Textfelder werden mit dem „textarea“-Element definiert
  • Zahlenfelder sollten mit type=“number“ und Datumsfelder mit type=“date“ definiert werden, wodurch formal falsche Eingaben gar nicht erst möglich sind
  • Eine weitere Möglichkeit bietet sich mit CSS und der Verwendung der Pseudo-Klasse „:out-of-range“, mit der z. B. ein Rahmen beim Unter- bzw. Überschreiten von Grenzwerten farblich markiert werden kann
  • Die sicherste Möglicheit Formulare zu validieren ist das prüfen der Werte der Formular-elemente mit Hilfe von Bedingungen und die Ausgabe von entsprechenden Hinweistexten
  • ...mehr lesen...

  • React-Komponenten durchlaufen bei ihrer Verwendung einen sog. Lebenszyklus, der die drei Phasen „Laden“, „Aktualisieren“ und „Entladen umfasst
  • In der ersten Phase werden React-Komponenten in das DOM geladen, d. h. im Browser angezeigt und für die Anwendung, welche die Komponente verwendet, zugreifbar
  • Für das Laden von React-Komponenten gibt es die vier integrierten Methoden, „constructor()“, „getDerivedStateFromProps()“, „render()“ und „ComponentDidMount()
  • Bei der Interaktion mit dem Anwender müssen Komponenten, bzw. deren Eigenschaften und anzuzeigender Inhalt, aktualisiert, d. h. im DOM neu angezeigt, werden
  • Für das Aktualisieren gibt es die fünf integrierten MethodengetDerivedStateFromProps()“, „shouldComponentUpdate()“, „render()“, „getSnapshotBeforeUpdate()“ und „componentDidUpdate()
  • Für das Entladen, d. h. das Entfernen der entsprechenden Komponente aus dem DOM, gibt es nur die Methode „componentWillUnmount()“
  • ...mehr lesen...