Créer un composant fonctionnel

Une page blanche ou un titre isolé ne suffit pas pour commencer un tableau de bord : il faut d’abord donner une structure visible à l’interface. Vous allez créer un composant React qui affiche l’en-tête et les zones principales prévues pour les dépenses, sans encore gérer de données ni d’interactions.

La leçon précédente a défini le type TypeScript d’une dépense. Vous n’en avez pas besoin pour ce premier rendu : l’objectif est de construire l’interface statique qui servira de base aux prochaines étapes.

Créer le composant de la page

Un composant fonctionnel est une fonction JavaScript ou TypeScript qui retourne une interface décrite en JSX. JSX ressemble à du HTML, mais il est écrit dans le fichier du composant et permet à React de produire les éléments affichés dans la page. Par convention, le nom d’un composant commence par une majuscule : utilisez ici App.

Créez src/App.tsx avec le composant ci-dessous. Il reprend les régions du tableau de bord définies par le projet, mais garde pour l’instant les zones de formulaire, de filtres, de récapitulatif et de liste sous forme de structure statique.

export default function App() {
  return (
    <div className="depenses-app">
      <header className="depenses-entete">
        <h1 className="depenses-entete__titre">
          Tableau de bord des dépenses
        </h1>
      </header>

      <main className="depenses-principale">
        <section className="depenses-saisie" aria-label="Saisir une dépense">
          <h2>Ajouter une dépense</h2>
          <p>Le formulaire de saisie sera ajouté dans une prochaine étape.</p>
        </section>

        <section
          className="depenses-recapitulatif"
          aria-label="Récapitulatif mensuel"
        >
          <h2>Total du mois</h2>
          <p className="depenses-recapitulatif__montant">Aucun total calculé</p>
        </section>

        <section className="depenses-filtres" aria-label="Filtres des dépenses">
          <p>Les filtres seront disponibles dans une prochaine étape.</p>
        </section>

        <section aria-label="Liste des dépenses">
          <h2>Dépenses</h2>
          <p className="depenses-message--vide">
            Aucune dépense pour cette période.
          </p>
        </section>
      </main>
    </div>
  );
}

Le corps de la fonction retourne un seul élément JSX racine, ici le conteneur div. Il contient des éléments imbriqués comme dans un document HTML. En JSX, vous écrivez className plutôt que class pour associer une classe CSS ; les noms de classes employés ici sont ceux du contrat du projet.

Rendre le composant dans la page

Pour que le navigateur affiche App, le point d’entrée React doit l’importer et le rendre dans l’élément HTML prévu à cet effet. Dans src/main.tsx, créez la racine React à partir de l’élément #root, puis transmettez-lui le composant.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import "./style.css";

const elementRacine = document.getElementById("root");

if (!elementRacine) {
  throw new Error("L’élément #root est introuvable.");
}

createRoot(elementRacine).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

L’élément ciblé par getElementById doit exister dans la page HTML. Voici une page complète minimale compatible avec ce point d’entrée ; enregistrez-la à la racine du projet sous index.html. Le navigateur charge ensuite le fichier TypeScript d’entrée, que l’outil de développement du projet transforme pour l’exécution.

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tableau de bord des dépenses</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Préparer la feuille de style

La structure s’affichera même sans règles CSS, mais la feuille du projet doit déclarer les variables de présentation autorisées. Dans src/style.css, ajoutez-les à la racine du document ; les styles pourront les utiliser au fil des prochaines leçons.

:root {
  --depenses-couleur-fond: #f6f7fb;
  --depenses-couleur-surface: #ffffff;
  --depenses-couleur-texte: #202638;
  --depenses-couleur-accent: #3157c8;
  --depenses-couleur-secondaire: #68718a;
  --depenses-espace: 1rem;
  --depenses-rayon: 0.75rem;
  --depenses-typographie: Arial, sans-serif;
}

body {
  margin: 0;
  background: var(--depenses-couleur-fond);
  color: var(--depenses-couleur-texte);
  font-family: var(--depenses-typographie);
}

.depenses-app {
  padding: var(--depenses-espace);
}

.depenses-entete,
.depenses-principale > section {
  margin-bottom: var(--depenses-espace);
  padding: var(--depenses-espace);
  border-radius: var(--depenses-rayon);
  background: var(--depenses-couleur-surface);
}

.depenses-entete__titre {
  color: var(--depenses-couleur-accent);
}

.depenses-message--vide {
  color: var(--depenses-couleur-secondaire);
}

Lancez le serveur de développement et ouvrez la page dans le navigateur. Vous devez voir le titre « Tableau de bord des dépenses », les sections de saisie, de récapitulatif et de filtres, puis le message indiquant qu’il n’y a aucune dépense. Ces textes sont provisoires : les prochaines étapes transformeront progressivement les zones statiques en interface alimentée par les données.

À retenir

• Un composant fonctionnel est une fonction nommée en majuscule qui retourne du JSX.
• Le JSX décrit la structure à afficher et doit respecter une syntaxe d’éléments correctement imbriqués.
• Utilisez `className` pour les classes CSS dans le JSX.
• Le point d’entrée rend le composant dans l’élément `#root` de la page HTML.

Dans la prochaine leçon, vous transmettrez une dépense à un composant enfant à l’aide de props typées.