Reactive 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.
Oftentimes as applications scale, it becomes increasingly challenging to keep track of the structure of an app. As a result, this extends the amount of time it takes for new developers to understand the application landscape and makes it impractical to keep track of code migration progress.
Reactive aims to solve this problem by generating a visual representation of your app's component landscape within VS Code. This extension enables greater visibility into the architecture of the React app and is especially valuable for teams transitioning from class-based components to functional components, as well as from JavaScript to TypeScript.
- Component Tree Visualization: Procure 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: Identify state variables across components.
- Open VS Code.
- Go to the Extensions view (
Ctrl+Shift+X). - Search for "Reactive".
- Click Install.
- Open a React project in VS Code.
- Access the Reactive from the VS Code sidebar.
- Click on components in the tree to collapse.
- Click on State within component node to open State details
- VS Code Extension API
- React
- TypeScript/JavaScript TODO
- [Other technologies or libraries]
TODO We welcome contributions! Please see our CONTRIBUTING.md for details on how to get started.
- State Updates: Inspect and monitor component state within the tree structure.
- TODO: add items to be cleaned up
TODO
- **
- **
Please report any additional issues on our [GitHub repository] https://github.com/oslabs-beta/reactive.
| Name | Role | GitHub | |
|---|---|---|---|
| Colin Rooney | Full Stack Developer | @github/12mv2 | [email protected] |
| Micah Zeigler | Full Stack Developer | @github/MZiegler96 | [email protected] |
| Susana Lam | Full Stack Developer | @github/susanalam | [email protected] |
If you encounter any issues or have feature requests, please file an issue on our GitHub repository Reactive, https://github.com/oslabs-beta/reactive.
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:
- Visit: OSLabs Website
- Email: [email protected]
- Phone: (601) 207-4517
- 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.
This project was developed as part of the OSLabs program. We'd like to thank OSLabs for their support and resources.
Happy coding with Reactive!
