Using react components in a normal AEM page

[ayushn]

We want to add react components which should be authorable in a normal AEM page. We created a project structure where we have both AEM HTL components and React spa components. We can add the react spa components in the spa page and we can add AEM HTL components in the normal AEM page but we are not able to add both the normal HTL  AEM components and react components in the same page.

[arunpatidar]

Hi @ayushn 
You can't add SPA react component to normal AEM page OOTB.

Technically everything is possible, you just need to add the react dependency to the normal page, it may have conflict as well.

What we did in our case, we created react component as normal clienlibs and mapped with aem component without SPA and loaded with normal page. 

[ayushn]

Thanks for the reply @arunpatidar  

Do you know any articles or examples for this which I can follow?

[arunpatidar]

you can add properties as data-attribute in HTL and render using react component.

[Manu_Mathew_]

@arunpatidar Is there a way you are aware of to have both HTL and SPA rendered components on the same page using the SPA template?

[arunpatidar · Accepted solution]

With SPA template and AEM SPA way of implementation it is not possible. But with custom react component it would work.

Example : https://github.com/arunpatidar02/AdaptTo2019 

[Manu_Mathew_]

@ayushn I am not sure if it's possible to have both on the same template.

1. You probably may need to have all the components to support SPA and create a react component placeholder and use the SPA project structure

2. You could provide the headless capability to components using JSON exporter and CF and use those to render in react.

3. You may need to look into both templates and create a custom page component to accommodate both. 

4. Depending on the use case, you could have a separate code structure for react and normal components and create pages however can not be used together.

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/implementing/develo...