Use ReactJS Components in Non SPA website | Community
Skip to main content
R
rakesh4
January 23, 2021
Solved

Use ReactJS Components in Non SPA website

  • January 23, 2021
  • 1 reply
  • 6158 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Umesh_Thakur

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

 

 

1 reply

Umesh_Thakur
Community Advisor
Umesh_ThakurCommunity AdvisorAccepted solution
Community Advisor
January 25, 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

 

 

    R
    rakesh4Author
    January 25, 2021
    Thank you very much Umesh for this information.
    V
    ViniNeel2
    December 21, 2022

    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

    Terms & ConditionsAccessibility statement

    Loading footer...