In Komponenten denken

Eine Karte statt einer Wand aus Zahlen

Eine Komponente ist eine ganz normale JavaScript-Funktion. Sie nimmt ein Objekt mit Werten entgegen und gibt zurück, wie das aussehen soll. Das Markup steht dabei direkt im Code — diese Schreibweise heißt JSX und ist HTML mit ein paar Abweichungen.

// src/components/KennzahlKarte.jsx
export function KennzahlKarte({ titel, wert, einheit }) {
  return (
    <div className="karte">
      <p className="titel">{titel}</p>
      <p className="wert">{wert} {einheit}</p>
    </div>
  );
}

Die Werte in den geschweiften Klammern sind die Stellen, an denen die Funktion einsetzt, was sie bekommen hat. Diese Werte heißen Props. Wer die Karte benutzt, schreibt sie wie Attribute hin:

<KennzahlKarte titel="Break-even-ROAS" wert={2.0} />
<KennzahlKarte titel="Werbekosten" wert={4000} einheit="€" />

Zwei Karten, eine Funktion. Ändert sich das Aussehen, fasst du eine Datei an, und beide Karten ziehen mit. Das ist der Grund für die Aufteilung: Jede Änderung hat eine Stelle statt vieler.

Eine Zeile je Kampagne

Die Kampagnen kommen später als Liste von Objekten aus der Reporting-API. Aus einer Liste von Daten wird eine Liste von Zeilen mit map: Die Methode geht jeden Eintrag durch, ruft für ihn deine Funktion auf und sammelt die Rückgaben in einer neuen Liste. In JSX gibst du pro Eintrag ein Element zurück.

// src/components/KampagnenTabelle.jsx
export function KampagnenTabelle({ kampagnen }) {
  return (
    <tbody>
      {kampagnen.map((k) => (
        <tr key={k.id}>
          <td>{k.name}</td>
          <td>{k.roas.toFixed(1)}</td>
        </tr>
      ))}
    </tbody>
  );
}

Das key ist keine Zierde. React vergleicht bei jeder Neuanzeige die alte Liste mit der neuen und braucht dafür eine Kennung je Eintrag, die zum Eintrag gehört und nicht zu seiner Position.

Das Muster selbst hat mit React nichts zu tun, es ist gewöhnliches JavaScript. Deshalb kannst du es hier ohne React üben: Das folgende Feld führt reines JavaScript in deinem Browser aus, es gibt kein JSX und keine Komponenten. Statt Zeilen-Elementen baust du Zeilen-Texte — der Weg von den Daten zur Liste ist derselbe.

const kampagnen = [
{ id: 'brand', name: 'Brand Search', kosten: 1000, umsatz: 4000 },
{ id: 'prosp', name: 'Prospecting', kosten: 2000, umsatz: 3000 },
{ id: 'retarg', name: 'Retargeting', kosten: 1000, umsatz: 3000 },
];

const zeilen = kampagnen.map((k) => k.name); // hier fehlt der ROAS

zeilen.forEach((z) => console.log(z));

Prospecting kommt dabei auf 1,5: Auf jeden Euro Werbekosten kommen anderthalb Euro Umsatz zurück. Ob das reicht, hängt an einer Schwelle, die im letzten Step dazukommt.

Props kommen von außen, State bleibt drinnen

Bis hierhin fließen die Daten in eine Richtung: von der Seite in die Komponenten. Props sind dabei Lesestoff — die Komponente bekommt sie beim Aufruf und gibt sie nicht zurück. Was sich durch einen Klick ändern soll, braucht etwas anderes: State, den eigenen Zustand einer Komponente.

'use client';

import { useState } from 'react';

export function ZeitraumWahl({ start, onWahl }) {
  const [zeitraum, setZeitraum] = useState(start);

  return (
    <div>
      {['7d', '30d', '90d'].map((z) => (
        <button
          key={z}
          className={z === zeitraum ? 'aktiv' : ''}
          onClick={() => { setZeitraum(z); onWahl(z); }}
        >
          {z}
        </button>
      ))}
    </div>
  );
}

useState gibt dir zwei Dinge: den aktuellen Wert und eine Funktion, die ihn setzt. Aufgerufen wird die Setz-Funktion, direkt zuweisen kannst du dem Wert nichts. Der Grund ist der Ablauf: Erst durch den Aufruf weiß React, dass sich etwas geändert hat, und lässt die Komponente noch einmal laufen — nur diese, nicht die ganze Seite.

Was in welcher Reihenfolge passiert

Die Seite selbst ist auch eine Komponente — nur eine, die auf dem Server läuft und deshalb Daten holen darf. Sie ruft die API, rechnet und gibt die fertigen Zahlen als Props weiter.

// src/app/page.js — läuft auf dem Server
import { holeKampagnen } from '@/lib/brain';
import { beRoas } from '@/lib/kennzahlen';
import { KennzahlKarte } from '@/components/KennzahlKarte';
import { KampagnenTabelle } from '@/components/KampagnenTabelle';

export default async function Cockpit() {
  const kampagnen = await holeKampagnen('30d');
  const schwelle = beRoas({ wareneinsatz: 35, versand: 10, gebuehren: 5 });

  return (
    <main>
      <KennzahlKarte titel="Break-even-ROAS" wert={schwelle.toFixed(1)} />
      <KampagnenTabelle kampagnen={kampagnen} />
    </main>
  );
}

Zwischen diesem Aufruf und dem ersten möglichen Klick liegen mehrere Stationen. Sie zu kennen, spart später Sucherei: Wenn eine Zahl fehlt, ist die Frage immer, an welcher Station sie verloren ging.

Rechnen gehört nicht in die Karte

Der Break-even-ROAS aus der Seite oben ist die Schwelle, ab der eine Kampagne ihre eigenen Kosten deckt. Er hängt an drei Quoten vom Umsatz: Wareneinsatz, Versand und Zahlungsgebühren. Was danach übrig bleibt, ist die Marge, und der Kehrwert der Marge ist der Break-even-ROAS.

Diese Rechnung steht in src/lib/kennzahlen.js und nicht in der Karte. Sie hat mit Anzeigen nichts zu tun, sie gilt auch woanders, und du kannst sie im Terminal mit node durchrechnen, ohne den Browser zu öffnen. Genau das machst du hier.

function beRoas(quoten) {
const marge = 1; // hier fehlt was
return 1 / marge;
}

const quoten = { wareneinsatz: 35, versand: 10, gebuehren: 5 };

console.log('Break-even-ROAS:', beRoas(quoten));
beRoas(quoten);

Mit der Schwelle 2,0 sortiert sich die Tabelle von selbst: Brand Search mit 4,0 und Retargeting mit 3,0 tragen sich, Prospecting mit 1,5 nicht. Die Karte zeigt diese Zahlen nur an, ausgerechnet werden sie in lib/kennzahlen.js.

Damit steht die Oberfläche: Karten, eine Tabelle, eine Umschaltung, und die Rechnung daneben. Was noch fehlt, sind die echten Zahlen. In der nächsten Lektion holt lib/brain.js sie von der Reporting-API — mit dem Key an der Stelle, an die er gehört.