Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Mixing React and Sightly components in a page

Avatar

Level 2

Hi All,

 

 Is there a way we can mix React and Sightly/HTL components in a same page? I tired to add HTL components in a SPA app/page and they would not even render. I guess this is expected as the React App is not aware of the HTL component and hence ignored. Is there a way where I can have 2 containers in a page where 1 allows you yo add HTL components and the other React components? 

 

Any pointers toward a solution/poc would be appreciated.

 

Thanks

Jai

7 Replies

Avatar

Community Advisor

Hi,

For the second container, you need to add the responsive grid in the page component. I think then this will work.



Arun Patidar

Avatar

Level 2

Because the page is mapped with React component, React handles the rendition of it and it ignores the responsive grid I added next to <div id="spa-root"></div>. If i do not map the page to react component, then the react components are not editable as the spa-root id is in a different place and the responsive grid rendered by HTL is in different place.

Avatar

Community Advisor

Hi,

If you add another div with server side rendering e.g.

<div id="root"></div>. 
  <div id="spa-root"></div>
  <div id="responsive-root">
      component 1 response using HTL
      component 2 response using HTL

  </div>
</div> 


Arun Patidar

Avatar

Level 2

The problem is lets say we are adding this "responsive-root" div element to body.html of /apps/mycompany/spa-page. This spa-page component itself is rendered by React and hence it can not handle any HTL components.

Avatar

Level 7

AFAIK, If you have existing AEM components, they will need to ensure those components have a sling model so that the appropriate model.json output is generated, and then also write the appropriate react/angular component that maps to that AEM component. The existing HTL will not be used as the rendering is now done client side by the SPA, not server side.

Avatar

Employee Advisor

Hi @remakj ,

This indeed is a problem and I have faced the same.

When you use react and sightly components together, the react one always has precedence and overrides the sightly div because, react takes over the control on DOM.

But, when you inject something once react page is loaded, it would be injected successfully.

So, I am afraid that you can use sightly and react together.

However, I have used ES scripting and react together, by bundling both of them seperately and having seperate parent divs of ownership and works fine.

Hope this helps!

Best Regards,
Milind

Avatar

Level 2

Hi @milind_bachani 

 

 When you say "So, I am afraid that you can use sightly and react together." I guess you meant "you cant use sightly and react components together"?

 

I understand having 2 divs both controlled by JS one by React and other plain JS. That makes sense though it kind of defeats my requirement to have a section rendered server side and another client side.

 

Thanks