Como comentar no React (JSX e TSX): sintaxe {/* */} com exemplos

Estes dias passei por uma situação engraçada: queria apenas comentar uma parte de um JSX. JSX é a sintaxe utilizada para renderizar HTML do ReactJS. Porém, isso não foi tão simples :)

A sintaxe correta

A forma correta de comentar dentro do JSX é usando {/* comentário */}. Veja o exemplo:

render(){
   return (
       <div>
          {/* Comentário correto no JSX */}
          <h1>Meu componente</h1>
       </div>
    )
}

Mas por que essa sintaxe? Vamos entender as tentativas que não funcionam e o motivo.

Tentativas comuns que não funcionam

A primeira tentativa seria fazer como um comentário em HTML:

render(){
   return (
       <div>
          <!-- isso não vai funcionar :) -->
       </div>
    )
}

Porém, rapidamente iremos perceber que isso não funciona :)

A segunda tentativa (já que JSX é meio HTML meio JS) seria tentar:

render(){
   return (
       <div>
          { <-- isso não vai funcionar :) ---> }
       </div>
    )
}

Hum, mas não funcionou :(

Por que {/* */} funciona?

Bom, mas aí que está o pulo do gato. Precisamos avisar o JSX que ele tem que renderizar este trecho de código como JavaScript e não como JSX.

E aí está o motivo do qual temos que usar { }.

render(){
   return (
       <div>
          {/* isso vai funcionar :) */}
       </div>
    )
}

Neste caso, quando utilizamos as chaves, estamos alternando o contexto entre JSX e JS, e por isso, o comentário agora irá funcionar. Basta lembrar que quando queremos “escrever” algo no JSX utilizamos { nomeDaVariavel }.

Comentários em TSX

A sintaxe é exatamente a mesma para TypeScript com JSX (TSX):

const MeuComponente: React.FC = () => {
  return (
    <div>
      {/* Comentário funciona igual em TSX */}
      <p>Conteúdo do componente</p>
    </div>
  )
}

Atalho no VS Code

No Visual Studio Code, você pode usar o atalho padrão para comentar:

• Windows/Linux: Ctrl + /
• macOS: Cmd + /

Quando você está dentro de um bloco JSX/TSX, o VS Code automaticamente insere a sintaxe {/* */} para você. Se estiver em código JavaScript normal, ele usa // ou /* */ conforme apropriado.

Comentários em múltiplas linhas

Você também pode comentar várias linhas:

render(){
   return (
       <div>
          {/* 
            Este é um comentário
            em múltiplas linhas
            dentro do JSX
          */}
          <h1>Título</h1>
       </div>
    )
}

Curta o DevPleno no Facebook, se inscreva no canal no YouTube e cadastre seu e-mail para não perder as atualizações. Abraço!