You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[React-Proto](https://react-proto.github.io/react-proto/) is a React application prototyping tool.
4
6
5
7
React-Proto allows developers to visualize/setup your application architecture upfront and recreate this architecture as application files either into a previous project or a new create-react-app project or a starter template from any repository.
6
8
7
9
React-Proto works on macOS, & Windows
8
-
If you find any issues, [file issue](https://github.com/CS-Eevee/react-proto/issues)
10
+
If you find any issues, [file issue](https://github.com/React-Proto/react-proto/issues)
9
11
10
12
## How To Use
11
13
12
-
- To start a new project, either import an image file for the application you want to build or start with a blank stage.
14
+
- To start a new project, either import a mockup or start with a blank stage.
13
15
14
-
-Using the input at the top of the left column, input the name of the component you would like to create, then drag it into place and resize accordingly.
16
+
-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 zomm in and zoom out, toggle the draggability of the stage, update or remove the image, collapse the left container, and eventually export your files.
20
+
- 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.
19
21
20
-
- For each component you have a series of options: You can define whether your component will have state, the color of the component on the screen, and the ability to apply a parent component.
22
+
- 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.
21
23
22
-
- 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 decrease the z-index. Alternatively, you can increase the z-index of the desired components.
24
+
- 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.
23
25
24
-
- After you have successfully structured your components, you can use the dropdown menu to apply parent components and visualize the hierarchy of your application structure.
@@ -86,4 +86,4 @@ Run ```npm test``` or ```yarn test``` to run test suite.
86
86
87
87
## License
88
88
89
-
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/CS-Eevee/react-proto/blob/master/LICENSE.md) file for details.
89
+
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/React-Proto/react-proto/blob/master/LICENSE.md) file for details.
0 commit comments