Mixing React and Sightly components in a page

[remakj]

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

[arunpatidar]

Hi,

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

[remakj]

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.

[arunpatidar]

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> 

[remakj]

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.

[tusharbias]

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.

[milind_bachani]

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

[remakj]

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