How to add comments in JSX

Spread the love

In this article i will be discussing what is JSX, JSX in React and how to add comments in JSX template.

What is JSX:

JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

Basically, by using JSX you can write concise HTML/XML-like structures (e.g., DOM like tree structures) in the same file as you write JavaScript code, then Babel will transform these expressions into actual JavaScript code. Unlike the past, instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.

JSX in React:

React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, however, following are some pros that come with it.

  1. It is faster because it performs optimisation while compiling code to JavaScript.
  2. It is also type-safe and most of the errors can be caught during compilation.
  3. It makes it easier and faster to write templates, if you are familiar with HTML.

Adding Comments in JSX:

You can add comments in JSX template in multiple ways. First way to add comments is using HTML comment like syntax as following:

Other way to add comments is to use Javascript Style Comments but this needs to be wrapped inside curly braces({}) like this:

For multiple line comments, use this:



Leave a Reply

Your email address will not be published. Required fields are marked *