Comment commenter dans le JSX de React ?

Le JSX utilisé dans React est tout jeune, il souffre de quelques petits defauts qui sont corrigés au fur et à mesure des mises à jours.

Les commentaires dans un code sont essentiels pour partager en clin d'oeil des informations sur le fonctionnement de celui-ci. On a l'habitude de voir :

// des commentaires comme ça

ou encore

/* comme ça ! */

En HTML on peut commenter dans l'arbre du DOM avec une annotation :

<!-- dans ce style -->

Jusque là, vous savez déjà tout... mais voilà ! Pour commentaire dans le JSX de React, il faut s'y prendre differement.

Tu ne peux tout simplement pas commenter comme en HTML dans le JSX.

Par exemple, ce bout de code ne marchera pas :

render() {
	return (
	  <div>
		<!-- Non, vraiment, ça ne marchera pas ! -->
	  </div>
	)
  }

Pour pouvoir commenter dans le JSX de React, on doit obligatoirement y mettre dans des crochets, comme un objet !

render() {
	return (
	  <div>
		{
			//	Je suis heureux de pouvoir commenter maintenant !
		}
		{
			/*
				Et on peut le faire sur plusieurs lignes
				aussi !
			*/
		}
	  </div>
	)
  }

Actuellement, il n'y a pas de nouvelles solutions quand à l'interprétation des commentaires comme en HTML.

Le JSX est relativement jeune, il a déjà évolué dans le passé et continuera dans le futur pour peaufiner sa structure.

function userInteraction(article) {

	const { user, david } = article.humans;

	if (user.likeArticle) {
		if (!user.isFanFacebookPage) {
			user.likeFacebookPage();
		}
		user.shareFacebook();
		user.shareTwitter();
		user.shareLinkedin();
		david.notifyThankYou();
	} else {
		david.noOffence();
		david.notifyStillLoveYou();
	}

}

userInteraction(this);
Partages ! 😉