> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baenninger.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Komponenten

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:

```tsx theme={null}
const Pizza = () => {
  return <div>Pizza</div>;
}

export default Pizza;
```

## Komponente nutzen

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

```tsx theme={null}
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.

```tsx theme={null}
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.

```tsx theme={null}
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.

<Frame caption="Komponentenbaum einer Blog-Seite">
  <img src="https://mintcdn.com/levexis-38849a2b/fK05ZPeHGTgSfJjo/images/content/web/file-excalidraw-8.svg?fit=max&auto=format&n=fK05ZPeHGTgSfJjo&q=85&s=a6effba12706b9be4461f582d33c23c2" alt="Komponentenbaum einer Blog-Seite" width="566" height="413" data-path="images/content/web/file-excalidraw-8.svg" />
</Frame>

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