Cómo comentar código en React JSX

Al comenzar con el desarrollo en React, lo más seguro es que hayas intentado comentar código como todo programador cuerdo haría para no escribir una pieza de código nuevamente. React usa JSX, que usa una sintaxis estilo XML y que a su vez es una extension a ECMAScript sin semanticas definidas, además este lenguage no pretender ser implementado por exploradores o interpretes.

Bien, otro loco lenguage con sintaxis XML que salen cada no se cuantos meses ... en fin, teoricamente, los comentarios deberían ser del mismo tipo que en XML, verdad ? Sin embargo puede que te sorprendas pues no puedes hacerlo de la misma manera en la que lo haces con XML:

import React, {Component} from 'react';

class Main extends Component {
  constructor(props, context) {
    super(props, context);
    // Pero esto si será comentado porque es JavaScript
  }
 
  render() {
    return (
        <div>
            <!-- Esto no funcionará -->
            <!-- <span></span>-->
            <!--
            Esto tampoco
            -->
        </div>
    );
  }
}

export default Main;

Pero, el JavaScript puede seguir siendo comentado de la misma manera, entonces, como se comenta realmente JSX?

Comentando JSX

Como habrás notado no puedes usar comentarios de tipo HTML dentro de código JSX pues el compilador interpretará eso como nodos del documento (DOM Nodes). Para comentar correctamente JSX, necesitarás comentar bloques enteros de la misma manera en la que haces con JavaScript /* Algo de código JS */, sin embargo tienes que encerrar el comentario dentro de 2 llaves {}:

import React, {Component} from 'react';

class Main extends Component {
  constructor(props, context) {
    super(props, context);
    /* 
        alert("Hola mundo");
    */

    // console.log("Ola k Aze");
  }
 
  render() {
    return (
        {/* Un comentario dentro JSX, esto si servirá :)
        <div>
        
        </div>
        */}
    );
  }
}

export default Main;

Como JSX es una lenguage "reciente", gran parte de los IDEs actuales no proveen atajos con el teclado para comentar este tipo de código.

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable