Usando comentários JS no JSX

Você pode colocar comentários JavaScript em qualquer lugar no React/JSX com exceção lugares que JSX talvez esteja esperando um elemento React. Nessa situação, você terá de colocar o comentário dentro de { }.

Examine o código abaixo, certifique-se de entender onde você terá que dizer ao JSX que desconsidere um comentário JS para que um elemento React filho não seja criado.

var reactNode = <div /*comment*/>{/* use {'{}'} here to comment*/}</div>;

No código acima, se eu não tivesse envolvido o comentário dentro da <div> com {}, então o Babel teria convertido o comentário em um elemento de texto. O resultado, sem querer, sem o {} seria:

var reactNode = React.createElement(
  "div",
  null,
  "/* use ",
  "{}",
  " here to comment*/"
);

O que resultaria no seguinte HTML com textos como filhos de div.

<div data-reactid=".0">
    <span data-reactid=".0.0">/* use </span>
    <span data-reactid=".0.1">{}</span>
    <span data-reactid=".0.2"> here to comment*/</span>
</div>