ReactJS projects can get significantly complex with many classes of components and multiple component nesting. Over many releases, the codebase will become hard to debug and develop in large teams. Since the responsiveness of developers to solve critical bugs is directly related to their understanding of the codebase the structure of the ReactJS project must be transparent to all developers. Certain open-source tools help developers to visualize ReactJS component relationships and hierarchies without the need for 'Ctrl+Shift+f' and waste time unnecessarily.

In this blog post I am using a sample ReactJS to-do app from Github to showcase visualizations. You can clone that project yourself and try to replicate the below results.

React Developer Tools: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

React Developer Tools is the official tool from Facebook to debug ReactJS applications. In addition to being able to view the rendered React components in the DOM it shows the 'props' and 'state' objects in the side panel. In the demo screenshot above the to-do app is examined using React developer tools and the 'TodoItem' component's state and props can be examined on the side panel. Although it shows how components inside any ReactJS application are nested the overall hierarchy and relationships are inconspicuous. Developers must expand nested components to thoroughly understand the component relationships. For this reason, the React developer tools are more appropriate for smaller projects where the intended use case is to understand component hierarchy and relationships.

React Sight: https://www.reactsight.com/

React Sight is an incredible tool for visualizing ReactJS applications. It is an efficient way to understand component hierarchy and relationships without analyzing the source code. It helps to address production bugs quickly and onboard any new developers onto complex projects. It uses a tree structure to visualize the ReactJS app where the nodes are ReactJS components and/or logical constructs of the ReactJS application. In the demo screenshot above the 'TodoItem' component is easily visible and it also clearly outlines the component hierarchy. The 'state' and 'props' for the 'TodoItem' component can be explored on the side panel. Additionally, the UI allows developers to filter out aspects of the ReactJS app such as DOM, Redux and Router. The tree structure can be spaced horizontally and vertically to allow better presentation. Overall this is a good tool for both beginner and experienced ReactJS developers.

react-component-hierarchy : https://www.npmjs.com/package/react-component-hierarchy

React Component Hierarchy is a simple tool to visualize the component hierarchy. It has a primitive UI made from command line text. It gives a high-level overview of component hierarchy and relationships without showing any 'state' and/or 'props'. In the demo screenshot above it shows the two components under Root.js which are 'TodoItem' and 'Footer'. 'Footer' additionally has 'Link' component.

Abandoned/Buggy Tools

React Scope: http://reactscope.com/

React Scope was a promising tool like React Sight that could have provided its unique approach to ReactJS app visualization. From the looks of it, the project is now abandoned as the Chrome web store plugin can no longer be found. Developers can try to manually install it in Chrome and experiment with their ReactJS app.

React Monocle: https://github.com/team-gryff/react-monocle