GUIDE DU PROGRAMMEÉTAPE 03 · Front-endDURÉE · 3–4 semaines

Créez des interfaces soignées, qui fonctionnent au-delà du premier écran.

L’étape Front-end développe des interfaces modernes avec React et explore Gatsby, Next.js, les choix de rendu et le déploiement sur le web.

Faire de l’interface un système

React invite à composer une page à partir de composants ciblés plutôt qu’à la traiter comme un grand modèle unique. Vous travaillerez les limites des composants, leurs propriétés et leur état pour garder des motifs cohérents et des évolutions faciles à comprendre.

Choisir comment la page arrive dans le navigateur

Gatsby et Next.js proposent des approches pour créer et rendre des expériences web modernes. Le rendu côté serveur et la génération statique décrivent des moments différents de préparation de la page. Les comprendre permet de choisir une approche adaptée au besoin, plutôt que d’utiliser une fonctionnalité par habitude.

Relier l’affichage et publier le résultat

Un front-end devient une application lorsque son interface communique avec de vrais services et gère les états qui en résultent. L’étape aborde ensuite la publication avec Cloudflare ou Vercel, pour faire passer le travail de l’environnement local à une adresse web accessible.

Du concept au code qui fonctionne

Ces extraits montrent comment les notions de chaque niveau prennent forme dans un projet. Ils servent de points de départ à lire, questionner, adapter et tester — pas de code à copier sans le comprendre.

Composer des éléments réutilisables

ProgramCard gère l’affichage d’un programme ; ProgramList gère la collection et son titre. Les props évitent de dupliquer le même balisage et chaque élément répété possède une clé stable.

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>
  );
}

Charger les données au rendu de la page

Cette page App Router récupère les données dans un Server Component asynchrone. Une revalidation de cinq minutes convient à un contenu qui change occasionnellement ; le contrôle HTTP empêche d’afficher une réponse invalide.

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>
  );
}

Lisez, puis adaptez
Modifiez une exigence, prévoyez le résultat, puis exécutez le code pour vérifier. En revue, expliquez le compromis choisi et une amélioration que vous apporteriez ensuite.