Use ReactJS Components in Non SPA website

Avatar

Avatar

rakesh4

Avatar

rakesh4

rakesh4

23-01-2021

Hi Team,

I have a simple multilingual multi page website build using AEM 6.5, HTML, CSS, Javascript and Jquery.

In website we have multiple links in header, on click of specific link from header html page is rendered and each html page is built using multiple Web Components and content is author-able.

I have a requirement in same website on click of a specific link from header, I need to load page built with ReactJS component. I have react code ready, but how can I integrate with AEM project.

Can anyone please help with reference links for the same?

I am new to AEM, all references which I got are related to including ReactJS component in SPA app. 

Thanks

b

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Umesh_Thakur

MVP

Avatar

Umesh_Thakur

MVP

Umesh_Thakur
MVP

24-01-2021

Hi @rakesh4,

Yes you can do it.

Let me make it very clear that you can not open a react component page directly on link click but you will be opening an aem page where you will have a special component authored that will be passing the authored and other data is form of window object(s) and the value from those object you can easily get in react thru props and different mechanism available for the same purpose.

Now coming to the integration part.

Recommended way is to have two different maven project one for AEM and another for React. Magic that you will do- compile all your react code and create a bundle and and put it into the AEM project's clientlib path like- bundle.ANY_NAME.js etc....and if required put some dependancy and category based on your requirement.

Thats it.

Hope this will help.

 

Umesh Thakur

 

 

Answers (0)