Skip to content

Commit 5a3d752

Browse files
Update README.md
1 parent 31e25db commit 5a3d752

File tree

1 file changed

+11
-7
lines changed

1 file changed

+11
-7
lines changed

README.md

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
# ReacType
22

3-
**ReacType** is a prototyping tool for developers employing **React** component architecture while utilizing the comprehensive type checking of **TypeScript**.
43

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.
4+
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/team-reactype/ReacType/pulls)
5+
![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)
66

7-
Download for [MacOS](), [Windows](), [Linux]().
7+
**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]().
812

913
### How to use
1014

1115
- 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.
1317
- 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.
1418
- 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.
1620
- **_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'.
1721
- **_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.
1822
- 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]().
2226
### To Export Files
2327

2428
- 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.
2630
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.
2731

2832
#### Authors
@@ -67,4 +71,4 @@ yarn run electron
6771

6872
## License
6973

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

Comments
 (0)