{ 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?

Answer 1

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

{/* A JSX comment */}

{/* 
  Multi
  line
  comment
*/} 

See the React docs