¿Te ha entrado un buen dolor de cabeza porque necesitas saber cómo comentar en React? ¡No te sorprendas! Es de lo más normal. Esta se ha convertido en una de las dudas más frecuentes al trabajar con esta biblioteca de JavaScript.
Escribir comentarios es algo que se explica en todo curso de React que se precio. Sin embargo, puede ser que estés aprendiendo por tu cuenta y no te lo hayan enseñado. Por ello, ahora te vamos a explicar cómo tienes que comentar y te explicaremos el motivo por el cual no puedes hacerlo de la manera en la que pensabas que sería posible.
¿Qué vas a encontrar en este artículo?
¿Cómo hacer comentarios en React?
Para que lo entiendas rápidamente: no puedes comentar con HTML. Luego te explicamos los motivos. En su lugar, lo que tienes que hacer para poder hacer comentarios en JSX es usar llaves. Con este formato, podrás hacer comentarios:
{/* comentarios de React JSX */}
Gracias a las llaves vas a poder poner comentarios de JavaScript en JSX incluso con varias líneas. Si no pones las llaves, los comentarios serán entendidos como texto normal y no podrás trabajar de la manera en la que estabas pensando.
Pongamos un ejemplo:
class App extends Component {
render() {
return (
<div>
<h1>Sample heading</h1>
{/* pon aquí el texto que quieras */}
</div>
)
}
}
Si te fijas bien en este código, verás que la estructura requiere de la colocación de la llave de cierre en la línea siguiente al final de la línea del comentario. No puedes utilizar un código del estilo de {//comment}, lo que sería más habitual en otro tipo de casos, porque la inclusión de // arrastra el resto del código y el uso de la llave no sería efectivo.
¿Qué resulta más fácil? A la vista de lo extravagante que puede ser el código para hacer comentarios en React de una sola línea, lo más frecuente es que se amplíe el código para hacerlo multilínea. Eso permite que el inicio y el final del comentario estén mucho más claros.
Una versión de un comentario con varias líneas quedaría de la siguiente manera:
{/*
Esta es una prueba de comentario
en distintas
líneas de texto
*/}
Está claro que ser autodidacta es una de las mejores cualidades que podría tener cualquier aprendiz de programación.
Y para acelerar al máximo tu aprendizaje, te recomendamos ver esta guía para descubrir el mejor curso para ti. En ellos encontrarás clases de React prácticas y efectivas.
¿Cómo no puedes hacer comentarios en React?
Si intentas hacer comentarios en React de la manera en la que estás habituado a HTML, te encontrarás con un error. Dicho de otro modo, no puedes utilizar este tipo de código para hacer comentarios:
render() {
return (
<div>
<!-- no lo intentes, porque este código no funciona -->
</div>
)
}
Para que el código funcione tendrás que poner las llaves de la forma en la que te hemos indicado en los ejemplos anteriores.
¿En qué caso puedes usar la estructura de comentarios de JavaScript?
La situación es distinta si el lugar donde vas a escribir el comentario es en el exterior del renderizado que hagas para un componente. En ese tipo de caso sí que puedes recurrir a la sintaxis clásica que se utiliza con los comentarios de JavaScript.
El código que tienes que utilizar en este contexto es uno como este:
function Button({ text }) {
// Aquí va un comentario
/* Aquí va un comentario
formado por distintas líneas */
return (
<button>
{text}
</button>
)
}
La situación sería distinta si tuvieras que hacer el comentario en el interior del renderizado y no en el exterior:
function Button({ text }) {
return (
<button>
{/* Aquí va un comentario dentro del renderizado */}
{text}
</button>
)
}
Los primeros pasos en el aprendizaje de React son cruciales y es muy fácil perder el tiempo con tutoriales incompletos de youtube.
Ponle solución con una formación correcta y directa.
¿Qué hacer antes de introducir los comentarios en React?
Antes de que pongas en práctica lo que te hemos indicado en las líneas anteriores, tienes que seguir los pasos que te indicamos a continuación:
1. Crea una aplicación de React
De manera simplificada, puedes llevar a cabo un proyecto de React usando la interfaz de este sistema e incorporando el siguiente código:
npx create-react-app tu-app
2. Entra en la carpeta de tu nuevo proyecto
Tienes que entrar en la carpeta del proyecto en el que acabas de comenzar a trabajar. Para ello, usa el siguiente código:
cd tu-app
3. Inicia el servidor para desarrollo
De nuevo, en la interfaz de sistema introduce este código:
yarn start
Eso hará que se inicie el servidor de desarrollo, el cual en React actúa en localhost:3000. Así podrás el progreso y los cambios en la creación de la app. También verás la estructura creada, en la cual se incluyen, debajo de “tu-app” secciones como “node-modules”, “public”, “src” o el importante package.json.
Dentro de “src” asegúrate de encontrar los siguientes elementos: App.css, App.js, App.test.js, index.css, index.js, logo.svg, reportWebVitals.js y setupTests.js.
A partir de ahí ya podrás comenzar a integrar los comentarios siguiendo las indicaciones que te hemos dado en la parte inicial de esta guía.
Preguntas frecuentes sobre comentarios en React
Hay algunas dudas relacionadas con los comentarios de React que se suelen plantear y que vamos a responder para intentar ahorrarte tiempo buscando.
¿Está previsto que se implementen comentarios normales de JavaScript en JSX?
No, desgraciadamente no. Esta ha sido una petición muy habitual por parte de la comunidad, pero los desarrolladores de React se han mantenido firmes al decir que no. No tienen intención de invertir recursos en ello ni en cambiar el status quo de la forma de comentar en React.
¿Hay alguna manera de simplificar los comentarios en React?
En muchos cursos de Reacts JS se explican distintos métodos de simplificarlos, pero no hay uno que resulte tan conveniente como para que acabe siendo adoptado de forma constante cada vez que hagas comentarios. Por ejemplo, hay quienes han diseñado snippets que facilitan el proceso, aunque está lejos de ser una opción ideal.
Hoy por hoy, aunque hay mucha confusión con el uso de las llaves y los comentarios en JSX, el sistema que te hemos recomendado en la guía es el que mejor te funcionará.
