react-devtools VS react-styleguidist

React Developer Tools is a browser extension that allows developers to inspect React components and their structure. This tool provides an easy way to debug and troubleshoot React applications. You can download it from its official GitHub repository: https://github.com/facebook/react-devtools.

Developer Experience - There are a number of tools that improves the development experience with React. React Developer Tools is a browser extension that allows you to inspect your component, view and manipulate its props and state. Hot reloading with webpack allows you to view changes to your code in your browser, without you having to refresh the browser. Front end development involves a lot of tweaking code, saving and then refreshing the browser. Hot reloading helps you by eliminating the last step. When there are library updates, Facebook provides codemod scripts to help you migrate your code to the new APIs. This makes the upgrading process relatively pain-free. Kudos to the Facebook team for their dedication in making the development experience with React great.

react-devtools - Inspection of React component hierarchy in the Chrome and Firefox Developer Tools

react-styleguidist

My most popular open source project, React Styleguidist, has over 10K stars on GitHub, and yet, I couldn’t manage to build a community around it, and to make it self-sufficient. The project is too big for one person to build it, and to manage issues and pull requests.

React Styleguidist is a tool that generates a living style guide for React components. This tool helps developers to document and showcase their components, making it easier for other developers to understand and use them. You can visit its official website to learn more: https://react-styleguidist.js.org/.

Because documentation is so important, our sample project has been preconfigured with React Styleguidist, a development environment for building React components. We’ll use this tool to document the components as we build them out.

Today I had to present my work on a React Native app for the last 2 months in a meeting in front of the CEO. He was pleased with my work the only critique was more comments and documentation. Afterward my immediate supervisor told me to look up "Documentation Style Guides". He said he's not concerned which pattern I chose just learn one and stick with it. After searching I found this https://react-styleguidist.js.org/documenting which seems to address what I'm looking for. I just figured I would ask if anyone else out there has experience with a certain approach and has good documentation/tutorials to learn such an approach. Thanks in advance!

Checkout React Styleguidist by Clicking here

For many years I was enjoying working on my open source projects of all sizes: large like React Styleguidist or a tiny library that nobody else is using. However, the expectation that you owe someone free work to fix bugs in their projects and add features they need to do their job, the rude comments on the issues, the hit and run pull requests where you spend an hour reviewing the code and the author never comes back to answer your comments, made it less and less enjoyable, and my attempts to pretend that it doesn’t hurt my mental health became less and less successful.

This is yet another tool that offers an interactive way of creating and sharing UI components. And there’s no better representation of how React Styleguidist works than this GIF. On the right window, you have the code. The left window is where that code is concurrently rendered into a UI. And if required, you can also test and directly edit the code on the rendered side.

You can play with these examples along with my other components in this library directly within the documentation, which was generated using React Styleguidist.

So far, it seems that Storybook with it's interactive props and canvas playground is the most popular solution. Simplified versions, like Styleguidist or Docz do not provide enough props and canvas playground functionality to see them as alternatives. I would consider these two only valid documentation alternatives, but not for active development like Storybook.