Plusieurs façons d'écrire des commentaires dans React

La rédaction de commentaires utiles est l’une des clés pour parvenir à un processus de codage plus efficace. Ils facilitent grandement la maintenance, le débogage et la construction d’applications Web existantes. Une fois que les programmeurs ont terminé un projet, ils passent à différentes tâches et oublient les détails du code qu’ils viennent d’écrire. Les programmeurs peuvent utiliser des commentaires pour décrire leur réflexion et expliquer les parties les plus complexes du code. Les commentaires vous permettent de revenir et de comprendre facilement le code plus tard. Ils peuvent vous faire gagner beaucoup de temps si vous devez ajouter une fonctionnalité, déboguer ou développer un code existant.

Les composants React doivent être très simples et faciles à comprendre dans un scénario idéal, mais ce n’est pas toujours le cas. Parfois, le but et la fonctionnalité du composant peuvent ne pas être clairs. Écrire des commentaires vous permet d’expliquer des bouts de code difficiles.

Commentaires dans React - Syntaxe JSX

JSX est une syntaxe de type HTML pour faciliter l’écriture d’applications React. Il permet aux développeurs de structurer une application de manière intuitive au lieu d’appeler des dizaines de fois les méthodes React.createElement(). Les compilateurs s’occupent de traduire le code JSX en JavaScript vanille.

Les composants React consistent en JavaScript et JSX standard. Vous pouvez écrire des commentaires pour les deux, mais vous devez faire un peu de travail supplémentaire pour écrire des commentaires dans JSX. Les créateurs de React ont décidé de ne pas autoriser les commentaires JavaScript réguliers dans JSX. Ils n’ont pas non plus l’intention d’ajouter une fonction de commentaire distincte pour JSX à l’avenir.

En JavaScript normal, vous pouvez utiliser la syntaxe normale pour écrire des commentaires. Voici comment rédiger des commentaires en dehors de JSX :

class App extends Component {
  render() {
    // single line comment
    /*
    multi
    line
    comment 
    */
    return <h1>Hi! Try edit me</h1>;
  }
}

Même si elle est très similaire à HTML, la syntaxe pour écrire des commentaires dans JSX est différente de HTML. Vous ne pouvez pas utiliser les balises <!-- et --> pour marquer le début et la fin du commentaire.

Au lieu de cela, vous devez utiliser des accolades, qui vous permettent d’écrire des expressions JavaScript vanille dans JSX. Sans les accolades, les commentaires dans JSX seront analysés comme du texte normal. Vous pouvez taper des commentaires JavaScript multilignes dans JSX tant qu’ils sont écrits entre des accolades.

Voici un exemple :

class App extends Component {
  render() {
    return  (
    <div>
    <h1>Sample heading</h1>
    {/* The heading text is large */}
    </div>
    )
  }
}

Vous pouvez également écrire des commentaires sur plusieurs lignes tant que vous déplacez la balise de fin et que les deux balises sont toujours entre des accolades.

Écrire des commentaires sur une seule ligne dans JSX est un peu plus compliqué. Vous ne pouvez pas écrire quelque chose comme {//comment} car la balise // commente automatiquement toute la ligne, y compris l’accolade fermante. Si vous souhaitez ajouter des commentaires sur une seule ligne, assurez-vous que les accolades fermantes se trouvent sur la ligne suivante. Regardons l’exemple :

class App extends Component {
  render() {
    return  (
    <div>
    <h1>Sample heading</h1>
    {// comment
    }
    </div>
    )
  }
}

Cette syntaxe peut être un peu déroutante. La plupart des développeurs React s’en tiennent à la syntaxe multiligne pour délimiter clairement le début et la fin du commentaire.

Si vous souhaitez en savoir plus à ce sujet, vous pouvez explorer les commentaires dans JSX sur playcode.