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:

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

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

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 { }.

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 😉