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: 
const Pizza = () => {
  return <div>Pizza</div>;
}

export default Pizza;

​
Komponente nutzen

Die Komponente können wir nun in unserer <App />-Komponente nutzen: 
const App = () => {
  return <Pizza />;
}

export default App;
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. 
const Pizza = () => {
  return (
    <div>
      ![Pizza Spinaci](/pizzas/spinaci.jpg)
      <h2>Pizza Spinaci</h2>
      <p>Tomato, mozarella, spinach, and ricotta cheese</p>
    </div>
  );
}

export default Pizza;

​
Code

In unseren Komponenten können wir natürlich auch ganz normalen JavaScript-Code schreiben und die Variablen dann in unserem Markup nutzen. 
const Footer = () => {
  const hour = new Date().getHours();
  const openHour = 8;
  const closeHour = 22;
  const isOpen = hour >= openHour && hour <= closeHour;
  console.log(isOpen)

  return <footer>We're open from {openHour}:00 to {closeHour}:00</footer>;
}

export default Footer;
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
So können wir einsehen, wie die Komponenten verschachtelt sind, wie die Beziehungen zueinander sind, etc.

Root-Komponente

Styling

Listen

Conditional Rendering

Fragments