Use ReactJS Components in Non SPA website

[rakesh4]

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

[Umesh_Thakur · 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]

Thank you very much Umesh for this information.

[ViniNeel2]

Hi @rakesh4  I am kind of new to AEM ,Can you please share any git link where you done the aem and react integration without spa

[rakesh4]

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]

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]

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.

[hdhanore25]

@rakesh4 - Can you please share how you implemented the author-able content in react.

[Amsalek4]

Hi @Umesh_Thakur , if we have only static non spa react component , how do we map to aem component. I understand for spa , we use mapto method to connect with aem component. if we use non spa react component, can we create element id in html and render the content in react by using that id? is that good approach. In our case, complete UI will be from react without any authored data. May be in future we might need authored data from AEM.

Please let me know if creating unique id for each aem components whichever we wanted to map to react is good approach or any better one is there.

[Umesh_Thakur]

Yes, you can create a unique id for components with the help of  com.adobe.cq.wcm.core.components.util.ComponentUtils in your sling model an pass it to component's html so that as many number of instance you create for same component on the same page, id will be different.
then this Id you can pass to react component to render respective react component version on the page.

[JustYusaf100x]

Hi Umesh,

So are you saying that I'd have to run a Maven command to generate a React-based AEM project, write my React code there & then build the React code as a bundle to be transferred into the other AEM project?