React Native Comments – 2 Ways to Add Comments in JSX

Introduction

2 Ways to Add Comments in React Native JSX include how you can add the comment in you React Native Code. We all know that knowledge of basics is very important while you start learning new language or framework, so in the series of learning basic components of the React Native, we want to show you how to add comments in your code.

Though it’s not a big topic to elaborate, still we wanted to make a post on React Native Comments.

Adding a comment in React Native code is not difficult but it’s weird. As we said in Understanding of React Native Development with Hello World Program, React Native uses JSX (JavaScript + XML) – a syntax for embedding XML within JavaScript, so we have to learn how to comment in JSX. Regular JavaScript comments in JSX get parsed as Text. You can’t just use HTML comments inside of JSX because they are real DOM Nodes. Then how to add a comment?

Methods to comment in React Native:

Single Line Comment

If you want to comment a single line then you can use Double Forward Slash(//) but it can only be used outside of the render block. If you want to comment in render block where we use JSX you need to use the multiline comment.

Var A,B;  //This is a single line comment

Multi-Line Comment

If you want to comment something in JSX you need to use JavaScript comments inside of Curly braces like {/*comment here*/}. It is a regular /* Block Comments */, but need to be wrapped in curly braces.

render(){
    return(
        <View>
            {/* A JSX comment */}
            {/* or it can be
              Multiline
              comment
           */}
        </View>
    )
}

keyboard shortcuts

Add Comments in React Native JSX using Visual Studio Code Editor

Ctrl + / on Windows + Linux.

Cmd + / on MacOS.

Add Comments in React Native JSX using ATOM Code Editor

You can use jsx-comment a simple package for Atom that enables a keyboard shortcut for JSX comments. To know more about how to install packages in ATOM Code Editor.

Ctrl-Alt-/ on Windows + Linux.

Cmd-Alt-/ on MacOS.

This is how you can add comments in React Native. If you have any doubts or you want to share something about the topic you can comment below or contact us here.

Hope you liked it. 🙂