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.

Discussion
Would you recommend this product?
13 Reviews5.0/5
Looks really cool but I do think you guys should provide a general tutorial on how to use the app.
Upvote (8)Share
@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. https://github.com/React-Proto/r...
Upvote (4)Share
@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.
@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.
Hey @briantaylor & @erikguntner, Can you tell us more about what you've built here? What aspect are you most proud of?
Upvote (6)Share
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.
Upvote (4)Share

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.

Pros:

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

Cons:

When can I make two projects at once?

Upvote (5)Share
Great idea! Any chance you guys can show a sample of what the generated components source code looks like?
Upvote (1)Share
@edtoh The second image is a template of what the generated component looks like
Upvote (2)Share
@refinedblessing Ah! Was looking on the site and didn't see it. Thanks!
Upvote (2)Share
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.
Upvote (1)Share
Hi @tomjohndesign, sorry for the late reply. I actually wrote a post about the concept and ideology behind React Proto here => https://medium.com/@refinedbless..., 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.
Upvote (1)Share