Document your React components Now!

React brings the advantage of reusability of the components. Imagine you are working on a huge project or a product with 100+ components. How you will manage to discover, understand and put it to use?. It will take a lot of time and energy, so here comes a solution to all this worry.

Yess! jsdoc is your best choice. Jsdoc is basically a markup language used to annotate javascript source code files. Programmers can easily install the module, configure the required files, and can add documentation that precisely describes the application programming interface of the code.
The documentation produced by this tool is in HTML and Rich Text Format.

Follow the steps to document your react apps now.

1. Create a new dummy application:

npx create-react-app my-app
cd my-app
yarn start

2. Now install the package:

yarn add jsdoc

3. Open package.json and add the following line under scripts:

“doc”: “jsdoc -c jsdoc.json”,

4. Create a file jsdoc.json and add the following code to it:

{
“source”: {
“include”: [“src”],
“includePattern”: “.js$”,
“excludePattern”: “(node_modules/|docs)”
},
“plugins”: [“plugins/markdown”],
“templates”: {
“cleverLinks”: true,
“monospaceLinks”: true
},
“opts”: {
“recurse”: true,
“destination”: “./docs/”
}
}

5. Create a file jsdoc.conf.json and add the following code to it:

{
“tags”: {
“allowUnknownTags”: true,
“dictionaries”: [“jsdoc”, “closure”]
},
“source”: {
“include”: [“src”],
“includePattern”: “.+\\.js(doc|x)?$”,
“excludePattern”: “(^|\\/|\\\\)_”
},
“plugins”: [“plugins/markdown”, “better-docs/component”],
“templates”: {
“better-docs”: {
“name”: “My React components”
}
},
“opts”: {
“destination”: “docs”,
“recurse”: true,
“readme”: “README.md”
}}

6. Open the App.js file or any file you want to document and add comments

import logo from ‘./logo.svg’;import ‘./App.css’;
/**
* @author QuratulAin
  @function App
  @description the main app page shows react logo
*/
function App() {
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<p>Edit <code>src/App.js</code> and save to reload.</p><a className=”App-link” href=”https://reactjs.org"
target=”_blank”
rel=”noopener noreferrer”>
Learn React
</a>
</header>
</div>
);
}
export default App;

7. Now it's all set, run the below-mentioned command and see the docs folder. In the docs folder checkout the HTML files in the browser.

yarn run doc

8. Download the project from github

https://github.com/Qurat62/documentation