React and Freemarker integration

Question

we have a website that is built on Java, Spring Boot, the UI is written with FTL (FreeMarker).

Now we want to re-write the UI using React, but don't want to abandon the whole FTL and start from scratch only use React. Because our team only in charge of a component of that web page, and that page is written in FTL.

Let's say on a web page, there is a component called

insurance-module

which renders the insurance module, written by FreeMarker, and included by this code:

#### Other FTL code ########

<#include "/XXX/insurance/insurance-module.ftl" /> 

#### Other FTL code ########

I can writer that component using React, but the question is, I don't know how to integrate my react code to the existing FTL template. Meaning, without breaking the original code structure and functionality, insert my complete functional React code.

#### Other FTL code ########

This part now comes from React.

#### Other FTL code ########

Thanks

Answer 1

With React you can basically build components, compose and even reuse them wherever you can and you wouldn't even need FreeMarker, however, if you do need to use FreeMarker, you can check the docs here. For example, let's say your insurance module has policy-details and insured-asset (excuse the poor domain concepts). You can essentially have the two components independently and one that brings the two together, say insurance-module for example and the code would look like so:

PolicyDetails.js/InsuredAsset.js

import React, { Component } from 'react'
...

export class PolicyDetails extends Component {
   //constructor and maybe other functions
   render() {
     return (
       <div>
          some html here...
       </div>
      )
   }

}

And for the composite component you can have something like:

InsuranceComponent.js

import React, { Component } from 'react'
...

export class InsuranceComponent extends Component {
   //constructor and maybe other functions
   render() {
     return (
       <div>
          <PolicyDetails />
          <InsuredAsset />
       </div>
      )
   }

}

I hope this answers your question as it was a bit too broad to give a specific answer