Los comentarios son una parte esencial de cualquier código, ya que permiten explicar el propósito, la lógica y las decisiones de diseño cuando desarrollamos. Permiten añadir información adicional que no se puede inferir del código en sí mismo, como el propósito de una función, las dependencias de un componente o simplemente por qué hemos tomado una determinada decisión. Así, será mucho más fácil entender el código y mantenerlo en el futuro tanto por otras personas como, por supuesto, por nosotros mismos.
Sin embargo, escribir comentarios en React JSX puede ser un poco diferente a lo que estamos acostumbrados en otros lenguajes o frameworks y, aunque parezca una tontería, es una de las dudas más comunes cuando estamos empezando a trabajar con esta biblioteca de UI tan popular.
Una de las grandes ventajas de desarrollar aplicaciones React es que la estructura de la interfaz se puede construir en base a una sintaxis muy similar a HTML, denominada JSX. Sin embargo, es importante no confundir JSX con HTML ya que presentan algunas diferencias cruciales.
Por eso, los comentarios en JSX ¿son HTML? ¿son JavaScript? ¿Ninguno de los dos? ¿Serán los comentarios de Schrödinger, que son y no son al mismo tiempo? 😁 Vamos a verlo...
¿Por qué usar comentarios en sintaxis JSX?
Al igual que haríamos con la estructura de una página web en HTML puro, los comentarios en sintaxis JSX nos pueden ayudar a clarificar algunos aspectos del marcado de nuestros componentes React. En concreto, añadir comentarios a tu código JSX te permite:
- Explicar una funcionalidad o lógica compleja a otros desarrolladores (o a tu propio "yo" futuro)
- Documentar tu código de cara a poder reutilizarlo y resolver problemas
- Eliminar temporalmente partes de tus componentes de la renderización sin necesidad de borrar el código
¿Comentarios HTML o JavaScript en JSX?
Dado que la sintaxis JSX está diseñada para asemejarse lo máximo posible a HTML, seguramente tendrás la tentación de recurrir a la sintaxis de HTML para los comentarios:
const MiComponente = () => {
return (
<div>
<p>¡Hola, mundo!</p>
<!-- Esto sería un comentario HTML -->
</div>
);
};
Sin embargo, si lo pruebas descubrirás que esto no es una opción, ya que provocarás un error de sintaxis al evaluar el código JSX de tu aplicación. Esto se debe a que la biblioteca de traducción de JSX, Babel, espera siempre un identificador de elemento o componente al comenzar una etiqueta con <. De esta forma, todo lo que empiece por < debe ser una etiqueta funcional y válida. En consecuencia, no podemos insertar comentarios HTML en nuestro código React.
La segunda opción que probablemente se te venga a la cabeza será utilizar la sintaxis habitual de JavaScript para comentar, o bien la de una línea o la multilínea:
const MiComponente = () => {
return (
<div>
// Este no es un comentario JSX
<p>¡Hola, mundo!</p>
/*
Y este
tampoco lo es
*/
</div>
);
};
¿Cuál crees que será el resultado?
Si lo pruebas, verás que esta vez no genera ningún error. Pero, cuando veas el resultado en el navegador, notarás que los supuestos comentarios JavaScript se han colocado tal cual, como texto, en tu página web. Por tanto, no solo no sirven como comentarios, sino que puede que al incluirlos, sin darnos cuenta estemos modificando el contenido de nuestra aplicación 🤦🏻♂️
Entonces ¿cómo inserto un comentario en JSX?
Para averiguar cómo incluir comentarios válidos sin modificar la interfaz, debemos hacer cierto ejercicio de lógica y tener en cuenta estos 3 hechos:
- En JSX disponemos de un mecanismo para evaluar código JavaScript, que consiste en usar las llaves
{} de forma que el resultado del cómputo se verá insertado en su lugar.
- También sabemos que, si no evaluamos nada o el código entre llaves evalúa a
null, no se insertará nada en la interfaz, ningún elemento ni texto.
- Por último, los comentarios en JavaScript tienen dos sintaxis, la doble barra
// para comentarios de una línea y los comentarios multilínea englobados por /* ... */.
Como resultado de estos tres hechos innegables podemos deducir que la forma adecuada de insertar un comentario será evaluarlo como código JavaScript que no devuelve nada, entre llaves:
const MiComponente = () => {
return (
<div>
{// Esto sí es un comentario JSX
}
<p>¡Hola, mundo!</p>
{/*
También podemos tener
comentarios multilínea
*/}
</div>
);
};
Ahora, al renderizar este componente podrás observar que no causa ningún error ni se modifica la interfaz de la aplicación.
OJO: fíjate en que, al escribir un comentario en línea, la llave de cierre } debe forzosamente estar tras un salto de línea, ya que el comentario con // llega siempre hasta el final de la línea. Si dejas la llave de cierre en la misma línea del comentario, se continuarán evaluando las siguientes líneas como código JavaScript, provocando un error. De ahí que la forma más cómoda de realizar comentarios en línea sea utilizando también la sintaxis multilínea {/* de este modo */}.
Usar comentarios JSX para eliminar partes de la UI de tu app React
Como bonus, observa cómo puedes comentar parte de la interfaz de tu aplicación si quieres eliminarla temporalmente del componente:
const MiComponente = () => {
return (
<div role="search">
<form>
<input type="search" />
{/* <button type="submit">Buscar</button> */}
</form>
</div>
);
};
De esta forma, el botón de "Buscar" no aparecerá en este formulario de tu aplicación mientras esté comentado.
Truco: en Visual Studio Code, puedes comentar secciones de código JSX con el atajo de teclado Ctrl+/ y se colocarán automáticamente entre llaves como se ha explicado arriba.
Conclusión
Incluir comentarios en el código JSX de tus aplicaciones React es una buena práctica para mejorar la calidad y legibilidad del código. Ya tengas que explicar la lógica, documentar o simplemente eliminar temporalmente partes de la interfaz, es importante conocer el método para insertar estos comentarios.