Introducing React Component Hierarchy

React is a great tool for building UIs. Building a React application involves breaking up your app into pieces called “components.” While this helps keep your code manageable and scalable, as an app grows it can become difficult to get a sense of your overall component hierarchy and how components relate to each other. React-component-hierarchy aims to make this easier.

React-component-hierarchy (rch) is a CLI app that builds a visual component hierarchy tree so you can quickly see how React components are structured in your project.

Example Output

Here is an sample of the output when using rch against the root App component from the open-source SoundCloud client sound-redux. This particular example uses the -c flag to hide container components and highlight children of containers with an asterisk (*).

Usage

rch was created with the intent of being installed globally to make it easy to use anywhere on your system. You can do this with

$ npm install -g react-component-hierarchy

Once it is installed, you can run it by passing in the path to the source of the root component to begin with, and rch will look for and map all of your root component’s child components:

$ rch
  Usage: rch [opts] <path/to/src/of/rootComponent>
  React component hierarchy viewer.
  Options:
    -h, --help             output usage information
    -V, --version          output the version number
    -c, --hide-containers  Hide redux container components

How It Works

rch uses Babylon to parse your components, which is the same parser that is used in Babel. It first looks for ES6 import statements to build a list of possible tokens, then searches for those tokens within JSX expressions in your code. When it finds a match, rch adds it to a list of child components and recursively descends through that component’s children to perform the same logic. Once rch finishes building the tree, it formats it with a forked version of pretty-tree with the same visual style as npm v3’s dependency graph. The pretty-tree fork adds support for a “depth” property, so the coloring is based on the depth of the child in the tree. Feel free to look over the rch source to see the code.

Requirements

Currently rch is v1 and has the following requirements to understand your code:

• Must have one default export per component source file
• Components may be defined in any way (ES6 React.Component class, functional stateless, or react.createClass)
• Must use raw non transpiled JS
• Must use JSX
• Must use ES6 import/export

Additionally, if you are using React Redux, your component must be wrapped and exported with React Redux’s connect function. For example:

import { connect } from 'react-redux';
const SomeComponent = ({ title }) =>
  <div>{title}</div>;
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SomeComponentContainer)

Or you can use a separate file for your container component that is formatted approximately like this:

import { connect } from 'react-redux';
import SomeComponent from '../components/SomeComponent';
const SomeComponentContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(SomeComponent);
export default SomeComponentContainer;

If your container components merely render their children with JSX, that works too.

We’ve benefitted from using rch for our projects and look forward to hearing how it’s helped you. Try rch today and let us know what you think!

For more insights on design and development, subscribe to BPXL Craft and follow Black Pixel on Twitter.