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: LICENSE.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
MIT License
2
2
3
-
Copyright (c) 2018 ReacType
3
+
Copyright (c) 2020 ReacType
4
4
5
5
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
**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.
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 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
14
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
15
+
**New with version 3.0:**
16
+
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 any element on the canvas
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
26
25
27
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/).
28
27
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.
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.
30
29
31
-
***Linux users**: run the application as a super user in order to read and write files.
30
+
-**Linux users**: run the application as a super user in order to read and write files.
32
31
33
-
32
+
34
33
35
34
### How to use
36
35
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.
42
-
43
-
44
-
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
57
-
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
+
-**Selectproject 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.
44
+
-**Navigation components:** Next.js projects have "Navigation components" which allow you to create 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