How can I visualize my React Component-Tree using a diagramming software?

Question

I'm a visual learner, This would help me a lot in designing, implementing, testing etc. I need a kinda diagram that visualizes props, state, events, input, processing, output etc for each component in the tree and also as a whole. I want to visualize the components themselves and the relationship between these components, using a software like omnigraffle or anything else.

Answer 1

This can be achieved with a Browser Extension or a global npm package. (rarely a local one) Let me show you the two most popular tools.

React Sight (chrome extension)

React Sight is a live view of the component hierarchy tree of your React application with support for React Router and Redux.

Source: https://github.com/React-Sight/React-Sight

React Monocle (npm package)

React Monocle parses through your React source files to generate a visual tree graph representing your React component hierarchy. The tree is then displayed along with a live copy of your application.

Source: https://github.com/team-gryff/react-monocle