ReacType 8.0: Your Preferred React Prototyping Tool Now Exports With Tests
What is ReacType?
ReacType is a user-friendly GUI for prototyping the components of your React app. ReacType gives developers of all experience levels a serious boost in the early phases of creating a React app, in line with the mission of the tech accelerator OS Labs to strengthen the open-source developer community through easy-to-use tools. With its drag-and-drop rapid prototyping abilities, real-time previewing and fast exporting, this is the React prototyping tool developers have been waiting for. ReacType abstracts away the initial setup of a new app from creating React boilerplate, bundler setup, to dependency installs and allows developers to quickly get to coding the core of their application. ReacType users can create and delete components as well as HTML elements, drag instances of these onto the canvas, see them in a live-demo preview, export and import prototype code, and share their templates for other users on the platform to review and comment on.
How Does It Work?
Using ReacType is as easy as drag-and drop! First, create an account with your email address and sign in directly or log in via OAuth with Github. Once logged in, with a click of the mouse, you are able to arrange and generate the elements and components of your app then preview the ready-for-export code instantly in the bottom pane. As a bonus you can adjust the CSS styles in the integrated editor, store annotations for your teammates, export the project and — if you choose to create an account with us — save and share templates with the rest of the ReacType community
Getting Started
The first step to get to know ReacType is to create an account. You can do this with your email or sign in via OAuth with Github. Registered users can create a new project and select whether they want their application to be in Next.js, Gatsby.js, or React. Also, registered users can save projects to return to them at a later time.
Build Out Your Components
Next, you can start creating, adding and editing components as well as HTML elements in your project. Utilize ReacType’s drag and drop interface to populate the canvas; you can even nest components and elements into each other!
Generate and preview your code in real-time
As you create your components via drag-and-drop and add pre-configured styling classnames, code is dynamically generated in real-time! You are able to view the code directly. You also have access to a CSS editor where you can directly adjust the styling of your application.
Develop collaboratively with built-in annotations
Click the notes button on the selected component or element and add your own annotations for others to see.
Export Your Project
Once you are finished with your prototype, go to the export menu to export your project (Now with optional test suites in ReacType 8.0!).
New Features in ReacType 8.0
- Pre-configured exports of Webpack, Jest & Typescript files and test suites for React, Next & Gatsby apps.
- Github OAuth implementation
- New and improved dark mode
New Feature Descriptions
While on the cutting edge of prototyping technology, we’ve responded to feedback regarding the need for the integration of the latest unit testing practices into our exports. In ReacType v8.0, with the click of a checkbox, you can export your components with Jest and Enzyme tests for not just React, but Next and Gatsby apps as well! The exported folder will include pre-configured Webpack, Jest, and Typescript files along with tests for your project. All that is left is installing the dependencies and running the project.
We’ve added Github OAuth authentication to streamline the sign-up for new users and speed up the account management process for those already employing ReacType in their workflow.
As a bonus, In response to user demands for a more visually coherent dark mode, we’ve made enhancements to this in ReacType v8.0 as well!
Get Involved
OK, but where can I get ReacType? As always you can find ReacType on our Github or by visiting our website where you’ll encounter everything you need to get it up and running. Contributors are constantly searching for ways to improve upon ReacType, so we’d love to hear from you! Feel free to submit any issues or contribute yourself to the open source product on Github.
Follow the members of Team ReacType at the links below:
Philip Hua ↪ LinkedIn / Github
William Rittwage ↪ LinkedIn / Github
