Need help with react-proto?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

React-Proto
3.2K Stars 210 Forks MIT License 221 Commits 10 Opened issues

Description

:art: React application prototyping tool for developers and designers :building_construction:

Services available

!
?

Need anything else?

Contributors list

# 29,554
CSS
HTML
redux-t...
Redux
54 commits
# 34,993
CSS
HTML
redux-t...
Redux
41 commits
# 48,193
CSS
HTML
redux-t...
Redux
24 commits
# 16,764
React
Electro...
Redux
prototy...
3 commits
# 213,601
CSS
HTML
redux-t...
Redux
1 commit
# 210,189
HTML
redux-t...
Redux
prototy...
1 commit
# 213,233
CSS
HTML
redux-t...
Redux
1 commit
# 4,006
css-fra...
xmlhttp...
executa...
node-mo...
1 commit

React-Proto Build Status License: MIT

React-Proto is a React application prototyping tool for developers and designers.

React-Proto allows the user to visualize/setup their application architecture upfront and eject this architecture as application files either into a previous project or a new create-react-app project or a starter template from any repository.

Download for MacOS, Windows, Linux. * Mac users only: for now you might need to go to your security settings to allow the app run on your system as we do not have an Apple license yet.

If you find any issues, file issue

How To Use

  • Application can be run from cli using

    react-proto
    command or by clicking on the application icon.
  • To start a new project, either import a mockup or start with a blank stage.

  • Add components you would like to create using the input, then drag the component frame into place and resize accordingly.

  • While building, you can use the icons in the toolbar to zoom, toggle draggability of the stage, update or remove an image, collapse the left container, and export your files.

  • For each component you have the ability to define whether your component will have state, the color of the frame component, and the ability to apply a parent component.

  • If you place a container around other components and can no longer access them, you can use the layer buttons in the corresponding dropdown menu to change layer order down or up.

  • In the right container, the props tab allows you to define props in key value pairs, as well as the necessary prop type.

  • Once you are finished, you can use the export button in the toolbar to choose from three options of how to export your files:

    1. Import your files into an existing project. Just choose the path where you would like to create your components folder.
    2. Use create-react-app to start a new project (the project will be under the "proto_app").
    3. Clone your favorite Github repo to start a project with your favorite starter files.

  • Lastly, start building!

Authors

Blessing E Ebowe @refinedblessing

Brian Taylor @brianwtaylor

Erik Guntner @erikguntner

Running Your Own Version

  • Fork and Clone Repository.

  • Open project directory

cd react-proto
  • Install dependencies
yarn install
  • Run application
yarn start
  • For development experience...
yarn dev
  • and on another terminal
yarn electron

Linting

yarn linter

Testing

yarn test

Built With

  • React - Framework for building user interaces.
  • Redux - Predictable state container for JavaScript apps.
  • Electron - Cross-platform desktop apps with HTML, CSS and JS.
  • KonvaJS - HTML5 2d canvas library for desktop and mobile applications.
  • React-Sortable-Tree - Drag-and-drop sortable component for nested data and hierarchies.

Acknowledgments

Logo Design

Clariz Mariano @havengoer

Joe Thel @fakemonster

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.