ReacType 13.0 — React State Management and Prop Drilling Made Easy

Your favorite React prototyping tool just got better with some special new features

Do you spend hours prop drilling within your React application? Have you been told to abandon it altogether in favor of a hefty, state management library?

Prop drilling is often criticized due to its cumbersome attempt to solve a ubiquitous problem amongst React developers — managing state within an application. It is difficult during development to determine whether you are:

Despite the numerous, state management dev tools available, prop drilling is still a valuable architectural solution for many React applications. With ReacType 13.0, this process has been simplified and made to be completely intuitive; Creating a much friendlier development process when prop drilling and managing state.

What is ReacType?

ReacType — Your one-stop shop for all things React! ReacType is a standalone application built on Electron. It’s a powerful prototyping tool, allowing you to initialize React components that can contain various customizable HTML elements and/or other components.

It provides you with a drag-and-drop canvas as well as a demo render to see the result of your actions, and a tree graph to see the overall structure of your app at a bird’s eye view.

Additionally, ReacType makes coding easy with a live code preview of your customized components, and the export code feature which allows you to export your components and produces the scaffolding of your React application.

ReacType has a vast array of tools at your disposal to plan and get your next React app started.

So what’s the big deal with ReacType 13.0?

Creating a great application isn’t just about the looks, it’s about the functionality:

Enter ReacType 13.0.

In the earlier versions of ReacType, the state was only available statically in the customization of the independent components. Then, later on, developers added the Context Manager feature which gave you the ability to define state via the React Context API for a more global approach to state management.

Today, ReacType 13.0 has taken manipulating state one step further, by adding even more flexibility with state management and opening a wider array of options for developing your applications.

NEW! Introducing ReacType 13.0

With the release of version 13.0, we’ve overhauled how ReacType manages state within your React components. In the State Management tab, you can find new functionality such as:

Create/Edit State

Adding & deleting state and props in the Create/Edit tab

Display Tab

One of the biggest pain points of prop drilling is keeping track of state, especially within nested components. With the new Display tab, you can quickly view a tree diagram of the application’s component hierarchy. In ReacType 13.0, you have a clear, visual overview of how the state is being passed from component to component in the application. Clicking on a node will display props passed down from its parent component, as well as the state created in the clicked component.

Visualize how component state or props are being passed down in the Display tab

Putting everything together, now you can make stateful applications in a matter of minutes.. anyone up for a game of tic-tac-toe?

Tic-tac-toe example project

Additional Improvements

Along with these new features, we’ve made many additional functionality enhancements to ReacType 13.0. These include:

What’s Next with ReacType?

Here’s a short, non-exhaustive list of features we’re excited to integrate in future iterations of ReacType:

Get Involved!

Eager to try it out yourself? You can download ReacType by visiting our GitHub, or visiting our website where you will find all the information you need to get started. We are always looking for ways to make ReacType better, and we would love to hear from you! Please submit any issues or contribute to the open-source project on our GitHub.

ReacType 13.0 Contributors and Co-Authors



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store