How to write comments in ReactJS ?

• 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.

[pastacode lang=”markup” manual=”import%20React%2C%20%7B%20Component%20%7D%20from%20’react’%3B%0A%20%20%0A%2F%2F%20This%20is%20a%20comment%0A%20%20%0Aclass%20App%20extends%20Component%20%7B%0A%20%20%0A%20%20%20%20%2F*%20This%20is%20%0A%20%20%20%20also%20a%20comment*%2F%0A%20%20%20%20render()%20%7B%0A%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch1%3EWelcome%20to%20Kaashiv%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%7D%0A%7D%0A%20%20%0Aexport%20default%20App%3B%0A%0A” message=”” highlight=”” provider=”manual”/]

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 {/* */} .

[pastacode lang=”markup” manual=”import%20React%2C%20%7B%20Component%20%7D%20from%20’react’%3B%0A%20%20%0Aclass%20App%20extends%20Component%20%7B%0A%20%20%20%20render()%20%7B%0A%20%20%20%20%20%20%20%20return%20(%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20This%20is%20not%20a%20valid%20comment%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F*%20Neither%20is%20this%20*%2F%0A%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%2F*%20THIS%20ONE%20IS%20A%20VALID%20COMMENT%20*%2F%20%7D%0A%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch1%3EWelcome%20to%20Kaashiv%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%7D%0A%7D%0A%20%20%0Aexport%20default%20App%3B%20%0A” message=”” highlight=”” provider=”manual”/]

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.

[pastacode lang=”markup” manual=”import%20React%2C%20%7B%20Component%20%7D%20from%20’react’%3B%0A%20%20%0Aclass%20App%20extends%20Component%20%7B%0A%20%20%20%20render()%20%7B%0A%20%20%20%20%20%20%20%20return%20(%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!–%20This%20is%20not%20a%20valid%20comment%20–%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%2F*%20THIS%20ONE%20IS%20A%20VALID%20COMMENT%20*%2F%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch1%3EWelcome%20to%20Kaashiv%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%7D%0A%7D%0A%20%20%0Aexport%20default%20App%3B%0A” message=”” highlight=”” provider=”manual”/]

Output: