<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Re: Mixing React and Sightly components in a page in Adobe Experience Manager Discussions</title>
    <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457502#M34254</link>
    <description>&lt;P&gt;Hi&amp;nbsp;&lt;LI-USER uid="17381882"&gt;&lt;/LI-USER&gt;&amp;nbsp;,&lt;BR /&gt;&lt;BR /&gt;This indeed is a problem and I have faced the same.&lt;BR /&gt;&lt;BR /&gt;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.&lt;BR /&gt;&lt;BR /&gt;But, when you inject something once react page is loaded, it would be injected successfully.&lt;BR /&gt;&lt;BR /&gt;So, I am afraid that you can use sightly and react together.&lt;BR /&gt;&lt;BR /&gt;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.&lt;BR /&gt;&lt;BR /&gt;Hope this helps!&lt;BR /&gt;&lt;BR /&gt;Best Regards,&lt;BR /&gt;Milind&lt;/P&gt;</description>
    <pubDate>Wed, 22 Jun 2022 14:54:28 GMT</pubDate>
    <dc:creator>milind_bachani</dc:creator>
    <dc:date>2022-06-22T14:54:28Z</dc:date>
    <item>
      <title>Mixing React and Sightly components in a page</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457441#M34250</link>
      <description>&lt;P&gt;Hi All,&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;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?&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;Any pointers toward a solution/poc would be appreciated.&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;Thanks&lt;/P&gt;&lt;P&gt;Jai&lt;/P&gt;</description>
      <pubDate>Wed, 22 Jun 2022 08:55:43 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457441#M34250</guid>
      <dc:creator>remakj</dc:creator>
      <dc:date>2022-06-22T08:55:43Z</dc:date>
    </item>
    <item>
      <title>Re: Mixing React and Sightly components in a page</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457449#M34251</link>
      <description>&lt;P&gt;Hi,&lt;/P&gt;&lt;P&gt;For the second container, you need to add the responsive grid in the page component. I think then this will work.&lt;/P&gt;</description>
      <pubDate>Wed, 22 Jun 2022 09:20:49 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457449#M34251</guid>
      <dc:creator>arunpatidar</dc:creator>
      <dc:date>2022-06-22T09:20:49Z</dc:date>
    </item>
    <item>
      <title>Re: Mixing React and Sightly components in a page</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457486#M34252</link>
      <description>&lt;P&gt;Because the page is mapped with React component, React handles the rendition of it and it ignores the responsive grid I added next to &amp;lt;div id="spa-root"&amp;gt;&amp;lt;/div&amp;gt;. 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.&lt;/P&gt;</description>
      <pubDate>Wed, 22 Jun 2022 13:26:23 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457486#M34252</guid>
      <dc:creator>remakj</dc:creator>
      <dc:date>2022-06-22T13:26:23Z</dc:date>
    </item>
    <item>
      <title>Re: Mixing React and Sightly components in a page</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457492#M34253</link>
      <description>&lt;P&gt;AFAIK,&amp;nbsp;&lt;SPAN&gt;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.&lt;/SPAN&gt;&lt;/P&gt;</description>
      <pubDate>Wed, 22 Jun 2022 13:56:36 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457492#M34253</guid>
      <dc:creator>tusharbias</dc:creator>
      <dc:date>2022-06-22T13:56:36Z</dc:date>
    </item>
    <item>
      <title>Re: Mixing React and Sightly components in a page</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457502#M34254</link>
      <description>&lt;P&gt;Hi&amp;nbsp;&lt;LI-USER uid="17381882"&gt;&lt;/LI-USER&gt;&amp;nbsp;,&lt;BR /&gt;&lt;BR /&gt;This indeed is a problem and I have faced the same.&lt;BR /&gt;&lt;BR /&gt;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.&lt;BR /&gt;&lt;BR /&gt;But, when you inject something once react page is loaded, it would be injected successfully.&lt;BR /&gt;&lt;BR /&gt;So, I am afraid that you can use sightly and react together.&lt;BR /&gt;&lt;BR /&gt;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.&lt;BR /&gt;&lt;BR /&gt;Hope this helps!&lt;BR /&gt;&lt;BR /&gt;Best Regards,&lt;BR /&gt;Milind&lt;/P&gt;</description>
      <pubDate>Wed, 22 Jun 2022 14:54:28 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457502#M34254</guid>
      <dc:creator>milind_bachani</dc:creator>
      <dc:date>2022-06-22T14:54:28Z</dc:date>
    </item>
    <item>
      <title>Re: Mixing React and Sightly components in a page</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457512#M34255</link>
      <description>&lt;P&gt;Hi,&lt;/P&gt;&lt;P&gt;If you add another div with server side rendering e.g.&lt;/P&gt;&lt;PRE&gt;&amp;lt;div id="root"&amp;gt;&amp;lt;/div&amp;gt;.&amp;nbsp;
  &amp;lt;div id="spa-root"&amp;gt;&amp;lt;/div&amp;gt;
  &amp;lt;div id="responsive-root"&amp;gt;
      component 1 response using HTL
      component 2 response using HTL

  &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;&amp;nbsp;&lt;/PRE&gt;</description>
      <pubDate>Wed, 22 Jun 2022 15:27:20 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457512#M34255</guid>
      <dc:creator>arunpatidar</dc:creator>
      <dc:date>2022-06-22T15:27:20Z</dc:date>
    </item>
    <item>
      <title>Re: Mixing React and Sightly components in a page</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457514#M34256</link>
      <description>&lt;P&gt;Hi&amp;nbsp;&lt;LI-USER uid="17450740"&gt;&lt;/LI-USER&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;When you say "&lt;SPAN&gt;So, I am afraid that you can use sightly and react together." I guess you meant "you &lt;STRONG&gt;cant&amp;nbsp;&lt;/STRONG&gt;use sightly and react components together"?&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;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.&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;Thanks&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
      <pubDate>Wed, 22 Jun 2022 15:34:07 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457514#M34256</guid>
      <dc:creator>remakj</dc:creator>
      <dc:date>2022-06-22T15:34:07Z</dc:date>
    </item>
    <item>
      <title>Re: Mixing React and Sightly components in a page</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457515#M34257</link>
      <description>&lt;P&gt;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.&lt;/P&gt;</description>
      <pubDate>Wed, 22 Jun 2022 15:43:07 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/mixing-react-and-sightly-components-in-a-page/m-p/457515#M34257</guid>
      <dc:creator>remakj</dc:creator>
      <dc:date>2022-06-22T15:43:07Z</dc:date>
    </item>
  </channel>
</rss>

