Komponenten

Was sind React-Komponenten?

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:

Komponenten-Typen

Klassen-Komponenten

React-Klassen-Komponenten müssen von „React.Component“ erben („extends React.Component“) und die Methode „render()“ enthalten, die den HTML-Code zurückgibt. Eine React-Komponente wird dann wie ein normales HTML-Element eingebunden:

index.html:

index.js:

Ergebnis:

Funktions-Komponenten

React-Funktions-Komponenten erben nicht von „React.Component“ und müssen auch nicht die Methode „render()“ enthalten. Der HTML-Code wird hier direkt mit „return“ zurückgegeben. Verwendet werden Funktions-Komponenten genauso wie Klassen-Komponenten:

index.html:

index.js:

Ergebnis:

Aufbau von Komponenten

Konstruktor und Eigenschaften

Enthält eine Komponente eine Konstruktor-Funktion, so wird diese als erstes aufgerufen. Mit Hilfe von Konstruktoren können Eigenschaften von Komponenten initialisiert werden. Die Komponenten-Eigenschaften werden mit Hilfe des „state“-Objekts verwaltet. Mit Hilfe von „super()“ wird der Konstruktor der Eltern-Komponente (hier „React.Component“) aufgerufen:

index.html:

index.js:

Ergebnis:

Parameter

An Komponenten können auch Parameter übergeben werden. Parameter sind Eigenschaften, die beim Aufruf der Komponente gesetzt werden. Für die Verwaltung von Parametern wird das „props“-Objekt verwendet:

index.html:

index.js:

Ergebnis:

Externe Komponenten

Um Komponenten in anderen Webanwendungen wiederverwenden zu können sollten diese in externe Dateien ausgelagert werden. Externe Komponenten bekommen die Endung „.js“, müssen ebenfalls „React“ sowie „ReactDOM“ einbinden und zusätzlich mit der Anweisung „export default Komponentenname;“ enden. Die Datei kann, muss aber nicht den gleichen Namen wie das Modul haben. Eingebunden wird das Modul dann mit „inport Komponenten-name from `Pfad und Dateiname`“:

index.html:

index.js:

Komponente.js:

Ergebnis:

Verschachtelung

Komponenten können auch innerhalb von Komponenten verschachtelt werden:

index.html:

index.js:

Komponente.js:

Ergebnis:

Quellen