Skip to main content
Komponenten sind das fundamentalste Konzept in React, da React-Applikationen vollständig aus Komponenten bestehen.
  • Komponenten sind die Bauklötze unseres User Interfaces in React
  • Teil der UI, der seine eigenen Daten, Logik und Aussehen hat
  • Wir bauen komplexe UIs, indem wir mehrere Komponenten bauen und diese kombinieren
  • Komponenten können wiederbenutzt werden, ineinander verschachtelt sein und Daten zwischen ihnen übergeben

Komponente definieren

Eine Komponente ist im Grunde genommen eine einfache Funktion, die uns Markup zurückgibt:

Komponente nutzen

Die Komponente können wir nun in unserer <App />-Komponente nutzen:

Nun wird der Text Pizza auf unserer Webseite angezeigt. Natürlich können wir nicht nur Text in unserer Komponenten anzeigen, sondern auch alle anderen HTML-Tags, wie Bilder, Videos, Code, etc.

Code

In unseren Komponenten können wir natürlich auch ganz normalen JavaScript-Code schreiben und die Variablen dann in unserem Markup nutzen.
Vor unserem return-Statement können wir also jeglichen normalen JavaScript-Code ausführen. Um JavaScript-Code in unserem JSX anzeigen zu lassen nutzen wir {}.

Komponentenbäume

Komponenten visualisieren uns, wie die Applikation aufgebaut ist.
Komponentenbaum einer Blog-Seite

Komponentenbaum einer Blog-Seite

So können wir einsehen, wie die Komponenten verschachtelt sind, wie die Beziehungen zueinander sind, etc.

Root-Komponente

Styling

Listen

Conditional Rendering

Fragments