ReactJS é uma biblioteca JavaScript usada para construir interfaces de usuário. É declarativo, baseado em componentes e agnóstico de pilha de tecnologia. Ele foi projetado para oferecer velocidade, simplicidade e escalabilidade. Esses recursos o tornam uma das bibliotecas mais populares entre os desenvolvedores da web.

Neste artigo, exploraremos a criação de um aplicativo React e a adição de comentários a ele.

Criando o aplicativo React

Etapa 1: crie um aplicativo React com o seguinte comando:

npx create-react-app my-app

Etapa 2: mova para a pasta do projeto my-app com o seguinte comando:

cd my-app

Etapa 3: inicie o servidor de desenvolvimento com o seguinte comando:

yarn start

(Isso executará seu aplicativo em localhost: 3000, onde você pode ver todas as alterações feitas no aplicativo.)

Estrutura do projeto: terá a seguinte aparência.

Exemplo 1: comentários para componentes do React. Podemos escrever comentários no React usando a barra dupla // ou o formato de asterisco / * * /, semelhante ao 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;

Saída: 

Exemplo 2: O exemplo acima não funciona quando queremos comentar coisas dentro do bloco de renderização . Isso ocorre porque usamos JSX dentro do bloco de renderização e devemos usar comentários de várias linhas entre chaves {/ * * /}.

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;

Saída:

Nota: Devemos lembrar que, embora JSX seja renderizado como HTML normal, na verdade é uma extensão de sintaxe para JavaScript. Portanto, usar <! - -> como fizemos com HTML e XML não 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;

Saída: