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
**ReacType** is a visual prototyping tool for developers employing **React** component architecture alongside the comprehensive type checking of **TypeScript**.
10
+
**ReacType** is a visual prototyping tool for developers employing **React** component architecture alongside the comprehensive type checking of **TypeScript**.
14
11
In other words, **you can draw prototypes and export React / Typescript code!**
15
12
16
-
**ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _canvas display_, an _application tree_, and a _real-time 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.
17
-
18
-
**New with version 2.0:**
19
-
- React Native mode for iOS/Android app design
20
-
- Hooks integration with functional components
21
-
- History navigation
22
-
- Tutorial mode
23
-
- New keyboard shortcuts
24
-
- Editable code preview
25
-
- Prop value designation for component children
26
-
27
-
Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windows](https://github.com/team-reactype/ReacType/releases/), [Linux](https://github.com/team-reactype/ReacType/releases/).
13
+
**ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ and a _real-time component code preview_. The user can create components and drag _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.
28
14
29
-
***Mac users**: 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.
15
+
**New with version 3.0:**
30
16
31
-
***Linux users**: run the application as a super user in order to read and write files.
17
+
- Export code as a [Next.js](https://nextjs.org/) project
18
+
- Create nestable components/HTML elements using a drag-and-drop canvas
19
+
- Add CSS to components
20
+
- Components and HTML canvas elements are rendered in the canvas in the same way they'll be rendered in the exported project
21
+
- View dynamically generated Next.js or classic React code as you build your project
22
+
- Authenticate with Github or email
23
+
- Save data for multiple projects in the cloud
24
+
- Critical Electron security gaps resolved
32
25
33
-
26
+
Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windows](https://github.com/team-reactype/ReacType/releases/), [Linux](https://github.com/team-reactype/ReacType/releases/).
34
27
35
-
### How to use
28
+
-**Mac users**: 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.
36
29
37
-
- 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.
38
-
- Switch to React Native mode to change the interface to a mobile app development environment
39
-
- To add a new component, type its name in the upper left panel, in the field '**Add class component**', and press enter.
40
-
- 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.
41
-
- To add draggable **HTML elements**, select the image icons on the lower left panel.
30
+
-**Linux users**: run the application as a super user in order to read and write files.
42
31
43
32
44
33
45
-
- The bottom panel allows the user to toggle between 4 different views: a **tree diagram of the application**, a **real-time preview of the exportable code**, a form to enter component props, and a form to add HTML attributes.
46
-
47
-
-**_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'.
48
-
-**_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.
49
-
50
-
51
-
52
-
- To **_delete_** a _child_ or instance from the canvas, select the desired instance and either press the _delete_ key.
53
-
- To **_delete_** a _component_, click the 'DELETE' button of the desired component in the left panel.
54
-
- To _start over_, select the blue 'CLEAR WORKSPACE' button in the left panel. This will **clear the entire application**.
55
-
56
-
### To Export Files
34
+
### How to use
57
35
58
-
- 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:
59
-
1. Export the component files into a components folder. This option will allow a developer to add these files to an existing project.
60
-
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.
36
+
-**Log in:** Sign up through email/Github if you would like to save your projects to the cloud. Otherwise, select **Continue as Guest**
37
+
-**Select project type:** By default, new projects will be Next.js projects, but you can toggle your project to be a normal React application by selecting "Classic React" in the bottom-right corner.
38
+
-**Next.js** projects allow you to easily create routing between pages within ReacType and render content with static rendering.
39
+
-**Classic React** projects are vanilla React. You can create multiple "root" components, but routing between these root components is enabled by default.
40
+
-**Add components:** Add a new component in the left panel. If the **Page** checkbox is selected, the component will become a page that can be routed to. For example, a page component named 'Home', the component's corresponding route will be '/Home'. [Learn more about Next.js routing](https://nextjs.org/docs/routing/introduction).
41
+
-**Create instances of components/HTML elements:** Each component has its own canvas where you can see how any instances of nested components or HTML elements will render in production. To create an instance of a component or traditional HTML element in the canvas, simply drag it onto the canvas. The following elements have special properties when they're dragged onto the canvas:
42
+
-**Page/root components:** Page/root components cannot be dragged into other components.
43
+
-**Divs:** Divs are arbitrarily nestable. This feature is useful when creating complex layouts.
44
+
-**Navigation components:** Next.js projects have "Navigation components" which allow you to create client-side rendered links between your page components.
45
+
-**Update CSS and delete instances:** Click on the component canvas or an instance to view/edit CSS attributes in the right panel. Updates made to the CSS will render in the canvas on **Save**.
46
+
-**Save your project:** Select **Save Project** to save a new project to the cloud. Once you've created a new project in the cloud, it will be autoamtically saved on each change. You can open any of your other saved projects by selecting **Open Project**
47
+
-**Export your project:** Select **Export Project** to save your project locally. You will have the option of exporting either a fully functional application or only exporting the component files.
- Please note that the development build is not connected to the production server. To develop with a development server, clone the [ReacType server repo](https://github.com/andrewjcho84/ReacTypeServer). Alternatively, you can also select "Continue as guest" on the log-in page of the app to not use any features that rely on the server (authentication and saving project data.)
0 commit comments