JSDoc for a ES6 react component

Question

I think the JSDoc comment for a react component could look like this:

/**
 * My component...
 *
 * @namespace MyComponent
 * @memberof app.components
 */
app.components.MyComponent = React.createClass({
    })

But how should it look like if I'm using ES6?

/**
 * My component...
 *
 * @namespace MyComponent
 * @memberof ??
 */
    class MyComponent extends Component {
      /**
       * PropTypes
       * @param {string} element
       */
      static propTypes = {
          element: PropTypes.object
      }
      /**
       * Constructor
       * How to take care about onChange and states?
       */
      constructor () {
        super()
        this.onChange = this.onChange.bind(this)
        this.state = {
          anything: true
        }
      }
    }

Also I do not understand how to document the static propTypes and the constructor...

Are there more tags missing for the 'best' documentation possible?

Solution 1

Since you are using ES6 modules, you don't need to specify the namespace nor the '@memberof'.

There is a jsdoc-react but i would recommend to use an interactive component style guide like styleguidist which handle both jsdoc and proptypes. According to their documentation, they don't comment constructor.

Here is a list of multiples react living style guide

Solution 2

You can use JSDoc with better-docs theme/plugin

• It auto-generate documentation(Readme and HTML Pages)
• Highly Customizable
• Live Preview of Your Components

Check it out here: https://www.inkoop.io/blog/a-guide-to-js-docs-for-react-js/

Comments

[csabinho]

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.