Introducing React Component Hierarchy – BPXL Craft – Medium

  • The particular example uses the -c flag to hide container components and highlight children of containers with an asterisk (*).
  • If your container components merely render their children with JSX, that works too.
  • rch uses Babylon to parse your components, which is the same parser that is used in Babel .
  • Is an sample of the output when using rch against the root App component from the open-source SoundCloud client sound-redux .
  • Components may be defined in any way (ES6 React.

React is a great tool for building UIs. Building a React application involves breaking up your app into pieces called “components.” While…

@ReactiveConf: react-component-hierarchy (rch) is a CLI app that builds a visual component hierarchy tree: …

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.

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 (*).

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

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:

React component hierarchy viewer.

-h, –help output usage information

-V, –version output the version number

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.

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

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’;

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

import { connect } from ‘react-redux’;

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!

Introducing React Component Hierarchy – BPXL Craft – Medium