How to extend existing HTL components such as global header & footer, breadcrumb, text and other custom component in React SPA with AEM 6.5.4

[csaini]

Hi,

By following wknd-react-spa tutorial, I integrated simple editable react SPA by extending WCM Core components (Text, Image). Now as part of the requirement I need to re-use global header & footer, breadcrumb and other custom components for the SPA by extending. Could you please suggest to me how to extend existing HTL components with react SPA?

[Asutosh_Jena_]

Hi @csaini 

Please refer the below link to know more about how to extend the existing HTL components with SPA. 
https://experienceleague.adobe.com/docs/experience-manager-learn/spa-react-tutorial/extend-component...

Following this link you should be able to create custom components:
https://experienceleague.adobe.com/docs/experience-manager-learn/spa-react-tutorial/custom-component...

Hope this helps!

Thanks!

[csaini]

Hey @Asutosh_Jena_ , my question was related to custom existing HTL component extending not existing Core Component with the AEM SPA Editor. In my current application we have almost 63 components already there, need to reuse those components in react editor spa.

Do you have any idea how to reuse/extend existing custom htl components( not aem core component). I already implemented aem core component extending.

[Asutosh_Jena_]

@csaini 
I am not sure how the components are already written/developed. If you are trying to re-use the existing component you should be able to use the existing component dialog only but the scripts you might need to re-write to support with SPA. It will be better to go with core components and new components which will have support for SPA.

Thanks!