2 react apps inside a wordpress page

  • Resolved mirecatercero

    (@mirecatercero)


    3 years, 1 month ago

    Hi there,

    First of all, thank you very much for this amazing plugin. It has been very useful to me.

    Do you know if it is possible to show two react components (create-react-app projects) on the same wordpress page?

    For example, one section will be a dynamic carousel and then at the end of the page I want to show a complex multi-step form. I tried to change the id root for the second project and compile the app but it doesn’t work.

    Thoughts?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author rockiger

    (@rockiger)

    3 years, 1 month ago

    This could be possible. But you would need to test it.

    Out off the top of my head, I would say you need to create 2 apps. Assign them to the same page. But you would have to set a second html-tag the second app could attach to.

    Normally, React attaches to the <div id="root"></div>. You would need to add 2 divs.

    <div id="root"></div>
<div id="root2"></div>

    In the second React app this line needs to be edited accordingly:

    const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement // change to 'root2'
);
    Thread Starter mirecatercero

    (@mirecatercero)

    3 years, 1 month ago

    It doesn’t work, the plugin shows a popup with a “Something is wrong” error when I tried to select the same page for the second app.

    Any ideas to fix it?

    Thank you.

    Plugin Author rockiger

    (@rockiger)

    3 years, 1 month ago

    As I said, this was just a guess that could have worked.

    I looked over the relevant code, and ReactPress only adds the necessary JavaScript for one app to the page. If there is more than one app added to a single page, it only shows the first app.
    I’m still debating with myself whether to allow more than one app per page.

    Plugin Author rockiger

    (@rockiger)

    3 years, 1 month ago

    I released a new version. That works as described above. But having 2 apps on one page is nothing I recommend nor officially support. Nonetheless, I got two apps working on one page.

    View post on imgur.com

    I am still not sure that I understand the use case. I hope this helps.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘2 react apps inside a wordpress page’ is closed to new replies.