For example(1),

Comments for React Components: 

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

Output :

For example(2),

In example(1) does not work when we want to comment on things inside the render block. we use JSX inside the render block and must use the multi-line comments in curly braces {/* */} .

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 Kaashiv</h1>
            </div>
        );
    }
}
  
export default App;

Output:

For example(3),

We must remember, that even though JSX gets rendered just like normal HTML. It is actually a syntax extension to JavaScript. So, using <!– –> as we did with HTML and XML will not work.

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 Kaashiv</h1>
            </div>
        );
    }
}
  
export default App;

Output:

 

 

Categorized in:

ReactJS

Tagged in:

, , , , , , , , , , , , , ,

Share Article:

Leave a Reply

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock