Commenting in Front‑End Languages

One of your key audiences when writing code is other developers, so it's important to ensure that it is easy to understand. Aside from writing clean and uncomplicated code, documentation is an important step in offering clarity to whoever may come to your code later on down the line, and commenting is a key part of this; allowing you to offer snippets of information and context right alongside each line.

In front‑end development, there are two basic types of comments: single‑line, and multi‑line (or block). The names are fairly self‑explanatory, but their formats do differ slightly from one language to the next...

Comments in HTML

In HTML, comments utilises the <!‑‑ and ‑‑> braces. You can include line returns between these, so you use them for both single‑line and multi‑line comments:

<!-- This is a single-line comment --><!--  It is also possible to include multiple  lines within your comment just by including  line returns-->

Comments in CSS

In CSS we use the /* and */ braces for a block comment:

/*  This is a multi-line comment in CSS.  We can put as much detail or information  as we like between these braces.*/

As with HTML, we can ‑ of course ‑ also use these all on a single line. However, we can also include simple single‑line comments using //. So for single‑line comments in CSS, you have two options:

/* This is a single-line comment using block braces */// This is also a single-line CSS comment

Comments in JavaScript

JavaScript and CSS comments essentially mirror one another; both use /* and */ multi‑line comments, and // for single‑line:

// This is a single-line comment in JavaScript/*  This is a block-level comment in JavaScript.  On two lines!*/

Comments in React and JSX

As React is a JavaScript‑based framework, the same rules apply when it comes to commenting: use /* and */ for multi‑line comments, and // for single‑line comments.

However, confusion comes when you want to include comments within the render() method, like when you might want to include contextual comments within the JSX itself.

In these instances, you would first want to wrap your comments in curly braces:

{/*  This is what a comment in JSX looks like*/}

There is one final caveat to commenting within JSX: you can still only return one parent element so this would not work for example:

const Component = () => {  return (    {/* This is a comment about the line below */}    <p>Lorem ipsum dollar</p>  )}

In these cases, you would either want to move the comment inside of the parent:

const Component = () => {  return (    <p>      {/* This is a comment about the line below */}      Lorem ipsum dollar    </p>  )}

Or otherwise use React Fragments to wrap the return:

const Component = () => {  return (    <>      {/* This is a comment about the line below */}      <p>Lorem ipsum dollar</p>    </>  )}