ReactJS: comentários em JSX

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 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 🙁

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 não 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 }.

Em breve teremos mais materiais sobre ReactJS e como ele pode contribuir para os seus projetos 😉