Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Use ReactJS Components in Non SPA website

Avatar

Avatar
Level 1
rakesh4
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
rakesh4
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile
rakesh4
Level 1

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
View Entire Topic

Avatar

Avatar
Validate 1
MVP
Umesh_Thakur
MVP

Likes

135 likes

Total Posts

146 posts

Correct Reply

49 solutions
Top badges earned
Validate 1
Applaud 25
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 1
MVP
Umesh_Thakur
MVP

Likes

135 likes

Total Posts

146 posts

Correct Reply

49 solutions
Top badges earned
Validate 1
Applaud 25
Ignite 3
Ignite 1
Give Back 5
View profile
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