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 rapid prototyping tool for developers employing **React** component architecture alongside the comprehensive type-checking of **TypeScript**.
11
-
In other words, **you can draw prototypes and export React / TypeScript code!**
12
-
13
-
**ReacType** allows users to _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ , a _real-time demo render_ , a _real-time component code preview_. Users 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.
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/).
16
24
17
-
-**Mac users**: After opening the dmg and dragging ReacType into your Applications folder, ctrl+click the icon and select 'Open' from the context menu to run the app. This extra step is necessary since we don't have an Apple developer license yet.
18
-
19
-
-**Windows users**: Install the application by running ReacType Setup 11.0.0.exe.
20
-
21
-
-**Linux users**: Run the application as a super user in order to read and write files.
-**Sign-in page**: Sign up for an account or just continue as a guest. Registered users enjoy additional project-saving functionality.
29
-
-**Tutorial**: Click ‘Tutorial’ from the Help tab’s dropdown menu (at the top left of the application) to view a tutorial.
30
-
-**Start a project (only after registration)**: Registered users can create a new project and select whether they want their project to be a Next.js, Gatsby.js, or classic React project. Also, registered users can save projects to return to them at a later time.
31
-
-**Add Components**: Create components on the right panel. Components can be associated with a route, or they can be used within other components.
32
-
-**Delete Components**: Delete components after focusing on them in the right panel. Be careful when deleting components: Upon deletion, all instances of the component will be removed within the application/project.
33
-
-**Context Visualizer**: You can now visually see what component is consuming which context. As you click on the interactive tree, the component assigned to the context will be revealed.
34
-
-**Context Code Preview**: Once contexts have been assigned to the desired components, click ‘Export’ to incorporate context into your existing codebase so you can save it as a file.
35
-
-**Ready to go code**: Added boilerplate codes to components based on which contexts they are consuming.
36
-
-**Add Custom Elements**: Create custom elements or add provided HTML elements into the application. Once the project is exported, the HTML tags generated in the code preview will function as expected. You can specify functionality for custom elements in the code preview. The tutorial on HTML Elements explains more on how to do this.
37
-
-**Delete Custom HTML Elements**: Delete custom HTML elements by clicking on the ‘X’ button adjacent to the element. Be careful when deleting custom elements: All instances of the element will be deleted within the application/project.
38
-
-**Create Instances on the Canvas**: Each component has its own canvas. Add an element to a component by dragging it onto the canvas. Div components are arbitrarily nestable and useful for complex layouts. Next.js and Gatsby.js projects have Link components to enable client-side navigation to other routes.
39
-
-**Component Tree**: Click on the Component Tree tab next to the Code Preview tab to view the component tree hierarchy.
40
-
-**Update Styling**: Select an element on the canvas to update its basic style attributes on the right panel. As you create new instances and add styling, watch as your code dynamically generates in the code preview in the bottom panel.
41
-
-**Using State in Elements**: As of 11.0.0, you can now select an HTML element on the canvas and then navigate to the customization panel to click a button to pass a variable from state into your element's text or link field.
42
-
-**User Preference Features**: With the click of a button, toggle between light mode and dark mode, depending on your preference.
43
-
-**Export project**: Click the “Export Project’ button to export the project’s application files into a TypeScript file. The exported project is fully functional with Webpack, Express server, routing, etc., and will match what is mocked on the canvas.
44
-
-**Export project with Tests**: Click the "includes tests" checkbox while exporting to include pre-configured Webpack, Jest, and Typescript files along with tests for your project.
45
-
-**Export project with Tests**: Sign into ReacType with your GitHub account!
46
-
-**Live Render Demo**: Live render demo in React using Electron's sandbox environment. Updates in realtime to reflect canvas structure and customization options.
47
-
-**Annotations**: Provide design notes directly on the canvas and have these persist while sharing designs with other engineers.
48
-
-**CSS Editor**: Copy and paste custom css styles and classes into the editor and save to use personal or company designs in an instant.
49
-
-**State & Props Creator**: Create custom state hooks with real-time updates in the code preview.
50
-
-**Application Style Update**: Complete redesign of the entire application for enhanced user experience to maintain a single view application
51
-
-**Dashboard**: Click the 'Dashboard' button to view the Public Dashboard and User Dashboard.
52
-
-**Like**: Like other people's templates by clicking on the thumbs up icon.
53
-
-**Comment**: Comment on other templates by typing in the input field and clicking the comment icon.
54
-
-**Download**: Save any public template by clicking the download icon to save a copy as your own.
55
-
-**Publish**: Publish any template to the Public Dashboard for other users to download, like, or comment on. Click again to unpublish projects.
56
-
-**Sort By**: Click the 'Sort By' button to choose different metrics to sort the Public Dashboard by.
57
-
-**Form Nesting**: Nesting within form tags is now fully functional
58
-
-**Added Undo and Redo functionality**
59
-
-**Test Suite Export**: pre-configured configuration & test file exports with application files.
60
-
-**Dark mode**: change the theme of the app for a different asthetic.
61
-
- Elements may be added to components in any location, rather than only at the bottom
62
-
- Compatibility with Gatsby.js
63
-
- Modernized and cleaner UI, including enhanced dark mode
64
-
- Tutorial has been updated to reflect other modifications
65
-
66
-
**New with version 11.0.0:**
67
-
68
-
-**Enhanced Next.js Functionality**: Create a Next.js application in Reactype! Take advantage of server side rendering and static site generation by using the new improved Next.js link and image components. Simply drag and drop a Link element onto the canvas which can be coupled with a page to support SSR or optimize performance by using Next.js' Image component to enable on-demand image resizing. After you're done, export your project as a Next.js application written in Typescript!
69
-
-**More Dark Mode**: Cleaned up the dark mode UI and added it to all areas of the application including the sign in and sign up page.
70
-
-**Various Performance Enhancements**: Improved performance by reducing unnecessary re-rendering due to needlessly coupled state hooks
71
-
-**And more:** See CHANGE_LOG.md for more details on what was changed from the previous version as well as plans for upcoming features!
**ReacType** is a rapid prototyping tool built on Electron that allows users _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ and an interactive, _real-time component code preview_ that can be exported as a **React** app for developers employing React component architecture alongside the comprehensive type-checking of **TypeScript**. In other words, **you can draw prototypes and export React / TypeScript code!**
Download the latest [release](https://github.com/open-source-labs/ReacType/releases) <br>
50
+
After opening the dmg and dragging ReacType into your Applications folder, ctrl+click the icon and select 'Open' from the context menu to run the app. This extra step is necessary since we don't have an Apple developer license yet.
-**Manage state locally**: Users can now manage state dynamically within nested components using React Hooks within the state manager tab.
59
+
-**Add/delete props**: For a selected component, users can see a list of available props from the parent, add props, and delete props in case they are not required later on.
60
+
-**State/props flow**: If state or props are deleted upstream, it will automatically update the state for its children components.
61
+
-**Visualize state/props flow**: Within the display sub-tab of the state manager tab, users can visualize an interactive tree diagram depicting the state initialized in the current component and passed down props from the parent component.
62
+
-**And more:** See [CHANGE_LOG.md](https://github.com/oslabs-beta/ReacType/blob/dev/CHANGE_LOG.md) for more details on what was changed from the previous version as well as plans for upcoming features!
- Please note that the development build is not connected to the production server. `npm run dev` should spin up the development server from the server folder of this repo. For additional information, the readme is [here](https://github.com/open-source-labs/ReacType/blob/master/server/README.md). Alternatively, you can select "Continue as guest" on the login page of the app, which will not use any features that rely on the server (authentication and saving project data.)
236
94
237
-
## To Run Your Exported Next.js or Gatsby.js Project
95
+
- To run the development build of electron app
96
+
97
+
```bash
98
+
npm run dev
99
+
npm run electron-dev
100
+
```
101
+
102
+
## Run Exported App
238
103
239
104
- Open exported project directory
240
105
- Install dependencies
@@ -257,6 +122,23 @@ npm run start
257
122
258
123
- Open browser and navigate to localhost at specified port
Here is the up to date [list](https://github.com/oslabs-beta/ReacType/blob/dev/contributors.md) of all co-developers of this product.
132
+
Please visit our [contribution documentation](https://github.com/oslabs-beta/ReacType/blob/dev/contribution_documentation.md) for more information on how you can contribute to ReacType!
133
+
134
+
260
135
## License
261
136
262
137
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