React Proto

React application design and prototyping tool

#2 Product of the DayAugust 31, 2018

React Proto aims to give developers and designers the tools necessary for creating clean, organized, and intentional code from the beginning of the development process. Defining your components, their hierarchy, and how they interact via state and props, can alleviate the need for refactoring, and unnecessary code as your application scales.

  • Ryan Trontz
    Ryan TrontzRubber ducky, you're the one!

    Beautiful pairing with create-react-app. I can't believe how quickly I'm up and running in dev mode with my component structure.


    When can I make two projects at once?

    This is the perfect middle ground between a whiteboard with a bunch of rectangles and making a full blown design in figma or sketch, all with output directly to a fully populated file structure in a working directory. Love it.

    Ryan Trontz has used this product for one month.
  • Pros: 

    Easy to use




    Vivian has used this product for one day.
You need to become a Contributor to join the discussion.
Sam Ayres
Sam Ayres@sam_ayres
Looks really cool but I do think you guys should provide a general tutorial on how to use the app.
Erik Guntner
Erik GuntnerMaker@erikguntner · Software Engineer
@sam_ayres Thanks for the suggestion! We will look into making a more thorough tutorial right now. In the mean time, you can visit our Github page where we have a "How to use" section you might find helpful.
Sam Ayres
Sam Ayres@sam_ayres
@erikguntner Thanks for the reply, that is definitely helpful! I missed it because I visited the homepage over the github repo. It might be worth incorporating that small tutorial (for now) on the main app page too.
OhMeowMeow@kitr · Sr. Interactive + UX Designer
@sam_ayres @erikguntner Can you make a video tutorial too? It would be nice what this is capable of before I invest my time on it.
Jacqueline von Tesmar
Jacqueline von Tesmar@jacqvon · Community at Product Hunt ⚡️
Hey @briantaylor & @erikguntner, Can you tell us more about what you've built here? What aspect are you most proud of?
Brian Taylor
Brian TaylorMaker@briantaylor · Software Engineer
Hey @jacqvon thanks for the comment. React Proto was built and designed with both developers and designers in mind. We wanted to build a tool that allowed developers to streamline the initial process of mocking up and developing client side applications with React. At it's core, React Proto was built using React, Electron along with a number of other libraries. With that said, our team is very proud of the implementation of KonvaJS within the application as well as the ability to generate component source code as shown in the second image above.
Edwin Toh
Edwin Toh@edtoh · Founder, Garage Interactive
Great idea! Any chance you guys can show a sample of what the generated components source code looks like?
Blessing Ebowe
Blessing EboweMaker@refinedblessing · Software Engineer
@edtoh The second image is a template of what the generated component looks like
Edwin Toh
Edwin Toh@edtoh · Founder, Garage Interactive
@refinedblessing Ah! Was looking on the site and didn't see it. Thanks!
Tom Johnson
Tom Johnson@tomjohndesign · I make colored rectangles.
So this is meant to help with getting devs started implementing from a static mockup? I'm wondering if these components could be auto-generated from Figma using their API. Seems like lost information to start from an image, but at least it's a starting point. Interested in hearing how this would be used from a dev perspective.
Blessing Ebowe
Blessing EboweMaker@refinedblessing · Software Engineer
Hi @tomjohndesign, sorry for the late reply. I actually wrote a post about the concept and ideology behind React Proto here =>, it might not answer all of your questions but it is a good start point. If you have any clarifications after that, we can then talk about it here.
Guillaume Torche
Guillaume Torche@guillaume_torche · Co-Founder @ Ember Fund. A crypto index.
Hey guys congrats, love the idea and execution. Are you planning to extend the tool to React Native applications?
Blessing Ebowe
Blessing EboweMaker@refinedblessing · Software Engineer
@guillaume_torche Thanks. We haven't planned it yet but looks like something the team will be willing to consider