How to introduce a new react component into existing AEM project with regular web AEM components

[bpeddapudi]

This question was boggling me for a while and I had to learn. We have an AEM project with regular components. CSS and JS are in ui.frontend and are regular web components (non react). Now I want to use react for couple of new components with SPA Author support. Do you guys know of any tutorial or documentation which can guide with this process?

Challenge for me is can both web components and react components can co exist in same ui.frontend module?

[anika_agarwal]

Yes both static and react component can co-exist but you need to have your project set up suport that.

For that purpose, you can always create your project using archtype with front end module as react.

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s... 

Thanks

Anika

[bpeddapudi]

I have to work on top of existing project, so I will update package.json accordingly to make it work. Thank you for your response Anika.

[nishantg]

There are quite a bit of documentation on how to get started on AEM SPA and react components, however the SPA components and templates based on standard AEM approach need to be isolated from the regular templates and cannot be mixed/merged on same page with non-SPA components.

Both web components and react components can co-exist in the codebase. There is also a possibility of creating react versions of existing components and create mapping so the same components and dialog can be used for SPA. The only caution is that the SPA and non-SPA usage cannot be present on same page/template.

[bpeddapudi]

Hi @nishantg that's what I learned from the documentation. My goal was to have both SPA and non SPA component coexist. Maintaining common components in both SPA and non SPA format is not worth it.

Just wondering, react is completely JS based as we can modify existing ui.frontend to get react and non react minified js in separate files to apps folder. Wondering if we can make changes to a template to support both SPA and non SPA. From JS side that should not be a challenge, wanted to see if you know any documentation which talks in specific with different parts of template changes which are responsible for react component support.