How to add comments in React JS

If you are new to React JS, you may be wondering how to make your code proper and add comments to it.¬†To do that in a React component, you won’t be able to use the standard JavaScript annotation. The following code will display the text of the comment on your page.

class Greeting extends React.Component { 
    render() { 
        return (
            // This comment will show as text on the page
        )
    }
} 

So, you need to add it as a JavaScript snippet but there are more limitations. The single-line commenting with two forward slashes will not work because it cannot see the closing braces at the end of the line. Putting the closing braces on a new line makes the code ugly.

class Greeting extends React.Component { 
    render() { 
        return (
            {// This comment will fail to compile }
        )
    }
} 

Your intention was to make it properly aligned, ordered, and clear to see.

The only simple way to do it is to use opening and closing escaping characters as for a comment block.

class Greeting extends React.Component { 
    render() { 
        return (
            {/* This comment will show as text on the page */}
        )
    }
} 

This also lets you write multi-line comments the same way.


* If you don’t know the different types of comments in JavaScript, you are too deep in React JS. Go back to school here.