single line comment in react js - Wikitechy https://www.wikitechy.com/interview-questions/tag/single-line-comment-in-react-js/ Interview Questions Tue, 29 Mar 2022 12:08:52 +0000 en-US hourly 1 https://wordpress.org/?v=6.9 https://www.wikitechy.com/interview-questions/wp-content/uploads/2025/10/cropped-wikitechy-icon-32x32.png single line comment in react js - Wikitechy https://www.wikitechy.com/interview-questions/tag/single-line-comment-in-react-js/ 32 32 How to write comments in ReactJS ? https://www.wikitechy.com/interview-questions/reactjs/how-to-write-comments-in-reactjs/ https://www.wikitechy.com/interview-questions/reactjs/how-to-write-comments-in-reactjs/#respond Tue, 22 Mar 2022 07:39:47 +0000 https://www.wikitechy.com/interview-questions/?p=3976
  • 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:

     

     

    ]]>     https://www.wikitechy.com/interview-questions/reactjs/how-to-write-comments-in-reactjs/feed/ 0