React Component Tree

Your entire React project — At your fingertips.

Report Bug · Request Feature

---

This project is forked from Sapling, which is no longer under active development. We've introduced a number of core performance improvements, and will continue to add new and exciting features.

---

---

React Component Tree is a VS Code extension for React developers. As your application scales, its file structure tends to become less and less intuitive. Depending on your project architecture, your components might be organized in a completely different configuration to the component hierarchy of your React application.

Wouldn't it be nice to have instant access to a visual representation of the dependency relationships between the components in your application? How about being able to quickly reference your available props and routes with indication of conditional rendering?

With React Component Tree, you don't have to guess at the parent component of your current file anymore. React Component Tree is an interactive hierarchical dependency tree that lives directly within your VS Code IDE. Simply select a component file as the project root, and React Component Tree will build a full component tree and retrieve information about available props at any level. It also provides visual indication of Javascript syntax or import errors in your files, and shows you which components are connected to your Redux store.

Any updates you make to your files will be automatically processed and mirrored in the sidebar view. You can also navigate React Component Tree using your keyboard, putting your entire project right at your fingertips.

Table of Contents

1. Installation
2. Getting Started
3. Usage
4. Contributing
5. Creators
6. Acknowledgements
7. License

Installation

1. If needed, install Visual Studio Code for Windows (7+), macOS (Sierra+), or Linux (details).

2. Install the React Component Tree extension for Visual Studio Code from the Extension Marketplace. Search for 'React Component Tree' in the VS Code extensions tab, or click here.

3. Once complete, you'll see React Component Tree appear in your sidebar. You can now begin using React Component Tree! Check out the Getting Started below for information on how to get started.

• To install React Component Tree for development, please see the contributing section below.

Getting Started

• After installing, click the React Component Tree tree icon in your extension sidebar.

• From there, you can click Choose a file to select your root component.

• You can also build your tree from the currently active file in your editor with the Build Tree button at the right hand side of the status bar.

• Click the 〉 and ⌄ buttons to expand and collapse individual nodes.

• Clicking on a node will open the component file in your editor window.

• Use the search bar at the top to filter visible nodes by component name.

• Hover over the information icon to get a list of props available to that component.

• Components with a Redux store connection will be marked with this icon.

• Components with path or parser errors will be highlighted with the error color of your workspace theme.

• If you prefer not to view React Router or other third-party components imported into your app, you can disable these in the VS Code Extension Settings.

  • rct.view.reactRouter: show/hide React Router component nodes
  • rct.view.thirdParty: show/hide third party component nodes

Usage

• React Component Tree can currently display React apps made with JSX/TSX and ES6 import syntax.

• React Component Tree will detect React components invoked using JSX tag syntax and React-Router component syntax, where React is imported in a file:

      // Navbar will be detected as a child of the current file
      <Navbar />
  
      // As above
      <Navbar></Navbar>
  
      // Route and Navbar will be detected as child components of the current file
      <Route component={Navbar} />
  
      // Route and App will be detected as child components of the current file
      <Route children={App} />

• React Component Tree will detect the names of inline props for JSX components it identifies:

      // props 'userId' and 'userName' will be listed for Navbar in **`React Component Tree`**
      <Navbar userId={...} userName={...} />

• React Component Tree can identify components connected to the Redux store, when 'connect' is imported from 'react-redux', and the component is the export default of the file:

      // App.jsx
      import React from 'react';
      import { connect } from 'react-redux';
  
      const mapStateToProps = ...
      const mapDispatchToProps = ...
  
      const App = (props) => {
        return <h1>This is the App</h1>
      }
  
      // **`React Component Tree`** will detect App as connected to the Redux store
      export default connect(mapStateToProps, mapDispatchToProps)(App);

• React Component Tree prioritizes file dependencies over component dependencies. In the following example, React Component Tree will display Home and Navbar as siblings:

      // App.jsx
      import React from 'react';
      import Home from './Home';
      import Navbar from './Navbar';
  
      class App extends Component {
  
        render (
          return {
            <Home>
              <Navbar />
            </Home>
          })
      }

  

Contributing

1. Fork the project repo.
2. Open the react-component-tree/extension folder in your VS Code IDE.
3. Open extension/src/extension.ts
4. With the extension folder as your pwd, run this command: npm run watch.
5. From the menu, click Run - Start Debugging (or press F5), and select VS Code Extension Development from the command palette dropdown. An extension development host will open in a new window.
6. Click the React Component Tree icon on the extension development host window sidebar. To refresh the extension development host, use Ctrl+R (or Cmd+R on Mac).

Creators

• Habeeb
• Arul Valan
• Jongsun Suh
• Charles Gutwirth
• Jordan Hisel
• Lindsay Baird
• Paul Coster

Acknowledgements

• Forked from Sapling
• Parsing strategy inspired by React Component Hierarchy
• Icons from Font Awesome
• Tooltips with Tippy
• Readme badges from shields.io

License

Distributed under the MIT License. See LICENSE for more information.