https://github.com/oslabs-beta/reactrix

Analytical prototyping tool for React
https://github.com/oslabs-beta/reactrix

developer-tools performance-testing react typescript

Last synced: about 1 year ago
JSON representation

Analytical prototyping tool for React

• Host: GitHub
• URL: https://github.com/oslabs-beta/reactrix
• Owner: oslabs-beta
• License: mit
• Created: 2021-12-28T01:06:54.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-03-03T20:11:34.000Z (over 4 years ago)
• Last Synced: 2025-04-30T19:08:35.558Z (about 1 year ago)
• Topics: developer-tools, performance-testing, react, typescript
• Language: TypeScript
• Homepage: https://www.reactrix.app
• Size: 5.03 MB
• Stars: 59
• Watchers: 4
• Forks: 15
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Reactrix

![0_f8MwyXeJyta2ZzMn](https://user-images.githubusercontent.com/93226840/150414276-df31169d-d6cc-43b7-8b3d-a09ff868c454.png)

Reactrix is an analytical prototyping tool for developers to not only rapidly produce React component trees, but to also determine what structures may lead to the most optimal performance.

Reactrix brings together the commodity of prototyping with a drag and drop feature, allowing users to build out their component trees, and the ability to quickly assess the performance of their applications.

### Main Features:

* **Drag & Drop 🤏**


Visualize your component hierarchy by dragging and dropping components into the component tree. View and rearrange parent/sibling/children relationships.

* **Component Library 📕**


Create and save reusable components and store them across sessions.

* **Preview / Demo 🪄**


Render your component tree as a preview with full interactions based on details.

* **Profiling 🔎**


Profile the initial render performance of your current component tree.

* **Performance Metrics 📊**


View the performance data of your parent and children components displayed as a bar graph.

* **Snapshots 📷**


Save and compare performance metrics of your previously saved snapshots.

![](https://github.com/oslabs-beta/Reactrix/blob/main/demo.gif)

### Getting Started!

1. Simply **clone** the repo to your local machine 

        git clone https://github.com/oslabs-beta/Reactrix.git

2. **Npm install** the needed packages

        npm install

3. **Run** the application with command **node dev.js**

        node dev.js

4. Continue as guest to demo the app. For future collaborators, create a .env file and access the secrets stored in GitHub ([reference documentation](https://docs.github.com/en/actions/security-guides/encrypted-secrets#using-encrypted-secrets-in-a-workflow))





### Contributors:

Kevin Chung [@kevhjc](https://github.com/kevhjc)

Jay Heo [@heojay0309](https://github.com/heojay0309)

Tychicus Lee [@tychicuslee](https://github.com/tychicuslee)

Jonathan Tam [@jktam336](https://github.com/jktam336)