Skip to content

Latest commit

 

History

History
89 lines (60 loc) · 3.79 KB

README.md

File metadata and controls

89 lines (60 loc) · 3.79 KB
Raw

React Visualizer VS Code Extension

Overview

React Visualizer is a powerful VS Code extension designed to enhance the development experience for React applications. Developed as part of the OSLabs program, this tool provides a comprehensive visual representation of your React component structure, making it easier to understand and navigate React projects. This extension is especially useful for teams transitioning from class-based components to functional components, as well as from JavaScript to TypeScript.

Features

  • Component Tree Visualization: Get a clear, hierarchical view of your React component structure.
  • Component Type Differentiation: Easily distinguish between functional and class components.
  • Language Identification: Quickly identify TypeScript and JavaScript components.
  • Full App Structure: Visualize the entire structure of your React application.
  • State Inspection (Planned Feature): View and track component state in real-time.

Stretch Goals

  • State Updates: Inspect and monitor component state within the tree structure. TODO ANIMATIONS
    -Tip: Many popular extensions utilize animations to showcase their features. Consider adding short, focused animations demonstrating the component tree visualization.

Installation

  1. Open VS Code.
  2. Go to the Extensions view (Ctrl+Shift+X).
  3. Search for "React Visualizer".
  4. Click Install.

Usage

  1. Open a React project in VS Code.
  2. Access the React Visualizer from the VS Code sidebar.
  3. Click on components in the tree to navigate to their source code.

Technologies Used

  • VS Code Extension API
  • React
  • TypeScript/JavaScript TODO
  • [Other technologies or libraries]

Contributing

TODO We welcome contributions! Please see our CONTRIBUTING.md for details on how to get started.

Known Issues

TODO

  1. **
  2. **

Please report any additional issues on our [GitHub repository] https://github.com/oslabs-beta/reactive.

Development Team

Name Role GitHub Email
Colin Rooney Full Stack Developer @github/12mv2 [email protected]
Developer 2 Backend Developer @github_handle [email protected]
Developer 3 Full Stack Developer @github_handle [email protected]

Support

If you encounter any issues or have feature requests, please file an issue on our GitHub repository Reactive, https://github.com/oslabs-beta/reactive.

OSLabs

React Visualizer is a project developed through OSLabs, a nonprofit tech accelerator focused on advancing open-source software and fostering innovation in the tech industry. OSLabs is dedicated to supporting engineers and leaders building high-impact, collaborative open-source tools.

OSLabs' Mission: OSLabs is devoted to furthering open-source innovation by supporting engineering talent in creating developer tools that contribute to the software engineering community and industry as a whole.

For more information about OSLabs:

OSLabs Programs

  • Engineering Fellowship: A paid 6-month program where engineers create and oversee open-source dev tool projects.
  • Beta Program: A 3-month initiative where participants receive mentorship to build their open-source skills.
  • Hackathons: Co-hosted hackathons with open-source-focused organizations.

Acknowledgements

This project was developed as part of the OSLabs program. We'd like to thank OSLabs for their support and resources.

Happy coding with React Visualizer!