ReactProto, Rapid Prototyping In React
Written by Nikos Vaggalis   
Wednesday, 10 October 2018

ReactProto is a rapid application prototyping tool that bridges the gap between developers and designers. Designers hand over their static mockups which developers feed into ReactProto to generate the corresponding boilerplate React components.

It's that aspect of Visual Design that can speed up development through generating code, especially efficient when having to tackle hierarchies of nested components. In contrast to coding them by hand, when using ReactProto the code generator consumes static mockups and emits React components.

It's use is simple and can be summarized as:

Import the mockup and used it as a base on which to visually create the various components (containers, buttons,  etc) together with their hierarchy, ending up with a visual representation of your application. After that, you just export the code.

A more detailed workflow can be found in a post by Blessing Ebowe's, one of the core ReactProto devs:

  1. Insert your mockup into the app/use the blank canvas

  2. Identify the Highest level component

  3. Create a component for it using the Add component input

  4. Outline that component with the colorful box that appeared after 3

  5. If component is going to have state, switch it to being stateful

  6. Create sub-components, check 5

  7. Assign parents to them by selecting a parent

  8. Use the props tab to add props to child components that will need props

  9. Click on the generate files button, choose between just exporting the files or cloning a starter repo that you want the files to go into

And, as a picture is worth a thousand words, here are two which demonstrate the before and after phases:

Before

After

 

More Information

ReactProto
 

Related Articles

React 16 Adds Fragments

The Programmers Guide To React 

Facebook's Relay For React Open Sourced

 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on, Twitter, FacebookGoogle+ or Linkedin.

 

Banner


Visual Studio Team Services Revamped For Azure
18/09/2018

Microsoft's application lifecycle management system, Visual Studio Team Services (VSTS) is being split up into five separate services for Azure. The tools will now be collectively known as Azure DevOp [ ... ]



Xamarin Forms 3.2 Reduces Friction
21/09/2018

Xamarin has released an updated version of Xamarin.Forms. The developers say that their work on Version 3.2 has been about reducing the friction of working in it. 


More News

 

Python

 



 

Comments




or email your comment to: comments@i-programmer.info

Last Updated ( Wednesday, 10 October 2018 )