React Proto

React application design and prototyping tool

8 followers

React application design and prototyping tool

8 followers

Visit website

Wireframing

•

Interface design tools

•

Design mockups

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.

Launch tags:Design Tools•Productivity•User Experience

Launch Team

Framer — Launch websites with enterprise needs at startup speeds.

Launch websites with enterprise needs at startup speeds.

Promoted

Product Hunt

Hey @briantaylor & @erikguntner, Can you tell us more about what you've built here? What aspect are you most proud of?

Report

7yr ago

React Proto

Maker

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.

Report

7yr ago

brom

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?

Report

7yr ago

Who Made What

Great idea! Any chance you guys can show a sample of what the generated components source code looks like?

Report

7yr ago

React Proto

Maker

@edtoh The second image is a template of what the generated component looks like

Report

7yr ago

Who Made What

@refinedblessing Ah! Was looking on the site and didn't see it. Thanks!

Report

7yr ago

Basedash

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.

Report

7yr ago

React Proto

Maker

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.

Report

7yr ago

Jam Hunt

Hey guys congrats, love the idea and execution. Are you planning to extend the tool to React Native applications?

Report

7yr ago

React Proto

Maker

@guillaume_torche Thanks. We haven't planned it yet but looks like something the team will be willing to consider

Report

7yr ago

Really eases the start of the development process

Pros:

Amazing!!!!!!!

Cons:

none

Report

7yr ago

Looks really cool but I do think you guys should provide a general tutorial on how to use the app.

Report

7yr ago

React Proto

Maker

@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...

Report

7yr ago

@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.

Report

7yr ago

@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.

Report

7yr ago

1 2