Integrate Low-Code UI Screens into React Apps

Imagine being able to extend and improve the capabilities of your React application with UI screens from low-code development platforms…

Reify low-code platform provides true hybrid development, where low-code and React UIs can sit together within the same IDE!

There’s no need to learn a new programming language or syntax. The screens are expressed in React JSX – a format you already know.

Plus, it’s as easy as copying and pasting a few lines of code!

This blog post explains how SmartClient components (and low-code UI) combine with React.

Whether it’s just a button, a modal window, or a new application, building from scratch is never easy.

With React, it’s even more challenging.
You need to constantly find the right component pieces that fit together seamlessly.

But through Reify low-code platform, you can build parts of your UI in low-code, and then integrate them into your React apps.

This blog post will explain how to enhance and enrich your React apps with Reify UI screens.

How to Integrate Reify Screens into React

Suppose you’ve developed a UI screen with Reify tailored to meet the unique needs of your business. Instead of juggling between two different platforms with two separate setups, you can add the UI directly to your React application. The entire development process is seamless.

React.render(
    <div>
        <insert Reify screen here/>
    </div>,
    document.getElementById('root')
)Code language: JavaScript (javascript)

You can integrate Reify screens into IDE-based React projects directly from any Reify server, whether Reify or Reify OnSite.

The use of Reify.loadProject() does the trick. It’s the same as adding any other component to your React app. You’ll need to add the required details for your React project, including projectName, screenName, userName, password, and serverURL.

isc.Reify.loadProject(projectName, function (project) {
     project.createScreen(screenName);
 },{
     userName: reifyUserName,
     password: reifyPassword,
     serverURL: "reifyProjectURL"
 });Code language: JavaScript (javascript)

The React project below showcases a blend of traditional React components and Reify UI screens within the same IDE.

Specifically, the “Sample Table” and “Data Entry” tabs feature React UI constructed in the IDE.
On the other hand, the “Reify Tab” displays a low-code UI built completely in Reify.

Hybrid Development: Combining React and Low-Code UI

Integrating both low-code and classic IDE development gives you so much flexibility, speed, and efficiency. You can build an application with a mix of React components and visually-created Reify UI.

Such an application could include a Reify screen with a listGrid component interspersed with React-coded UI tabs in the same project.

This lets you quickly move from low-code UI design to code in React, as quickly as possible.

You can run tests visually in Reify, even as you’re running the integrated screens in your IDE-based projects!