This content originally appeared on DEV Community and was authored by Sankalp Swami
Full article is available on Aviyel
If you are a front end developer, chances are; you already had used React at least once till now. It all started with Facebook’s decision to launch live chat integrations to the platform, way back in 2013. The task was complex, maybe more complex than Facebook’s UI architecture with untraceable DOM mutation in those days. And then React saw the light of the day!
React fixed the DOM race conditions plaguing Facebook’s UI for a while through ‘Flux’ architecture to control DOM mutations and deploying an irreversible component state. It got so popular with time that a Stack Overflow survey in 2019 crowned React as the sixth most used framework in the dev circle. Today, most tech companies including Bloomberg, Air Bnb and Discord use React for their overall UI and UX architectures.
As far as React’s documentation is concerned, the dev economy is already filled with tons of tools where each platform has an edge over others. In the post, I have curated a number of tools I used for React documentation.
PS: Just because I prefer these tools for my documentation needs, you don’t have to buy them. However, the purpose is to serve developers an exhaustive list they can put out for consideration.
Tools I Use to Document React Component
Docz
Professional projects require regular documentation, period. What would you answer when your peer asks if a particular component has already been built or need source code at one place to configure a bug in your product? Well, you’d be needing a robust documentation tool here; one that saves time, and you can get through its UX hassle-free.
In that case,Docz is my first preference. Why? It has a Gatsby foundation so you can easily develop dynamic websites at a fast pace. Moreover, it’s already stuffed with all general use-cases so you won’t need external configurations to work your way around. Another feature that you may want to consider is Docz’s support of MDX formats. That way, you’ll be able to navigate through the standard remark/rehype ecosystem, and access MDX plugins during curating your docs. Plus, the changes are deployed live while you are writing down your documentation.
Documenting React Components with Docz
- Use
yarn add docz --devto install Docz. Write some MDX files in your space and rundocz dev - All your results would be available at
http://localhost:3000 - To publish, use
docz buildand a static version of your doc will be generated. - A typical docz
.mdxfile has afront-mattera-la Jekyll, someimportsandmarkdownmixed with components, like this:
--------
name: Button
menu: Components
route: /components/button
--------
import Button from './Button'#
The button
I am in love with the Button Component
<Button>Click</Button>
- Check out custom themes for steps to add more properties to your doc created with the above snippet.
- You can also use
import { Playground, PropsTable } from "docz";built-in components to write standard docs. -
<PropsTable />take your React components and display them in a neatly formatted table consisting of properties. By default, the properties available are: name, default value, type, and description.
Button.propTypes = {
/**
* I want an inverted component button
*/
inverted: PropTypes.bool
};
Button.defaultProps = {
inverted: true
};
- Also Docz’s
Playground Componenthelps to render React components in docs and creates tables with valuable content describing the React components with live-editable code below the rendered component.
You can always create u=custom themes and plugins with Docz. To save time, use the ones already curated by the community.
Other super tools are waiting for you here on Aviyel. Follow this link if you want to save your precious time which you are wasting on building custom documentation sites.
CONNECT WITH ME
This content originally appeared on DEV Community and was authored by Sankalp Swami
Sankalp Swami | Sciencx (2021-10-23T11:48:31+00:00) Tools That Have Made React Documentation A Piece of Cake. Retrieved from https://www.scien.cx/2021/10/23/tools-that-have-made-react-documentation-a-piece-of-cake/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.