Introducing Reactron
Built for the total visualization and testing of React applications
Modern Development and the Framework
Today it’s almost impossible to imagine building out a modern web application without a framework. With the ever increasing demand on applications to feature more features, scalability and therefore modularity are critical. Regardless of their recent introduction, frameworks have proven themselves indispensable.
The greatest aim of the front-end framework was to push development. A single person could produce with these new standardized tools incredibly interactive and meaningful content. While an entire team could make something as revolutionary as new platforms for social connection, communication and planning. With frameworks, online technologies could expand with their popularity. Though, leading this technological revolution one name stands out.
The Rise of React
When React was first introduced back in 2013 it was met with some skepticism. It took some getting used to and Facebook had to organize a rallying tour to get developers on board. Their main selling point, “React was designed for innovators.”
Now React is somewhat of an industry standard with over one-third of all new applications utilizing it; only second to jQuery. In many ways they were right, innovators took this incredibly versatile new framework and ran with it, far. Every year we see more developers utilizing the modularity and fluency of React.
Though expansions and iterations such as React Fiber drive part of React’s dominance in development, most of what makes React great are indeed the innovators. Not only do many use it, but the community of developers around React iterate and develop tools to make this revolutionary technology even greater.
This is where we come in.
Reactron: The Program to Make Better Programs
However great React already is, in keeping with the culture, it can be better. One of the ways we saw opportunity in pushing forward React was to develop a tool for greater testing.
Understanding component relationships, the flow of data between state and props, leads to the sometimes confusing and complex task of mapping out an entire application. Being able to analyze and break-down an app is fundamental — a process we felt needed to be streamlined.
Seeing components rendered often has to wait until late in the development process and will rely on hard to achieve instances of state. Reactron solves these issues by providing a way to visualize and test your app in a threefold manner:
1) Through individual component rendering (regardless of state)
2) By providing a macroscopic view of your entire application visualized simultaneously
3) All while displaying a fully composed fiber-tree diagram of your app to understand its complete structure
Utilizing Reactron
Reactron is hosted at Reactron.io — make sure you’re using a Chromium based browser then head your way there; we’ll get started.
You’ll see our splash page with a brief background, a small introduction of the engineers involved, and a button that says ‘Run Reactron.’
Select ‘Run’ to our login page.
Now, if you simply want to see how Reactron works, click the demo. There’s a fun little To-Do app built from React there.
However, to start looking over your applications, login with your GitHub account. Reactron is entirely free and saves past projects so you can continue coming back to view progress. All securely done through GitHub’s user verification so no one sees your content but you.
Once logged in, you can either choose one of your pre-existing projects or start fresh.
Since you’re new around here we’ll choose to spin up a project you’re currently working on.
On the left-hand box, select the stylings file which goes with your app.
Next, select your component files.
Once everything is compiled you’ll see a new prompt — hit next.
Here you can view your project, the structured fiber-tree, and independent components upon selection.
With this you have a comprehensive way of rendering, reviewing, planning and distinguishing different portions of your application.
Reactron is currently in active development and welcomes any contributions to this product or constructive feedback towards improvements. If using Reactron has inspired or improved your designs, please find us on GitHub for ways you can get involved.
Meet the Team
Kerri Crawford | LinkedIn | GitHub
Logan Coale | LinkedIn | GitHub