Intro to ReacType

Prerequisites: Advanced knowledge in HTML, CSS, React, TypeScript, Quantum Physics, Organic Chemistry ... just kidding! Only your excitement to get started!

page

Sign up for an account, or just continue as a guest. Registered users enjoy additional project-saving functionality.

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.

Add Components

Create components on the bottom panel. Components can be associated with a route, or they can be used within other components.

Delete Components

Delete components after focusing on them in the bottom panel. Be careful when deleting components: Upon deletion, all instances of the component will be removed within the application/project.

Create Custom HTML 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.

Delete Custom HTML Elements

Delete custom HTML elements by 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.

Create Instances on 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.

Component Tree

Click on the Component Tree tab next to the Code Preview tab to view the component tree hierarchy.

Update Styling

Select an element on the canvas to update its basic style attributes on the bottom panel. As you create new instances and add styling, watch as your code dynamically generates in the code preview in the bottom panel and turns into a live demo.

User Preference Features

With the click of a button, toggle between light mode and dark mode, depending on your preference.

Export Projects

Click the “Export’ 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.