Como comentar bloco de código em JSX – React

Neste artigo você vai aprender a como comentar bloco de código em JSX, ou seja, comentar código em React, de uma maneira simples e eficaz

Pra comentar dentro do JSX (entre as tags) use chaves com barra e asterisco: {/ seu comentário /}. As chaves são obrigatórias pra escapar da marcação e avisar o React que ali vai JavaScript. Dentro delas só funciona o comentário de bloco / /, o de linha // não funciona (ele comentaria a chave de fechamento e quebra o JSX). A mesma sintaxe {/ /} serve pra uma linha ou pra várias. Fora do JSX vale o JavaScript comum: // pra linha e / / pra bloco, sem chaves

Fala programador(a), beleza? Bora aprender mais sobre React e como comentar o código de JSX!

JSX é a forma que o React propõe para escrevermos HTML com a possibilidade de inserção de variáveis

Como você pode perceber a forma de comentar código é diferente de HTML e também de JavaScript

Há algumas formas de comentar código em React, a forma mais simples de componentes JSX é por esta sintaxe:

{/* Comentário do seu código */}

Primeiramente inserimos um bloco com abertura e fechamento de chaves e entre este bloco vamos inserir os símbolos /* e */

E entre esta sintaxe podemos inserir a nossa mensagem de comentário

Porém como dito anteriormente temos outras formas de comentar em React ou JSX

Comentários fora de componentes podem ser feitos da seguinte maneira:

// Insira um comentário

Já comentários dentro das tags de um componente podem ser feitos assim:

<Componente /* Insira seu comentário */ />

Esta última variação para tags aceita o comentário de múltiplas linhas também

Agora você já possui as variações necessárias para comentar em qualquer lugar do seu código em React!

A diferença de props e state

Você sabe quais são as diferenças entre props e state? Aproveite para aprender também neste artigo, com certeza vai mudar sua visão sobre React!

Conclusão

Neste artigo vimos como comentar bloco de código em JSX, ou seja, como fazer um comentário em React

Vimos diversas formas, mas a mais utilizada é entre componentes

Que é dada pela sintaxe {/* comentário */}

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Explicar que as chaves são obrigatórias pra escapar da marcação e avisar o React que ali dentro vai JavaScript, e que dentro delas só funciona o comentário de bloco / /. O // não funciona porque ele comentaria também a chave de fechamento e quebra o JSX. Mostrar o certo e o errado lado a lado num bloco de código: certo {/ comentário /}, errado {// comentário}.

Deixar explícito que no TSX (arquivo de React com TypeScript) o comentário dentro da marcação segue exatamente a mesma regra do JSX: {/ comentário /} entre as tags, e // ou / / normais fora da marcação. Um exemplinho curto em .tsx.

Deixar claro que a MESMA sintaxe {/ … /} serve tanto pra uma linha quanto pra várias linhas dentro do JSX, com um exemplo de comentário multi-linha entre as tags.

No nosso curso de React a gente programa em VS Code com a extensão de snippets de React, e um tropeço clássico de quem tá começando é jogar // dentro do JSX achando que comenta igual JavaScript. O editor já denuncia: a marcação fica com cara de quebrada na hora. É simples de reproduzir na tua máquina, escreve {// teste} entre duas tags e vê o JSX reclamar, depois troca por {/ teste /} e roda liso