Better Together: ReacType, Router, and Context API
What is ReacType?
In line with the mission of the tech accelerator OS Labs, ReacType is a desktop application that strengthens the open-source developer community by offering a powerful, scalable, and efficient prototyping tool that benefits the workflow of developers of all experience levels. ReacType boasts a rapid drag-and-drop prototyping interface that combines real-time previewing with a lightning-fast exporting feature that abstracts away the time-consuming boiler-plating that comes with starting a new project, leaving more time for the difficult developer decisions and challenges. With ReacType, in as little as 20 minutes, developers can prototype and export an entirely functional React application with a fully-configured Webpack, Express backend, and Enzyme and Jest testing suite, all without writing a single line of code.
This article will go in-depth with the features added by the ReacType 9.0 team. For an overview of the already-existing functionality and features, feel free to check out Work Smarter, Not Harder to Create a React App with ReacType and ReacType 8.0: Your Preferred React Prototyping Tool Now Exports with Tests.
What’s New With 9.0?
Users can now utilize React Router and global state management in the form of Context API for their applications.
Why React Router?
While ReacType has always had the ability to handle multiple reusable React components, users would not be able to link and route these components together within an application. This lack of functionality prevented ReacType from being able to realistically prototype single-page applications that would benefit from dynamic routing. To address this issue, we chose to implement React Router because of its ability to dynamically perform client-side routing that allows for navigation among components and pages without an entire page refresh, resulting in a more seamless user-experience.
How does it work?
In the Drag & Drop menu, there is now a new React Router section that has two draggable React Router elements: LinkTo and Switch.
The LinkTo operates as a React Router Link. Simply drag a LinkTo onto the canvas, navigate to the Customization menu, and then update the text field to what the Link will display (i.e. “Home”) and the link to an endpoint (i.e. “/home”) that will correspond to a Route, which we will be adding later. Once we click Save in the Customization menu, we will see the link appear on the demo render panel. As an added feature of ReacType 9.0, endpoints will now display in blue on Link and LinkTo elements to help us visually keep track of all of the routing in our application.
Once we have a set of React Router Links added to our canvas, we are now ready to route them to our reusable components in a React Router Switch. As a refresher, the React Router Switch element operates similarly to a Javascript switch statement and allows our application to render routes exclusively and declaratively.
First, drag a Switch onto our canvas, and then click the + button that appears on the Switch to add Routes, which will automatically nest into our Switch. Each Route will need to be directed to an endpoint that corresponds to a LinkTo endpoint, so we can add this by navigating to the customization menu for the routes and using the Link field to add the corresponding endpoint. Similar to the LinkTo endpoints, the Route endpoints will appear in the canvas for an enhanced developer experience. Finally, finish up the routing by dragging a reusable component into the appropriate Route. In ReacType 9.0, reusable components that are dragged onto the canvas will stay condensed to decrease clutter and increase readability on the canvas. We will now repeat this process until we have matching Route elements for our LinkTo elements.
And that’s all there is to it! We can confirm that the React Router Links and Routes are working by clicking the links in the live-updating demo-render panel to the right of the canvas, and we can navigate to the Code Preview menu to verify that ReacType will automatically import React Router and the corresponding syntax and tags into our exported code.
Why Global State Management?
The second key addition that we made to ReacType was the addition of global state management. One of the key building blocks of React is for components to be responsive to changes in other components, and as React developers, we track these changes and respond to them by utilizing state. While it is certainly possible (and sometimes even preferable) in smaller applications to utilize state with local state management and prop drilling, this form of state management is far from ideal for larger applications because of how it adds bloating to our code while taking away readability and maintainability.
With that in mind, the ReacType 9.0 team set forth with the goal of giving ReacType its very first global state management solution.
How did we end up with the Context API?
The most popular React global state management solutions are Redux, Recoil.js, and the Context API. While all three options could do the job, the ReacType 9.0 team wanted to choose an option that would add the most utility and benefit to the developers that use this tool.
Redux is extremely powerful and boasts a wide base of use and support, but it tends to be a better solution for enterprise-level applications, so Redux would not be the logical choice for the scale of applications that the average ReacType user prototypes. Recoil.js, on the other hand, would be a great fit for the scale of the applications that Reactype users tend to build, but Recoil.js is still considered to be an experimental state management library that has not been widely adopted yet, and we wanted our state management solution to benefit as many developers as possible.
This leaves us with the Context API, the component structure native to React as its lightweight global state management solution to prop-drilling. As an added benefit, the Context API works excellently with functional React components, which is what ReacType already uses, so our team decided to move forward with implementing it.
How does it work?
First, we’ll need to add a stateful value to our application. Simply select a component and use the Creation Panel to add a key-value pair and type to add to the state of the application. Once we add a stateful value, we can see in the Code Preview that the corresponding Context syntax and hooks will be included in our exported code.
In order to use our stateful value, we will first select an HTML element in one of our components and then navigate to the Customization menu. Here, we will click the Use State button next to the input field that we would like to use state in to pull up the Choose State Source menu. This menu displays the state of each component in our application.
As of ReacType 9.0, state can be added as a nested composite data type, so if this is the case, then this menu will recursively travel into the composite data type until it arrives to a primitive data type, at which point the selection will be returned out into the corresponding data field.
When we have made our selection, we can click save and see our selection render to the demo render screen. And last but not least, we can see in the Code Preview that we have passed into our HTML element the actual variable that corresponds to the value that we just clicked in the Choose State Source menu.
Get Involved
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 ReacType 9.0 at the links below:
