• 245 views

How to write comments in ReactJS ?

Total
0
Shares
0
0
0
0
  • ReactJS is a JS library used for building user interfaces.
  • It is Declarative, Component-based and Technology stack agnostic.
  • It is only designed for speed, simplicity, and scalability.
  • It is some of the most popular libraries among web developers.

For example(1),

Comments for React Components:

  • We can write comments in React using the double forward-slash // or the asterisk format /* */, similar to regular JavaScript.
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:

 

 

Related Tags
Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like

What is Prop Drilling ?

    We pass a prop with another component with the help of all the components that come between, this method is known as prop drilling. Prop drilling is basically a situation…
    View Answer

    What is React DOM ?

      It is an object which exposes a number of top level APIs to interact with the browser DOM. It provides DOM-specific methods that can be used at the top level…
      View Answer