lillwimberly/reactype

🧪 Prototyping Tool for exporting React/Typescript Applications!

ReacType

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!

Visit reactype.io to learn more about the product.

Follow @ReacType on Twitter for important announcements.

Documentation

If you want to read about using ReacType, the User Manual is free and available online now.

Installing

• MacOS Download the latest release
  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. If you are given a warning that Apple could not scan the app. Please follow these steps

• Windows Download the latest release

New with version 13.0.0

• Manage state locally: Users can now manage state dynamically within nested components using React Hooks within the state manager tab.
• 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.
• State/props flow: If state or props are deleted upstream, it will automatically update the state for its children components.
• 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.
• And more: See change log for more details on what was changed from the previous version as well as plans for upcoming features!

Run ReacType using CLI

• Fork and Clone Repository.
• Open project directory
• Install dependencies

npm install

• To run the production build

npm run prod

• To run tests

npm run test

• To run the development build

npm run dev

• 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. 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.)

• To run the development build of electron app

npm run dev
npm run electron-dev

Run Exported App

• Open exported project directory
• Install dependencies

npm install

• Build the app

npm run build

• Start an instance

npm run start

• Open browser and navigate to localhost at specified port

Stack

Typescript, React.js, Redux, Javascript, D3.js, Node.js (Express), HTML, CSS/SASS, GraphQL, Next.js, Gatsby.js, Electron, SQL, NoSQL, Webpack, TDD (Jest, Enzyme and React Testing Library), OAuth 2.0, Travis CI

Contributions

Here is the up to date list of all co-developers of this product. Please visit our contribution documentation for more information on how you can contribute to ReacType!

License

This project is licensed under the MIT License - see the LICENSE.md file for details.