React Styleguidist is a component development tools that would improves the workflow and code reuse in React project.
It allows you to document your React component using comments, the
prop-types library and the component use cases with markdown files.
To show you an example,
Button component in Shopit is documented with:
- component description using comment here
- supported props using
- use cases with markdown here.
- output from React Styleguidist can be seen here.
- allows you to develop component in isolation. This allows you to ignore the business rules and focus on developing a reusable UI component.
- encourage component reuse as it is easier to explore and try the components that have been developed.
- reduce need of manual documentation. As documentation are generated with comment and code itself, you do not need to worry about outdated documentation.
- ease communications with designers and business stackholders. It is a great tools when all your UI components is available in single page that you can compare and highlight variation and inconsistency.
Now we have completed introduction, let's dive into TypeScript.