3.10.1-ecriture-de-code-jsx

Après avoir personnalisé notre composant, nous continuons le projet de gestion de dépenses. L'objectif ici est d'afficher dans le composant DepenseItem trois informations : la date, le titre (description) de la dépense et son montant. C'est l'occasion de comprendre une règle fondamentale de JSX : un composant doit retourner un seul élément racine.

Règle fondamentale de JSX

  • Un composant doit retourner un seul élément racine.
  • Si plusieurs éléments frères, il faut les envelopper.
  • On utilise généralement une <div> parente.
  • Ne pas oublier le point-virgule en fin d'expression.

Si vous essayez d'écrire deux <div> côte à côte sans élément parent, JSX vous renvoie une erreur. La solution est simple : enveloppez tout dans une <div> racine. À l'intérieur, vous pouvez ajouter autant d'éléments enfants que nécessaire. Nous créons donc une <div> pour la date, une autre pour le titre avec un <h2>, et une dernière pour le montant. 

function DepenseItem() {
  return (
    <div>
      <div>28 mars 2022</div>
      <div>
        <h2>Assurance voiture</h2>
        <div>290 euros</div>
      </div>
    </div>
  );
}

Une fois le code sauvegardé, le navigateur affiche immédiatement « 28 mars 2022 », « Assurance voiture » et « 290 euros ». Cette structure imbriquée respecte la règle de JSX d'un seul élément racine et nous donne une base solide pour la prochaine étape : ajouter du style CSS pour rendre ce composant plus agréable visuellement.

En résumé

Cette leçon couvre les principes fondamentaux de l'écriture de code JSX pour structurer un composant de dépense. On y apprend à imbriquer correctement les balises (div, h2) pour éviter les erreurs de syntaxe, et à afficher dynamiquement les données comme la date, la description et le montant. L'importance de respecter la syntaxe complète (parenthèses, point virgule) est soulignée pour assurer le bon fonctionnement du code.

Points clés

  • Imbrication obligatoire : envelopper les éléments JSX dans une div parent pour éviter les erreurs de compilation
  • Structure sémantique : utiliser div pour les conteneurs et h2/balises appropriées pour le contenu textuel
  • Syntaxe critique : point virgule en fin d'instruction et parenthèses correctement placées
  • Affichage de données : montrer la date, la description (ex: assurance voiture) et le montant (ex: 290 euros)
  • Sauvegarde systématique après chaque modification de code

Questions fréquentes

Pourquoi dois-je obligatoirement mettre une div parent autour des éléments ?

En JSX, un composant ne peut retourner qu'un seul élément racine. Si vous avez plusieurs éléments au même niveau (plusieurs div côte à côte), cela génère une erreur. La div parent les englobbe tous dans un conteneur unique.

Que montre exactement le code d'exemple final ?

Le code affiche la structure complète d'une dépense : la date (28 mars 2022), la description (assurance voiture) et le prix (290 euros).

Est-ce que le point virgule à la fin est facultatif ?

Non, le point virgule est obligatoire en JavaScript/JSX pour terminer l'instruction. Oublier cette syntaxe causera une erreur.