Introducing React Velocity

Changing How You Start Up Your React and Redux Applications

Whenever you start a new React app do you ever get that creeping feeling that you’ve done this all before? As if you’re writing the same bit of code over and over and over and …huh deja vu?

Er, anyway. Ever wish you could visualize you’re entire Redux project in a customizable way that is simple to read? Well keep reading, because I have the app for you.

We don’t think it is too terrible of a stretch to say that hashing out the skeleton of a React/Redux application isn’t the most enjoyable thing in the world. Our group of developers certainly didn’t think so and devised a solution to expedite the process. Our app, React Velocity, utilizes a GUI to manipulate user generated components on a visualized hierarchical tree in order to mirror the skeleton of a React/Redux project. Once the tree is properly populated, with the simple click of a button, a project directory with all the appropriate files is generated.

How It Works

React Generation:

Beneath a pre-generated ‘App’ component, a user can add a new child component, afterward it is simple to drag and drop the component into the correct position. In addition, the user can dictate whether the component is stateful or stateless with the a simple toggle. Once all components are correctly nested, hitting the download button will generate the appropriate boilerplate code with all the proper connections between files, before returning them all to the user in a zipped project directory.

Redux Generation:

Redux is much the same, except rather then just an ‘App’ component, there is also now an ‘Action’,’Reducer’ and ‘Container/Component’ component. Simply select the type of file you wish to generate from the dropdown and enter the name of your file into the correct textfield(s). Once that is complete, simply drag the newly generated component beneath its corresponding component and smack that download button. You’ll have your new Redux project up and running in no time.

Technical Challenges

Of course, like anything coding related, technical challenges do come up, usually involving an inordinate amount of frustration and the occasional tear. Two that stood out as being particularly demanding were formatting the data correctly before download and also ensuring a number of asynchronous methods completed in a certain order.

Handling Asynchronous events

Admittedly (shhhh don’t tell anyone), just figuring out that there was a conflict with two asynchronous methods and then figuring out how to get them to complete in the correct order took more time then we’d care to admit. So setState is asynchronous by nature, of which both conflict methods used. One method added new data to our hierarchical tree data and another took that data from that tree to generate code. Because the method that generated code fired before the method that added new data, our code was always slightly incorrect. Simple solution, add setTimeout to the method that generates code and problem solved.

Wait we lied, problem not solved. Apparently a setTimeout will break the binding of a method placed inside it. To circumvent this you must place a variable referencing this outside the setTimeout and bind the method that way. Yeah, it was a fun use of four hours of our lives to figure that out.

Reformatting Data from React Sortable Tree in order to zip files in place for exporting

React Sortable Tree, by default, is an array of deeply nested objects. Great for setting up the visualization, not so great for drawing data from for code generation. In order to simplify this process, it became necessary to flatten the tree data to a single level, while also retaining all the pertinent information to generate code. Easy. Right?

Benefit to Developers

Time is precious, so any bit we can save is valuable. By using our application, it is possible for a developer to visualize their React/Redux project in an easy to read way, while also making boilerplate generation (mostly) painless.

Putting it to the Test

Interested? Well just head to reactvelocity.com and give our project a spin. Use it for your next React/Redux application. We’re always eager to hear any feedback, so just give us a holler at apjs.react.velocity@gmail.com and if you care to show us some love we certainly won’t refuse a few more stars on Github at https://github.com/apjs/ReactVelocity . Happy hacking friends!