Beispiel-App

In diesem Kapitel bauen wir eine kleine App, die wir anschließend auf vier verschiedene Arten stylen werden. Hier geht es nur um die Komponentenstruktur — noch kein CSS.

Die App besteht aus fünf Komponenten:

App — Layout mit Header und Hauptbereich
Card — Container für Inhalte (Composition Pattern)
CardTitle — Überschrift innerhalb einer Card
CardContent — Inhaltsbereich innerhalb einer Card
Button — Ein Button mit zwei Varianten

Die Komponenten

`Button.jsx`

function Button({ variant = "default", children }) {
  return (
    <button>{children}</button>
  );
}

export default Button;

Der variant-Prop ("default" oder "primary") hat noch keine Auswirkung — wir nutzen ihn erst beim Styling.

`CardTitle.jsx`

function CardTitle({ children }) {
  return (
    <header>
      <h2>{children}</h2>
    </header>
  );
}

export default CardTitle;

`CardContent.jsx`

function CardContent({ children }) {
  return (
    <div>{children}</div>
  );
}

export default CardContent;

`Card.jsx`

function Card({ children }) {
  return (
    <article>{children}</article>
  );
}

export default Card;

Card nutzt das Composition Pattern: Sie definiert den Container, und der Aufrufer bestimmt den Inhalt — typischerweise CardTitle und CardContent.

`App.jsx`

import Card from "./Card";
import CardTitle from "./CardTitle";
import CardContent from "./CardContent";
import Button from "./Button";

function App() {
  return (
    <div>
      <header>
        <img
          src="https://react.dev/images/brand/logo_light.svg"
          alt="React Logo"
          width="40"
          height="40"
        />
        <h1>CSS mit React</h1>
      </header>

      <main>
        <Card>
          <CardTitle>Willkommen</CardTitle>
          <CardContent>
            <p>
              Diese kleine App zeigt, wie du React-Komponenten mit
              verschiedenen CSS-Ansätzen stylen kannst. Die Struktur
              bleibt immer gleich — nur das Styling ändert sich.
            </p>
            <div>
              <Button>Zurück</Button>
              <Button variant="primary">Weiter</Button>
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  );
}

export default App;

Das Ergebnis

Ohne CSS sieht die App schlicht aus: ungestylter Text, ein Standard-Button und keine visuellen Abgrenzungen. Das ist Absicht — die Komponentenstruktur steht, und wir können uns jetzt ganz auf das Styling konzentrieren.