|
1 | 1 | # ReacType
|
2 | 2 |
|
3 |
| - |
4 | 3 | [](https://github.com/team-reactype/ReacType/pulls)
|
5 | 4 | 
|
6 | 5 |
|
7 | 6 | **ReacType** is a visual prototyping tool for developers employing **React** component architecture alongside the comprehensive type checking of **TypeScript**.
|
8 | 7 |
|
9 | 8 | **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 | 9 |
|
11 |
| - Download for [MacOS](), [Windows](), [Linux](). |
| 10 | +Download for [MacOS](), [Windows](), [Linux](). |
| 11 | + |
| 12 | + |
12 | 13 |
|
13 | 14 | ### How to use
|
14 | 15 |
|
|
19 | 20 | - 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.
|
20 | 21 | - **_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'.
|
21 | 22 | - **_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.
|
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. |
| 23 | +- To **_delete_** a _child_ or instance from the canvas, select the desired instance and either press the _delete_ key. |
23 | 24 | - To **_delete_** a _component_, click the 'DELETE' button of the desired component in the left panel.
|
24 | 25 | - To _start over_, select the blue 'CLEAR WORKSPACE' button in the left panel. This will **clear the entire application**.
|
25 | 26 |
|
| 27 | + |
| 28 | + |
26 | 29 | ### To Export Files
|
27 | 30 |
|
28 | 31 | - 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:
|
|
0 commit comments