Create a WordPress plugin that uses a React App

In this post I’ll describe how to create a simple Hello World plugin that gets its content from React.

The WordPress plugin will use a shortcode to generate its content from a React App ( the React App is built / bootstrapped using the Create React App cmd line tool ).

Prerequisite: I will presume you have Node already installed

• Create a WP plugin
• Create a React App within the plugin (using create React app)
• Tweak the React app to make it easy to load in the WordPress plugin ( Shortcode), by disabling code splitting (for the asset files JS and CSS)

Create WP plugin

This will be a very basic plugin one php file, which I’ll pop in a folder in WP plugins dir e.g. [YOUR PATH]/wp-content/plugins/hello_world_react and inside that hello.php.

<?php
/**
 * Plugin Name: Hello World React Plugin
 */

function helloworld_shortcode() {

	return '<div id="hello-world-react" ></div>';
}

add_shortcode('hello-world-react', 'helloworld_shortcode');

function helloworld_load_assets() {
	
	$react_app_js  = plugin_dir_url( __FILE__ ) . 'helloworldreactapp/build/static/js/all_in_one_file.js';
    $react_app_css = plugin_dir_url( __FILE__ ) . 'helloworldreactapp/build/static/css/all_in_one_file.css';	
      
    // time stops stylesheet/js caching while in development, might want to remove later  
    $version = time();	
    wp_enqueue_script( 'hello-world-react', $react_app_js, array(), $version, true );         
    wp_enqueue_style( 'hello-world-react', $react_app_css, array(), $version );
}

add_action( 'wp_enqueue_scripts', 'helloworld_load_assets' );

Create React App

In plugin dir (from cmd line) run:

npx create-react-app helloworldreactapp

e.g. cd to [YOUR PATH]/wp-content/plugins/hello_world_react and run above cmd.

In src/index.js change root to hello-world-react like below:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('hello-world-react')
);

Tweak React app

We’ll make the app spit out one js file and one css file, so its easy to include in the WP plugin.

The next bit is more or less a copy / paste I found here (thanks Mark!) :

https://mtm.dev/disable-code-splitting-create-react-app

in React app first create folder (called scripts) and add an empty js file called build-non-split.js , then paste in the stuff below:

 const rewire = require('rewire')
const defaults = rewire('react-scripts/scripts/build.js') // If you ejected, use this instead: const defaults = rewire('./build.js')
let config = defaults.__get__('config')

config.optimization.splitChunks = {
cacheGroups: {
default: false
}
}

config.optimization.runtimeChunk = false

// Renames main.00455bcf.js to main.js
config.output.filename = 'static/js/all_in_one_file.js'

// Renames main.b100e6da.css to main.css
config.plugins[5].options.filename = 'static/css/somecss.css'
config.plugins[5].options.moduleFilename = () => 'static/css/all_in_one_file.css'

In the root dir of the react app run:

npm install rewire

in package.json

// Change the line from this:
"build": "react-scripts build",
// To this:
"build": "node ./scripts/build-non-split.js",

delete package-lock.json

run:

npm run-script build

Lets run it !

In wordpress admin plugins, activate the plugin.

Next create a page and add this shortcode:

[hello-world-react]

Next visit the page

And you should see the React App

References

https://mtm.dev/disable-code-splitting-create-react-app

https://mikhailroot.ru/react-app-embedded-into-wordpress-page/

https://dev.to/n1ru4l/configure-the-cra-public-url-post-build-with-node-js-and-express-4n8

https://stackoverflow.com/questions/65126062/use-create-react-app-inside-a-wordpress-plugin