How to do documentation in ReactJS?

Question

I have a requirement to create the doc file of each of the component we define in our reactjs application. I am looking for the npm that we can use for creating the document of any extension, so that it may extract the code, comment everything from my component and change that to the document of any extension. How can I do that, please, assist me? My question is different from the other question found regarding the jsdoc, because I am looking for the documentation in reactjs using jsdoc.

Solution 1

Finally I found the solution, First go to the this link and read the document properly:- Read Document Now do the following steps:-

Open your command prompt

Install the JSDoc globally by command: npm install jsdoc -g

Now go to your project folder's path and run the command: jsdoc src -r -d docs

Solution 2

We document our React components library by using React Styleguidist.

It will parse your code with the following features:

• generate API / props docs from the PropTypes you define.
• Create live editable examples documentation that lets people copy paste easily snippet.
• It is pretty well configurable and has hot reload to achieve internal docs.

It works by building a web app through Webpack, that you can use locally or host somewhere for all your developers.

For us, it works pretty well and they improve it over time.

Edit: Is uses react-docgen under the hood.

Solution 3

Try this package it has examples for you to understand.

It provides a default implementation for React components defined via React.createClass, ES2015 class definitions or functions (stateless components). These component definitions must follow certain guidelines in order to be analyzable (see below for more info).

https://www.npmjs.com/package/@rtsao/react-docgen

Solution 4

There is a theme to JSDoc called better-docs and it has a @component plugin. When you add it to your component (as any other tags) it will parse all your propTypes and generate documentation. Furthermore when you use it in companion with @example tag - better-docs will print a live preview.

View more solutions

Comments

[Oskar]

It's a good idea to avoid installing stuff globally. Instead you can use npm install jsdoc --save-dev to only install it in your project. Then add a npm script for creating the doc. For example "createdoc": "jsdoc src -r -d docs" that you then can run with npm run createdoc.

[Jennie Ji]

Hi, I am interested in how do u document react component with JSDoc properly?