ReactJS Component Hierarchy Visualization
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.
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
React Monocle was a promising tool to visualize the ReactJS component hierarchy. Among all the tools presented in this blog post, it has the best UI design. But it has also been abandoned by its developers and there are a lot of bugs when using with latest ReactJS release. Maybe it could be forked by other developers to brush up the features.
React tide: http://reactide.io/
React tide was a ReactJS focused IDE which helped not only in editing the code but also pre-rendering components, component inspection, and component hierarchy visualization. The current code for this tool is buggy and not maintained.
RomeJS was a similar tool to React tide but with a focus only on code editing and component hierarchy visualization. Sadly its repo is also no longer maintained. You can check out this post to find out how RomeJS was intended to work.