Pourquoi commenter votre code JSX ?

Comme dans tout langage de programmation ou de balisage, l'ajout de commentaires dans votre code JSX est une pratique essentielle pour améliorer sa lisibilité et sa maintenabilité. Les commentaires vous permettent d'expliquer des parties complexes de votre code, de laisser des notes pour vous-même ou pour d'autres développeurs, ou encore de désactiver temporairement une partie du code sans la supprimer (mise en commentaire).

Cependant, la syntaxe pour insérer des commentaires en JSX n'est ni celle du HTML standard (``) ni exactement celle du JavaScript standard (`// ...` ou `/* ... */`) utilisée n'importe où. JSX a sa propre manière spécifique d'intégrer les commentaires, découlant de sa nature d'extension de syntaxe JavaScript.

La syntaxe des commentaires JSX : `{/* ... */}`

Pour insérer un commentaire à l'intérieur d'une structure JSX (c'est-à-dire entre les balises ouvrantes et fermantes d'un élément, ou entre des éléments frères), vous devez utiliser la syntaxe suivante :

{/* Ceci est un commentaire JSX valide */}

Décortiquons cette syntaxe :

• `{` et `}` : Les accolades externes indiquent que nous ouvrons une "fenêtre" pour insérer une expression JavaScript, comme nous l'avons vu précédemment.
• `/* ... */` : A l'intérieur de ces accolades, nous utilisons la syntaxe standard des commentaires multi-lignes de JavaScript.

En substance, un commentaire JSX est simplement un commentaire multi-lignes JavaScript placé à l'intérieur d'une expression JavaScript `{}` dans le contexte JSX. Les commentaires JavaScript sur une seule ligne (`// ...`) ne fonctionnent pas directement à l'intérieur des accolades `{}` pour commenter du JSX.

Exemples d'utilisation

Voici comment utiliser les commentaires dans un composant React :

function ArticleCommente() {
  const titre = "Mon Super Article";
  const afficherContenu = true;

  // Ceci est un commentaire JavaScript standard, en dehors du JSX retourné.

  return (
    

      {/* Affiche le titre principal de l'article */}
      
{titre}

      {afficherContenu && (
        

          {/* Section du contenu, affichée conditionnellement */}
          
Contenu de l'article...
          
          {/*
            Ceci est un commentaire
            JSX sur plusieurs lignes.
            Il explique la section suivante.
          */}
          
        
      )}

      {/* Exemple de code mis en commentaire (désactivé) 
      
        
Ce code n'est plus utilisé mais gardé pour référence.
      
      */}

    
  );
}

Notez bien la distinction : les commentaires JavaScript classiques (`//` et `/* */`) peuvent être utilisés librement en dehors des blocs JSX retournés par les composants ou des expressions JSX elles-mêmes. C'est seulement à l'intérieur des structures qui ressemblent à du HTML que la syntaxe `{/* ... */}` est requise.

Ce qui ne fonctionne pas

Il est important de se rappeler que les syntaxes suivantes ne sont pas valides pour commenter à l'intérieur du JSX :

// INCORRECT

   { /* Ne fonctionne pas, sera rendu comme du texte ou ignoré */}
  // Commentaire JS simple ligne { /* Ne fonctionne pas, erreur de syntaxe */}
  /* Commentaire JS multi-ligne */ { /* Ne fonctionne pas, erreur de syntaxe */}
  
  { // Commentaire JS simple ligne dans accolades { /* Ne fonctionne pas */ } }

Conclusion : Une syntaxe à mémoriser

Commenter votre code JSX est simple une fois que vous avez mémorisé la syntaxe spécifique : `{/* Votre commentaire ici */}`. Cette approche découle logiquement de la manière dont JSX intègre les expressions JavaScript via les accolades `{}`. En utilisant cette syntaxe, vous pouvez rendre vos composants React plus clairs, expliquer votre logique et faciliter la collaboration et la maintenance de votre code.