PROGRAMMLEITFADENSTUFE 03 · FrontendDAUER · 3–4 Wochen

Gestalte durchdachte Oberflächen, die mehr als den ersten Bildschirm abdecken.

Die Frontend-Stufe entwickelt moderne Oberflächen mit React und behandelt Gatsby, Next.js, Rendering-Entscheidungen und die Veröffentlichung im Web.

Die Oberfläche als System gestalten

React lädt dazu ein, eine Seite aus fokussierten Komponenten zusammenzusetzen, statt sie als eine große Vorlage zu behandeln. Du arbeitest mit Komponentengrenzen, Properties und State, damit wiederkehrende Muster konsistent und Änderungen nachvollziehbar bleiben.

Entscheiden, wie eine Seite den Browser erreicht

Gatsby und Next.js bieten Möglichkeiten, moderne Web-Erlebnisse zu erstellen und darzustellen. Serverseitiges Rendering und statische Generierung beschreiben unterschiedliche Zeitpunkte, zu denen die Ausgabe einer Seite vorbereitet wird. Das Verständnis hilft, den Ansatz nach Bedarf statt aus Gewohnheit auszuwählen.

Ansicht verbinden und veröffentlichen

Ein Frontend wird zur Anwendung, wenn sich die Oberfläche mit echten Diensten verbindet und deren Zustände verarbeitet. Danach behandelt die Stufe die Veröffentlichung mit Cloudflare oder Vercel, damit die Arbeit von der lokalen Entwicklung zu einer nutzbaren Webadresse gelangt.

Vom Konzept zu funktionierendem Code

Diese Ausschnitte zeigen, wie die Inhalte jeder Stufe in echten Projekten aussehen. Sie sind Ausgangspunkte zum Lesen, Hinterfragen, Anpassen und Testen — kein Code zum blinden Kopieren.

Wiederverwendbare UI-Bausteine zusammensetzen

ProgramCard enthält das Markup für ein Programm; ProgramList verwaltet Sammlung und Überschrift. Props vermeiden doppelte Markups und jedes Element erhält einen stabilen Schlüssel.

function ProgramCard({ title, duration, href }) {
  return (
    <article className="program-card">
      <p className="program-card__duration">{duration}</p>
      <h2>{title}</h2>
      <a href={href} aria-label={`Explore the ${title} program`}>
        View program <span aria-hidden="true">→</span>
      </a>
    </article>
  );
}

export function ProgramList({ programs }) {
  return (
    <section aria-labelledby="programs-title">
      <h1 id="programs-title">Choose a learning path</h1>
      <div className="program-grid">
        {programs.map((program) => (
          <ProgramCard key={program.id} {...program} />
        ))}
      </div>
    </section>
  );
}

Daten beim Rendern der Seite laden

Diese App-Router-Seite lädt Daten in einer asynchronen Server Component. Eine Revalidierung alle fünf Minuten passt zu gelegentlichen Änderungen; die HTTP-Prüfung verhindert, Fehlerdaten als gültig zu behandeln.

async function getPrograms() {
  const response = await fetch("https://api.example.com/programs", {
    next: { revalidate: 300 },
  });

  if (!response.ok) throw new Error("Programs could not be loaded");
  return response.json();
}

export default async function ProgramsPage() {
  const programs = await getPrograms();

  return (
    <main>
      <h1>Programs</h1>
      <ProgramList programs={programs} />
    </main>
  );
}

Lesen und selbst anpassen
Ändere eine Anforderung, überlege dir das Ergebnis und überprüfe deine Annahme durch Ausführen. Erkläre im Review deine Entscheidung und eine mögliche nächste Verbesserung.