How to generate documentation for React Native?

Question

I tested Doxygen and multiple GitHub projects (jsdoc, react-docgen, react-doc-generator using npm i -g like:

react-doc-generator ./ -o DOCUMENTATION.md
react-docgen --pretty -o out/reactdocgen.html ./
jsdoc ./src
doxywizard

But none really understand recent ES6 JavaScript and JSX for React Native (not even speaking of native code). I end up with useless documentation.

Of course, I tried to add comments (and \fn for doxygen), but comments are fully entered by hand (not generated) and sometimes code in documentation is not present.

/**
 * 
 * 
 * @class MainScreen
 * @extends {Component}
 */
class MainScreen extends Component {
    /**
     * 
     * \fn navigationOptions()
     * @static
     * @memberof MainScreen
     */

Finally I didn't find how to jsdoc a folder and subfolders (but test results on a commented file was subpar).

So I turn to React Native documentation gurus to ask: How do you generate documentation for React Native?

If it's from comments only, do you have a tool to generate comments from RN+ES6(+Native) code?

Bonus point: can we get automatically a diagram from import statements for instance? Like:

Dacron

Also tried react-doxygen ./ -o ./out -e js from old react-doxygen without luck – Dacron

Did you found solution ? I stuck on this question too. – Cavafy

nope. I'm surprised too. – Dacron

I Guess it simply doesn't exist yet, I will try to look for a working ES6 generator. Shouldn't be that hard since the documentation is always at the same spot :) – Unimproved

doesn't airbnb have something for this just out? – Tegantegmen

for es6 and jsx support I've used esdoc (esdoc.org) and two plugins (github.com/esdoc/esdoc-plugins/tree/master/esdoc-jsx-plugin - github.com/esdoc/esdoc-plugins/tree/master/…). However, that wasn't a react native project but maybe it still helps a bit – Phloem

^^ I second the ESDoc recommendation. You can also add the ESDoc React plugin, which lets you tag props (they are not auto-discovered). Styleguidist looks useful, but would not run in my project due to webpack conflicts. – Andrew

Answer 1

ESDoc can understand and document ES6 JavaScript and JSX for React Native. It will document the code with or without docblock comments. I used it with the ESDoc JSX Plugin. As others have mentioned in comments, there are even plugins that will support the latest ECMAScript proposals.

For an example of what you'll get, you could look at the redux-higher-order-reducers ES6 code documented using ESDoc.

Finally I didn't find how to jsdoc a folder and subfolders (but test results on a commented file was subpar).

You can specify which folder to document in your .esdoc.json config file. Here is an example that will only document code in the "src" folder

{
  "source": "./src",
  "destination": "./docs",
  "plugins": [
    {"name": "esdoc-standard-plugin"},
    {"name": "esdoc-jsx-plugin", "option": {"enable": true}}
  ]
}

Bonus point: can we get automatically a diagram from import statements for instance?

ESDoc does not do it directly, but it's quite easy to achieve it use the "manual" feature of ESDoc which allows you to include your own docs. Start by using something like madge to generate the diagram from import statements. For example:

./node_modules/.bin/madge --image manual/asset/graph.svg src/

Next create a file named manual/imports-diagram.md with the following contents:

# Diagram of imports
![Diagram of imports](asset/graph.svg)

Finally, change your ESDoc configuration to specify the user manual section:

{
  "source": "./src",
  "destination": "./docs",
  "plugins": [
    {
      "name": "esdoc-standard-plugin",
      "option": {
        "manual": {
          "asset": "./manual/asset",
          "files": [
            "./manual/imports-diagram.md"
          ]
        }
      }
    },
    {"name": "esdoc-jsx-plugin", "option": {"enable": true}}
  ]
}

Run esdoc again and the madge import diagram will be included in your docs.

Ingot

this is an unmaintainable library and best to avoid not a good answer anymore. – Aleece