How to merge a ReactJS page with a WordPress website

Hey guys. I want to put a page of my ReactJS app inside another WordPress website.

At this moment, we are doing this by redirecting the user between two different urls, but this is something I want to avoid.

How can I place a React page inside a WordPress website without having to throw the user between different domains?

8 Comments
  1. if you use the index.html of your reactpage, how do you intend to use wordpress index.php at the same time?

  2. They likely require two different servers, apache or nginx to support php and node to support react. You can use nginx to create proxies so that they both appear as one server in two separate directories. Your web server will need to be customized, likely ruling out a lot of low cost providers.

  3. Does your react app use a router? Does it render in an element?

    Do you need your wordpress frontend at all? Can you go headless?

  4. Is it a full fledged react app? With routes, API calls etc? Or is it just basic react that spits out an html page? In the former case you may want to use headless WP. If it’s the latter then maybe something like enqueueing your js file and then have a custom blank php WP page.

  5. A) Add the react root element(s) to the index.php, wp_enqueue the react entry point(s).

    B) Look into @wordpress/scripts.

    C) use wp-json endpoints

    But it will likely involve a partial/total rebuild. It is unlikely that there is a simple integration.

  6. The way I would do this is to render the landing pages where you want ReactJS content to appear on your WordPress site as full-fledged ReactJS pages.

    On those pages, grab the WordPress content you want to display using the WordPress REST API. Display that WordPress content in a manner that matches the WordPress theme of your site as closely as possible.

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer