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.

Create React App

In plugin dir (from cmd line) run:

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:

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:

In the root dir of the react app run:

npm install rewire

in package.json

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

3 thoughts on “Create a WordPress plugin that uses a React App”

  1. This was generally helpful – so thank you for pulling this together.

    A couple of minor issues that I had to resolve before it would all run well…

    In the PHP script, your code snippet has displayed ie using > instead … config.plugins[5].options.moduleFilename = () => ‘static/css/all_in_one_file.css’

    Finally, you state ‘npm install wire’…

    Should that be npm install rewire? I went for the latter based on https://mtm.dev/disable-code-splitting-create-react-app

    Hope that helps!

    Thanks again,

    Bob

    Reply
  2. In short, what I was attempting to say was…

    1) Thank you

    2) Check the rendering of your php tags and your arrow function in your code snippets – they don’t copy correctly for me!

    3) Should that be npm install rewire?

    Phew!

    Bob

    Reply
    • hi Bob

      glad you found it useful 🙂

      2) there’s a plugin I’m using to output the code snippets and it messes with the greater than / less than tags ( will get around to fixing it at some point …)

      3) you’re absolutely right, I’ll amend that ( Good spot ! thanks ).

      Louis

      Reply

Leave a Comment