Múltiples formas de escribir comentarios en React

Escribir comentarios útiles es una de las claves para lograr un proceso de codificación más eficiente. Facilitan mucho el mantenimiento, la depuración y la creación de aplicaciones web existentes. Una vez que los programadores terminan con un proyecto, pasan a diferentes tareas y olvidan los detalles del código que acaban de escribir. Los programadores pueden usar comentarios para describir su pensamiento y explicar las partes más complejas del código. Los comentarios le permiten volver y descubrir fácilmente el código más adelante. Pueden ahorrarle mucho tiempo si necesita agregar una función, depurar o desarrollar un código existente.

Los componentes de React deberían ser muy simples y fáciles de entender en un escenario ideal, pero no siempre es así. A veces, el propósito y la funcionalidad del componente pueden no estar claros. Escribir comentarios le permite explicar fragmentos de código difícil.

Comentarios en React - Sintaxis JSX

JSX es una sintaxis similar a HTML para facilitar la escritura de aplicaciones React. Permite a los desarrolladores estructurar una aplicación de forma intuitiva en lugar de llamar a los métodos React.createElement() docenas de veces. Los compiladores se encargan de traducir el código JSX a JavaScript vanilla.

Los componentes de React consisten en JavaScript y JSX normales. Puede escribir comentarios para ambos, pero tiene que hacer un poco de trabajo adicional para escribir comentarios en JSX. Los creadores de React decidieron no permitir comentarios regulares de JavaScript dentro de JSX. Tampoco tienen planes de agregar una función de comentarios separada para JSX en el futuro.

En JavaScript normal, puede utilizar la sintaxis normal para escribir comentarios. A continuación, se explica cómo escribir comentarios fuera de JSX:

class App extends Component {
  render() {
    // single line comment
    /*
    multi
    line
    comment 
    */
    return <h1>Hi! Try edit me</h1>;
  }
}

Aunque es muy similar a HTML, la sintaxis para escribir comentarios en JSX es diferente a HTML. No puede utilizar las etiquetas <!-- y --> para marcar el inicio y el final del comentario.

En su lugar, debe usar llaves, que le permiten escribir expresiones de JavaScript vanilla dentro de JSX. Sin las llaves, los comentarios en JSX se analizarán como texto normal. Puede escribir comentarios de JavaScript de varias líneas en JSX siempre que estén escritos entre llaves.

He aquí un ejemplo:

class App extends Component {
  render() {
    return  (
    <div>
    <h1>Sample heading</h1>
    {/* The heading text is large */}
    </div>
    )
  }
}

También puede escribir comentarios en varias líneas siempre que mueva la etiqueta final y ambas etiquetas estén entre llaves.

Escribir comentarios de una sola línea en JSX es un poco más complicado. No puede escribir algo como {//comment} porque la etiqueta // comenta automáticamente toda la línea, incluida la llave de cierre. Si desea agregar comentarios de una sola línea, asegúrese de que las llaves de cierre estén en la siguiente línea. Echemos un vistazo al ejemplo:

class App extends Component {
  render() {
    return  (
    <div>
    <h1>Sample heading</h1>
    {// comment
    }
    </div>
    )
  }
}

Esta sintaxis puede resultar un poco confusa. La mayoría de los desarrolladores de React se adhieren a la sintaxis de varias líneas para delimitar claramente el inicio y el final del comentario.

Si está interesado en aprender más sobre esto, puede explorar comentar en JSX en código de reproducción.