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.
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:
- Adding a script tag to the HTML for loading the application’s JavaScript files.
- 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).
We can add functionality to our WordPress installation in 1 of 2 ways:
- Add the code to a child theme (or the main theme if we maintain it).
- 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.
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.
Before moving on, let’s ensure that the plugin’s screen for the plugin we created was activated on our dashboard.
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.
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:
- We now we want to load the `entryload` files from the
react-app/build/asset-manifest.jsonfile. - Set our React App to load in `
#wpbody .wrap` in the WordPress main dashboard page.
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.
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.
- We load the files in
wp_enqueue_scriptshook instead ofadmin_enqueue_scriptshook we used in WordPress dashboard. - 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. - We will update the selector in
main.jsto 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.
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:
- Our code is encapsulated in the class, so we don’t need to add custom prefixes to our function’s names.
- 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 herefile_get_contentsfor 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
