Javascript 如何在 ReactJS 中做文档?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/41847565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 00:41:18  来源:igfitidea点击:

How to do documentation in ReactJS?

javascriptreactjsjsdoc

提问by Gorakh Nath

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.

我需要创建我们在 reactjs 应用程序中定义的每个组件的 doc 文件。我正在寻找可用于创建任何扩展的文档的 npm,以便它可以提取代码,注释所有内容我的组件并将其更改为任何扩展的文档。我该怎么做,请帮助我?我的问题与关于 jsdoc 的其他问题不同,因为我正在使用 jsdoc 查找 reactjs 中的文档。

采纳答案by Gorakh Nath

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

最后我找到了解决方案,首先转到此链接并正确阅读文档:- 现在阅读文档执行以下步骤:-

  • Open your command prompt
  • 打开你的命令提示符
  • Install the JSDoc globally by command: npm install jsdoc -g
  • 通过命令全局安装JSDoc:npm install jsdoc -g
  • Now go to your project folder's path and run the command: jsdoc src -r -d docs
  • 现在转到项目文件夹的路径并运行命令:jsdoc src -r -d docs
  • 上面的命令将在您的项目目录的 doc 文件夹中创建文档。

    回答by Kev

    We document our React components library by using React Styleguidist.

    我们使用React Styleguidist来记录我们的 React 组件库。

    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.
    • 从您定义的 PropTypes 生成 API / props 文档。
    • 创建实时可编辑示例文档,让人们轻松复制粘贴片段。
    • 它具有很好的可配置性,并且具有热重载功能以实现内部文档。

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

    它的工作原理是通过 Webpack 构建一个 Web 应用程序,您可以在本地使用它或为所有开发人员托管在某个地方。

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

    对我们来说,它运行得很好,随着时间的推移他们会改进它。

    Edit: Is uses react-docgenunder the hood.

    编辑:是在引擎盖下使用react-docgen

    回答by Sagar Shetty

    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).

    它为通过 React.createClass、ES2015 类定义或函数(无状态组件)定义的 React 组件提供了默认实现。这些组件定义必须遵循某些准则才能进行分析(有关更多信息,请参见下文)。

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

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

    回答by wojtekk

    There is a theme to JSDoc called better-docsand 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.

    JSDoc 有一个名为better-docs的主题,它有一个 @component 插件。当你将它添加到你的组件中(和任何其他标签一样)时,它会解析你所有的 propTypes 并生成文档。此外,当您将它与 @example 标签一起使用时 - Better-docs 将打印实时预览。

    回答by visortelle

    We have a lot of react component libs and use react-showroom

    我们有很多 react 组件库并使用react-showroom

    enter image description here

    在此处输入图片说明

    It allows to write documentation in markdown and have sandbox. A big advantage of this - you can start new project in two minutes with already configured webpack, babel, lint, etc.

    它允许在 Markdown 中编写文档并拥有沙箱。这样做的一大优势 - 您可以在两分钟内使用已配置的 webpack、babel、lint 等启动新项目。

    Very recommend to try.

    非常推荐尝试。

    回答by Laust Axelsen

    I've written a small wrapper for the react-docgen which makes it a bit simpler to work that. It exports a markdown file for all the components in the passed folder.

    我为 react-docgen 编写了一个小包装器,这使得它的工作更简单一些。它为传递的文件夹中的所有组件导出一个 Markdown 文件。

    Checkout the project https://github.com/LaustAxelsen/wilster-doc

    签出项目https://github.com/LaustAxelsen/wilster-doc