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 utilise the <!-- and --> delimiters. 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 */ delimiters 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 delimiters.
*/

As with HTML, we can ‑ of course ‑ also use these all on a single line. CSS does not support // comments. For a single‑line CSS comment, use the same block‑comment delimiters on one line:

/* This is a single-line comment using block delimiters */

/* This is another single-line CSS comment */

Comments in JavaScript

JavaScript also uses /* and */ block comments, and additionally uses // 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
*/}

The comment wrapper needs to sit inside a JSX expression. In this return, placing it beside the element produces invalid syntax. React is also able to render arrays and other supported values; a single parent element is not a universal requirement.

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>
    </>
  )
}