linecode/reactron

Reactron is a React component visualizer that allows you to traverse an app's fiber tree and render components individually.

Reactron

Empowering the Development Process from Top to Bottom

A tool for the complete and total visualization of your React application

Reactron bolsters development by rendering three essentials parts of any project: the latest version of your application including functionality, a React Component Tree for a macroscopic view of your project, and single component rendering for a microscopic understanding.

Reactron is currently in active development so we welcome any constructive feedback or contributions to this product. Please follow this repo for contribution guidelines and our development road map.

Current Features

• Rendering and functionality of your total React application
• Comprehensive visualization of your React Component Tree
• Selection and rendering of specific React components
• Storage for users with multiple projects

In Progress

• Updating state view web-application interface
• Selecting specific nodes to render specific components
• Exporting updates to your VS Code
• A VS Code extension for even greater developer experience

How to Use

[Visit Us at Reactron.io]

In order to utilize Reactron, you will first need to sign in with your GitHub account

Otherwise view a demo of our application by pressing 'Demo!'

After logging in:

1. Upload your application when prompted: first your Styling File, then your Component Folder
2. Afterwards, you should see a 'Next' button pop-up which will lead to your application
3. Your screen will now feature all three visualizations of the project you uploaded
4. Select individual components you wish to see rendered and broken down into it's different parts
5. Repeat this process for any number of your components you wish to view
6. Once you're finished, logout
7. The next time you log in you will be able to pick back up where you left off

Built With

• React - Framework
• React-Tree-Graph - Rendering of component-tree
• TypeScript - For the codebase
• Node.js - File system, testing, core extension functionality
• Puppeteer - Headless browser for react-component collection
• Jest - Testing
• Love ❤️

Contributing

Reactron is currently in active development and welcomes any contributions to this product or constructive feedback towards improvements. If while using Reactron to improve your designs inspired your towards updates, please feel free to fork this repo and submit pull requests!

Team

Jimmy Lin | Kerri Crawford | Logan Coale | Nathaniel Armstrong | Romelo Gilbert

License

MIT - check out license page for more details