{ React jsx babel es6 webpack } How Can I Comment in render ( return ( // || /**/ ) )?

Question

I started a project last week. Before getting back with my team, I would like to comment my code.

/* Just for the Syntax outlook */

class Foo extends React.Components {
  constructor(props) {
    super(props);  
  }
  
  render() {
    return (
    
      <div className='bar'>
        
        /*
          <p> cannot commit!!!! </p>
          
          ** Following will throw error when bundled with webpack 
        */
        
        // This throws error as well. 
      
      <div>
    )
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

The code may seem like commenting is working, but current JSbin's setting is not set on ES6. When you run bundle it via webpack with jsx it throws an error.

Here are the following stacks

Node v6.0.0
React ES6 JSX Babel
Bundler Webpack

Btw, because Node v6 is out, do we still need to use babel?

Is the error because you're using `React.Components` and not `React.Component`? — Andy, May 01 '16 at 07:15
Possible duplicate of [ReactJS - how to use comments](http://stackoverflow.com/questions/30766441/reactjs-how-to-use-comments) — Dan Prince, May 01 '16 at 09:35

score 14 · Answer 1 · edited May 01 '16 at 07:45

14

You can comment in jsx but you need to wrap it in curly braces -

{/* A JSX comment */}

{/* 
  Multi
  line
  comment
*/}

See the React docs

edited May 01 '16 at 07:45

try-catch-finally

7,436
6
46
67

answered May 01 '16 at 07:30

dmoo

1,509
13
16

It's worth mentioning that the reason this works is because anything between comments in JSX is parsed as JavaScript. – Dan Prince May 01 '16 at 09:34
2

Note: This doesn't work within the attributes. i.e. `` – Koala Yeung Mar 08 '17 at 17:51

{ React jsx babel es6 webpack } How Can I Comment in render ( return ( // || /**/ ) )?

1 Answers1