WordPress + Create React App Integration

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 has long been a go-to for 3rd party plugins, for example, Yoast’s SEO plugin renders widgets in WordPress admin pages with a React App. Now, the ability to develop React apps in WordPress has been eased with the launch of Gutenberg. The Gutenberg block editor has React at its core.

This article will walk through how you can add a separate React Create App into your WordPress site, not about Gutenberg React blocks.

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.

So, how does a typical React-App-deployment setup compare to a React App embedded into WordPress? In a common app, the server will serve an index.html file from the “build” folder, which contains a script tag to load the app JavaScript bundle. However, inside the WordPress environment, the HTML is generated dynamically from PHP files.

That requires two steps to create a typical WordPress & React integration:

1. Adding a script tag to the HTML for loading the application’s JavaScript files.
2. 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. Add the code to a child theme (or the main theme if we maintain it).
2. Write a custom plugin.

In this article, we will create a custom plugin. However, this concept could be applied to customize a theme, as well.

Creating a WordPress Plugin

Lets run this lines it our Terminal:

The plugin folder structure should look similar to the image below after the React plugin and React App creation and build have completed.

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.

The selector '#wpbody .wrap’ will place the app in your dashboard and replace the default WordPress widgets.

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.

This creates challenges such as, how can we load the correct asset files if each build’s names may change? Would we need to update after each build with the names of the new assets files?

One way around this is by disabling code splitting by modifying the Webpack build settings. This way, we always load one CSS file and one JavaScript file with the names we defined in the Webpack settings.

Since we can get the list of the files from the react-app/build/asset-manifest.jsonfile, we will keep code-splitting on, so we won’t need to change any default Webpack settings.

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

Our code will be added after the `Your code starts here` comment.

Add logic to parse the asset-manifest.json file, loop over the entry files found, and load them in the main page of WordPress admin:

react-app/src/index.js

Modify the file to get the selector root from the window.rpReactPlugin:

react-app/package.json

If we build the app at the stage withyarn build, the app would load, but our image will not. Since the app is looking for the image in the main domain folder instead of the React App folder.

To fix this, we should add inreact-app/package.jsonthe entry :

`homepage`: `/wp-content/plugins/wp-create-react-app-concept/react-app/build`

Now we can run yarn buildand the app should display correctly.

Loading the App in Front End

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

The path will be very similar with a few changes.

1. We load the files inwp_enqueue_scriptshook instead of admin_enqueue_scripts hook we used in WordPress dashboard.
2. 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.
3. We will update the selector in main.js to the correct app root selector #site-footer

After yarn buildwe should see the app in the footer of the main frontend page of the site.

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.

There are two main benefits of wrapping our code in a class plugin:

1. Our code is encapsulated in the class, so we don’t need to add custom prefixes to our function’s names.
2. It is simpler to reuse the same class to load code in the frontend and the WordPress admin.

Notes about the code:

• Code was written in PHP 7.4
• The “WordPress way” for fetching the files would be wp_remote_get. We used here file_get_contents for keeping the demo simple.

Below are listed 3 branches with the 3 code versions. Remember to run yarn && yarn build in the react-app folder to build the bundle.

Github wp-admin function version

https://github.com/BenBroide/wp-create-react-app-concept/tree/function-version-wp-admin

Github front end function version

https://github.com/BenBroide/wp-create-react-app-concept/tree/front-end-function-version

Github Class version

https://github.com/BenBroide/wp-create-react-app-concept/tree/class-plugin