javascript - How to generate documentation for React Native? - Stack Overflow

admin管理员组

文章数量:1291797

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 ments (and \fn for doxygen), but ments 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 mented 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 ments only, do you have a tool to generate ments from RN+ES6(+Native) code?

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

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 ments (and \fn for doxygen), but ments 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 mented 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 ments only, do you have a tool to generate ments from RN+ES6(+Native) code?

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

• javascript
• react-native
• native
• diagram
• documentation-generation

Share Improve this question Follow edited Mar 25, 2019 at 16:28 albert 9,07733 gold badges2222 silver badges3939 bronze badges asked Sep 5, 2017 at 13:56 user8036224user8036224 42211 gold badge44 silver badges1111 bronze badges 7

• Also tried react-doxygen ./ -o ./out -e js from old react-doxygen without luck – user8036224 Commented Sep 8, 2017 at 13:21
• Did you found solution ? I stuck on this question too. – Kholiavko Commented Oct 30, 2017 at 14:32
• nope. I'm surprised too. – user8036224 Commented Oct 31, 2017 at 21:55
• 1 doesn't airbnb have something for this just out? – A. Commented Jan 21, 2018 at 1:45
• 2 for es6 and jsx support I've used esdoc (esdoc) and two plugins (github./esdoc/esdoc-plugins/tree/master/esdoc-jsx-plugin - github./esdoc/esdoc-plugins/tree/master/…). However, that wasn't a react native project but maybe it still helps a bit – Thomas Altmann Commented Mar 20, 2018 at 12:45

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 3

ESDoc can understand and document ES6 JavaScript and JSX for React Native. It will document the code with or without docblock ments. I used it with the ESDoc JSX Plugin. As others have mentioned in ments, 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 mented 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.

本文标签： javascriptHow to generate documentation for React NativeStack Overflow