Use ReactJS Components in Non SPA website

[#1]

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

[rakesh4 · Accepted solution]

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

[rakesh4 · Accepted solution]

Thank you very much Umesh for this information.

[rakesh4 · Accepted solution]

Hi @Umesh_Thakur,
Your direction was really helpful.
We were able to see ReactJS component on AEM page, further I had question that how can I make the content author-able for such component?

I was able to do that using react-habitat lib, it is displaying perfectly but still it is not updating when we change the content from author window.
Can you share any example for the same?

[Umesh_Thakur · Accepted solution]

I am not aware of react-habitate lib Rakesh, but as I said earlier you will have one AEM component so whatever you will author in it, you need to pass those value in form of window object on the components HTML and then from there you will be getting those values in React with the help of props. this way you will have updated content on the react component. You can verify those authored values in browser console.

[rakesh4 · Accepted solution]

Hi @Umesh_Thakur,
I was able to get it working with author-able content and without using any extra library.

Thanks again for your direction.