Saltar al contenido
MundoCursos

¿Cómo comentar en React?

¿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.

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.

¿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

*/}
¿Te gustaría aumentar tus conocimientos en React

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>

  )

}

¿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?

Se pueden optar por distintos métodos, 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á.