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
Copy file name to clipboardExpand all lines: README.md
+11-7Lines changed: 11 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,18 +1,22 @@
1
1
# ReacType
2
2
3
-
**ReacType** is a prototyping tool for developers employing **React** component architecture while utilizing the comprehensive type checking of **TypeScript**.
4
3
5
-
**ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _canvas display_, an _application tree_, and a _component code preview_. The user can create components and load _instances_ of these components, as well as nested HTML elements, onto the canvas. These visual representations quickly reveal parent-child relationships between components and the embedded instances, with component views that can be toggled between and draggable representations that resized on the canvas itself. This architecture can then be _exported_ as TypeScript application files to be used as a starter template for any repository.
**ReacType** is a visual prototyping tool for developers employing **React** component architecture alongside the comprehensive type checking of **TypeScript**.
8
+
9
+
**ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _canvas display_, an _application tree_, and a _component code preview_. The user can create components and load _instances_ of these components, as well as nested HTML elements, onto the canvas. This architecture can then be _exported_ as TypeScript application files to be used as a starter template for any repository.
10
+
11
+
Download for [MacOS](), [Windows](), [Linux]().
8
12
9
13
### How to use
10
14
11
15
- Open the application to start a new project. It will open in the root App component, with its name listed in the left panel and the component represented by the white box on the canvas.
12
-
- To add a new component, type its name in the upper right panel, in the field '**Add class component**', and press the plus button.
16
+
- To add a new component, type its name in the upper left panel, in the field '**Add class component**', and press enter.
13
17
- To render a component **_instance_** to the screen, first select the component, or _parent_, that the instance will be rendered within. This selected component will be represented in a new canvas view, with its own white box. Then press the plus button next to the component name. An instance, or _child_, representation will appear on the canvas.
14
18
- To add draggable HTML elements, select the image icons on the lower left panel.
15
-
- The bottom panel allows the user to toggle between 4 different views: a tree diagram of the application, a preview of the code, a form to enter component props, and a form to add HTML attributes.
19
+
- The bottom panel allows the user to toggle between 4 different views: a tree diagram of the application, a preview of the exportable code, a form to enter component props, and a form to add HTML attributes.
16
20
-**_Props_** can be added to each component within its tab on bottom panel. Enter in a _key-value pair_, select its data _type_ and press the bottom 'ADD PROP'.
17
21
-**_HTML Element Attributes_** of class name and ID can be added to each HTML element after an HTML element has been rendered to the canvas.
18
22
- To **_delete_** a _child_ or instance from the canvas, select the desired instance and either press the _delete_ key or click the 'DELETE CHILD' button.
@@ -22,7 +26,7 @@ Download for [MacOS](), [Windows](), [Linux]().
22
26
### To Export Files
23
27
24
28
- Once finished setting up the application template, press the green 'EXPORT PROJECT' button at the bottom of the left panel and choose between two options to export your files:
25
-
1. Export the component files into a src folder. This option will allow a developer to add these files to an existing project.
29
+
1. Export the component files into a components folder. This option will allow a developer to add these files to an existing project.
26
30
1. Export a new project with TypeScript config files and the component files. This option will allow a developer to immediately begin a new project.
27
31
28
32
#### Authors
@@ -67,4 +71,4 @@ yarn run electron
67
71
68
72
## License
69
73
70
-
This project is licensed under the MIT License - see the [LICENSE.md]() file for details.
74
+
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/team-reactype/ReacType/blob/development/LICENSE.md) file for details.
0 commit comments