WordPress + Create React App Integration

Ben Broide
May 29, 2020 · 6 min read

Why WordPress & React?

The last few years have revealed a trend of improved UI development in the WordPress environment with Frontend frameworks such as React and Vue. Bear that in mind when you see a React error in the console of your website. The source of the error may be a React-app 3rd party plugin and not your own development efforts!

React WordPress Headless Content vs. a React App in an Existing WordPress Page

You may have read about WordPress & React headless projects that enable a website to render as a React app from WordPress API endpoints. That process should not be confused with the subject of this article. Here we focus on rendering a React Create App inside a specific WordPress page in the WordPress admin or the site frontend. For this demo, we “take over” a div that already is defined inside a page.

  1. Adding a div with a selector that we can match to the app root selector to render within. (However, we can skip this step if we hijack an existing div as we do in this demo).

Custom Code in Plugin vs. Theme

We can add functionality to our WordPress installation in 1 of 2 ways:

  1. Write a custom plugin.

Creating a WordPress Plugin

Lets run this lines it our Terminal:

Ensure Plugin Loaded

Before moving on, let’s ensure that the plugin’s screen for the plugin we created was activated on our dashboard.

Locate App Root Selector

Let’s start by loading the React App on the main dashboard page in the WordPress admin panel.

Locating the React App Files

React app outputs the assets CSS and JavaScript files in chunks in the build/assets/jsand build/assets/css folders. As we can see in the build folder, we have assets chunks files with random names.

Task Summary:

  1. We now we want to load the `entryload` files from the react-app/build/asset-manifest.json file.
  2. Set our React App to load in `#wpbody .wrap` in the WordPress main dashboard page.

Modify the Plugin files

React-Plugin.php

Loading the App in Front End

For this demo, we will load the app it the footer of the site’s homepage.

  1. The condition to check if we are in the correct page is the is_front_end()WordPress helper function, instead of the admin hook we used to check current admin screen in WordPress dashboard.
  2. We will update the selector in main.js to the correct app root selector #site-footer

Introducing Class Plugin

Since we may want to reuse this concept in different sites with minimal changes to the code, we can wrap everything in one class with parameters. This class will now load the React app on the frontend home page and the main WordPress admin page.

  1. It is simpler to reuse the same class to load code in the frontend and the WordPress admin.
  • The “WordPress way” for fetching the files would be wp_remote_get. We used here file_get_contents for keeping the demo simple.

The Startup

Get smarter at building your thing. Join The Startup’s +800K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store