A VS Code Extension that generates a hierarchical tree of React components
and identifies the component type with a single file upload.
React Server Components operate exclusively on the server, enabling tasks such as executing database queries within the component itself, rather than relying on backend requests. This paradigm distinguishes them from traditional React components, known as Client Components. However, identifying which Client Components could be optimized as Server Components isn't always straightforward, potentially leading to inefficient bundle sizes and longer time to interactive (TTI) for clients.
To address this challenge, we aim to develop a visualization tool to help developers determine their application's component types. By enhancing component-type visibility and aiding in the transition to server components, our tool empowers developers to optimize their applications effectively.
React Labyrinth extension can be installed via the VS Code Marketplace. Start by clicking the Extensions icon in the Activity Bar on the side of VS Code or by using the View: Extensions command (Ctrl/Cmd+Shift+X). Search for 'react labyrinth' and click the "install" button. Upon completion, VS Code will have installed the extension and React Labyrinth is ready for use.
Once React Labyrinth is installed in your VS Code, you'll notice its logo added to the Activity Bar on the left-hand side. Simply click on the React Labyrinth logo to launch the extension.
Upon activation, a sidebar will appear, featuring a 'View Tree' button. Clicking this button will prompt the file explorer to open, allowing you to select the root file of your React App to load the tree structure.
Client Components will be distinguished by an orange background, while Server Components will feature a blue background for easy identification.
Check out our Medium articles: Part 1 and Part 2 for more information about React Labyrinth!
Contributions are the cornerstone of the open-source community, fostering an environment of learning, inspiration, and innovation. Your contributions are invaluable and greatly appreciated.
For more details and to begin exploring React Labyrinth, visit its LinkedIn page. These resources offer comprehensive insights into the project, its functionality, key features, and how to get started.
Furthermore, you can access the project's source code, documentation, and issue tracker on GitHub. Feel free to fork the project, implement changes, and submit pull requests to enhance its development.
If you find React Labyrinth beneficial, consider starring it on GitHub to boost its visibility and attract more contributors and users. Your support is crucial in advancing the project's growth and impact.
- Ashley Luu — Github & LinkedIn
- Christina Raether — Github & LinkedIn
- Francisco Lopez — Github & LinkedIn
- Johnny Arroyo — Github & LinkedIn
- Louis Kuczykowski — Github & LinkedIn
React Labyrinth is developed under the MIT license