September 28, 2022

Robotic Notes

All technology News

ReacType 13.0 — React State Management and Easy Drilling | by Darin Ngau | August 2022

3 min read

Are you spending hours drilling into your React app? Have you been told to ditch it altogether in favor of a massive government library?

Prop drilling is often criticized for its clumsy attempt to solve a common problem among React developers – managing state in an application. During development, it is difficult to determine if you are:

  1. Props to overcome
  2. Crossing struts, or
  3. Loss of struts somewhere in the strut drilling process

Despite the many state management development tools available, punching is still a valuable architectural solution for many React applications. With ReacType 13.0, this process is simplified and made completely intuitive; Creating a much more comfortable development process when probing and managing state.

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

It gives you a drag-and-drop canvas, as well as a demo render to see the result of your actions, and a tree view to see the overall structure of your application from a bird’s eye view.

Additionally, ReacType makes coding easy with live code previews of your custom components and the export code feature that lets you export your components and builds the scaffolding of your React application.

ReacType has a wide range of tools at your disposal to plan and run your next React application.

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

Enter ReacType 13.0.

In earlier versions of ReacType, state was only available statically when customizing independent components. The developers then later added the Context Manager feature, which enabled you to define state via the React Context API for a more global approach to state management.

Today, ReacType 13.0 takes state manipulation one step further, adding even more flexibility with state management and opening up a wider range of options for developing your applications.

With the release of version 13.0, we’ve redesigned the way ReacType manages state in your React components. In the Status Management tab you can find new functionality such as:

Create/Edit status

  • Local state management: You can initialize state with React hooks in Create New State section. When a state is created in a component, the state and its associated setState function are readily available to pass to its child components.
  • Add/delete struts: Passing props to multiple components can be a time-consuming process. With ReacType 13.0, you can easily pass and delete state or props through deeply nested components; Drilling is as simple as clicking a button!
  • Edit dynamic state: If state or props are deleted upstream from the parent component, it will automatically update the state of its child components.
Add and delete state and props in the Create/Edit tab

Display tab

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

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

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

  • Add click functionality in components.
  • Inclusion of Material UI as additional sidebar elements to add to the components.
  • Enable auto-save feature when dragging and dropping components and when updating component state.
  • Allows users to click and access other projects within the overview dashboard.
  • Further development of the ReacType web browser platform.
  • Enable Google OAuth on all platforms.
  • Compatibility for Linux users.

Want to try it out for 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’re always looking for ways to make ReacType better, and we’d love to hear from you! Please submit any issues or contribute to the open source project on our GitHub.

Source link