top of page

How to comment in React JSX

Updated: Jun 23, 2019


Comment in React Native Code
How to Write Comment in React Native Code


How do you comment in JSX?

When we write code in any programming language ,we always see or require two type of comment


First one: code description or explain code logic comment:

programming like c,c++,Java use Double Forward Slash


Second one : comment coding element , generally we see this type of comment in HTML like <!--H1 --/>

You can’t just use HTML comments inside of JSX because it thinks they are real DOM Nodes:


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 for writing comment for code description.



// exporting class

export default class App extends Component { render()

// setting logo let codersarts_logo = { uri: './images/logo.png' }; return ( <View style={styles.container}> <Image source={codersarts_logo} style={{width:193, height:100}}></Image> <Blink text='I love to blink' /> . </View> ); } }

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.

export default class App extends Component { render()

// setting logo let codersarts_logo = { uri: './images/logo.png' }; return ( <View style={styles.container}> <Image source={codersarts_logo} style={{width:193, height:100}}></Image> {/*<Blink text='I love to blink' /> */} . </View> ); } }


Same for multiline comments:

{/* <Image source={codersarts_logo} style={{width:193,height:100}}></Image> <Text style={styles.welcome}>Welcome to React Native!</Text> <Text style={styles.instructions}>To get started, edit App.js</Text> <Text style={styles.instructions}>{instructions}</Text> <Text style={styles.bigBlue} >Hello World!!</Text> <Greeting name='Rexxar' /> <Greeting name='Jaina' /> */}


If you have any doubt or you want to share something about the topic you can comment below or contact us here.


If you like Codersarts blog and looking for Assignment help,Project help, Programming tutors help and suggestion you can send mail at contact@codersarts.com.

Please write your suggestion in comment section below if you find anything incorrect in this blog post.

Kommentarer


bottom of page