2 Ways to Add Comments in React Native JSX

2 Ways to Add Comments in React Native JSX

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?

To comment in React Native we have 2 methods:

1. // (Double Forward Slash) is used to comment only single line in react native code 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 2nd method.

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

keyboard shortcut

Add Comments in React Native JSX using Visual Studio Code Editor

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.

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

Hope you liked it. 🙂

How useful was this post?

Click on a star to rate us!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

About React will use the information you provide on this form to be in touch with you and to provide updates and marketing.