¿Cómo escribir comentarios en ReactJS?

ReactJS es una biblioteca de JavaScript utilizada para crear interfaces de usuario. Es declarativo, basado en componentes e independiente de la pila de tecnología. Ha sido diseñado para la velocidad, la simplicidad y la escalabilidad. Estas características la convierten en una de las bibliotecas más populares entre los desarrolladores web.

En este artículo, exploraremos la creación de una aplicación React y la adición de comentarios.

Creación de la aplicación React

Paso 1: Cree una aplicación React con el siguiente comando:

npx create-react-app my-app

Paso 2: muévase a la carpeta del proyecto my-app con el siguiente comando:

cd my-app

Paso 3: Inicie el servidor de desarrollo con el siguiente comando:

yarn start

(Esto ejecutará su aplicación en localhost:3000, donde podrá ver todos los cambios que realice en la aplicación).

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo 1: Comentarios para React Components. Podemos escribir comentarios en React usando la barra diagonal doble // o el formato de asterisco /* */, similar al JavaScript normal.

import React, { Component } from 'react';
  
// This is a comment
  
class App extends Component {
  
    /* This is 
    also a comment*/
    render() {
        return (
            <div>
                <h1>Welcome to GeeksforGeeks</h1>
            </div>
        );
    }
}
  
export default App;

Producción: 

Ejemplo 2: El ejemplo anterior no funciona cuando queremos comentar cosas dentro del bloque de renderizado . Esto se debe a que usamos JSX dentro del bloque de procesamiento y debemos usar un comentario de varias líneas entre llaves {/* */}.

import React, { Component } from 'react';
  
class App extends Component {
    render() {
        return (      
            <div>
                // This is not a valid comment
                /* Neither is this */
  
                {/* THIS ONE IS A VALID COMMENT */}
                  
                <h1>Welcome to GeeksforGeeks</h1>
            </div>
        );
    }
}
  
export default App;

Producción:

Nota: debemos recordar que, aunque JSX se representa como HTML normal, en realidad es una extensión de sintaxis para JavaScript. Entonces, usar <!– –> como hicimos con HTML y XML no funcionará.

import React, { Component } from 'react';
  
class App extends Component {
    render() {
        return (     
            <div>
                <!-- This is not a valid comment -->
                  
                {/* THIS ONE IS A VALID COMMENT */}
                  
                <h1>Welcome to GeeksforGeeks</h1>
            </div>
        );
    }
}
  
export default App;

Producción: