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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?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:
1 | 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:
1 2 3 4 5 6 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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
1 2 3 4 | // 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
Disclaimer: All content on this site, is use at your own risk (Always backup before changing anything in your software/database/servers etc). Techs change, go out of date etc...I/we accept no liability if anything you use on this site adversely affects you.
Recent Comments