Integrating React Components into an Existing UI

A small journey into my Tech World filled with bizarre experiences. One such instance that comes to mind is when I had to make some enhancements to an existing UI that was written earlier. The older Tech Stack was Django-based SSR (using View Templating) with jQuery in the browser. However, the enhancement planned was based on React, as the library, we will be composing on top of was built in React and we were already in the middle of a Tech Stack migration for the front-end. On the other hand, the whole UI system of the existing one was quite heavy and would require significant person-hour to completely migrate to React. So we made a decision that we will build all enhancements in React while keeping the older UI intact and just extensible.

TLDR; Experienced React developers can skip directly to Let’s Get Started chapter.

How React works in Browser

Before we get started with the nitty-gritty implementation details of the topic. Let us take a moment and understand how React libraries work under the hood to build the UI we declared in our codebase.

In our codebase, a React component might look like this:

And we might be rendering this into UI as follows, assuming we have an empty div with the id “app”:

Now underneath the hood, React will create the required element tree and append it to the aforesaid div. The purpose of ReactDOM here is to reflect all our declarative UI mapping into actual DOM elements.

Module Bundlers

It would not be an overstatement to say front-end state of art applications as we see them today might not have existed if not for high-end module bundlers like Webpack, Rollup, Turbopack, Vite etc. The core purpose of these tools is to convert a set of source files from the developer workspace into a couple of executable files for the staging/production environment, e.g., a browser.

One of the key file these module bundlers generate is the Manifest file. This file is responsible to provide metadata to the runtime so that the runtime can load the entry point and dependencies as they are needed. Webpack generates a file called asset-manifest.json which holds information on the mapping between source files and runtime assets and a list of entry points.

Let’s Get Started

We start our journey by creating a factory function that will be exposed to the outside world. For the sake of simplicity, let us assume we want to make this function available in the global scope. This pattern can be improved using custom loaders, but we can skip it for the time being.

Once went through the build pipeline, this yields main_[contenthash].js file which would be the entry point of our application, considering everything inside the Component is valid.

The Middleware House

Now we have two problems at hand, one is to tell Django that we have to load runtime assets generated by our module bundler, Webpack in this case; and invoke the factory function from the current system with proper parameters to create the UI. Let’s take the first one for a spin.

Here we have developed our custom JSON Decoder that serializes a JSON string into an AssetManifest object. The function parse_asset_manifest can be tested in isolation for validation, however, we would be using load_asset_manifest function more often. Provided we can configure the destination directory for Webpack to emit the manifest file, the actual file path can be given through environment variables.

Now let’s create a mixin that composes this middleware and simplifies the integration process.

Now we can simply inherit any Django View from here and it will work out of the box.

Bootstrapping in Browser

First of all, we need to add <script> tags for React resources into our view templates.

I believe here on, figuring out the rest is quite easy. We will have an empty div and will pick that element once the document is ready and invoke the factory function with proper parameters.

Conclusion

So it turns out, despite sounding unorthodox, it is possible to integrate a React UI system into an existing one and could be a potential choice that save some $$ for the business.

Originally published at https://theprodev.hashnode.dev.