Add React Apps to a WordPress Site

This tutorial will show a quick and dirty way to add a React app to a WordPress website. There are more advanced ways to handle this but this will get you started.

Create a WordPress Plugin

To start with, create a simple WordPress plugin. I will call my folder “react-plugin” and create a file in it called “react-plugin.php”.

At the top of the PHP file, add a Plugin Header comment like this…

<?php
/**
 * Plugin Name:       React Plugin
 * Plugin URI:        https://github.com/jtleathers/react-plugin/
 * Description:       Add simple React apps to WordPress websites.
 * Version:           1.0.0
 * Requires at least: 5.8
 * Requires PHP:      7.4
 * Author:            Jonathon Leathers
 * Author URI:        https://jonathonleathers.com/
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

You can now Activate that plugin on your WordPress website. We will come back to this plugin shortly.

Create a React App

Note: If you already have an existing React app you want to use, skip to the next section.

The rest of tutorial will use this Crossword app.

Navigate to where you want to install the app on your computer and run the following command in your terminal on that folder:

npx create-react-app crossword-app

Navigate to the newly created “crossword-app” folder in your terminal and run the following command:

npm start

Once you verify React installed properly, stop that in the terminal and run the following command to install React Router Dom:

npm install --save react-router-dom

Run the following command to install the crossword app:

npm install --save @jaredreisinger/react-crossword

Open the “App.js” file in the “src” folder. Delete everything in that file and paste in the following code:

import React from "react";
import { Component } from "react";
import Crossword from '@jaredreisinger/react-crossword';
import "./App.css";
const data = {
  across: {
    1: {
      clue: "abbreviated programming language",
      answer: "JS",
      row: 1,
      col: 6
    },
    2: {
      clue: "JS library for building UIs",
      answer: "REACT",
      row: 3,
      col: 6
    },
    3: {
      clue: "DOM bindings for React Router",
      answer: "ROUTERDOM",
      row: 5,
      col: 0
    },
    4: {
      clue: "JS runtime environment",
      answer: "NODE",
      row: 10,
      col: 2
    },
  },
  down: {
    5: {
      clue: "content management system",
      answer: "WORDPRESS",
      row: 0,
      col: 0
    },
    6: {
      clue: "enable config override",
      answer: "REWIRED",
      row: 4,
      col: 4
    },
    7: {
      clue: "crossword creator",
      answer: "JARED",
      row: 1,
      col: 6
    },
    8: {
      clue: "online publishing platform",
      answer: "MEDIUM",
      row: 5,
      col: 8
    },
    9: {
      clue: "favourite code editor",
      answer: "ATOM",
      row: 2,
      col: 10
    },
  }
};
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Crossword data={data} />
        </header>{" "}
      </div>
    );
  }
}
export default App;

Run the following command:

npm start

You should now see the crossword show up in your browser. If you only see the clues, edit “App.css” in the “src” folder and remove display: flex; on line 19.

Edit your React App’s package.json File

Edit the “package.json” file in your React app to change the “homepage” value.

You will set this value to the URL path of where you intend to host your React app. In our case, that will be within the plugin folder we created. Since our WordPress plugin will be built to run multiple React apps, we will create subfolders for each app in the plugin.

This tutorial will use the crossword app so I am eventually going to name that sub-folder “crossword”.

Based on this, I know the end of my URL will be: /wp-content/plugins/react-plugin/crossword/

The first part of your URL will depend on your environment and your WordPress installation’s folder name. If you are working locally with MAMP, it may look something like this:

http://localhost:8888/my-site/wp-content/plugins/react-plugin/crossword/

If you are working on a live server it may look something like this:

https://example.com/wp-content/plugins/react-plugin/crossword/

Once you have determined your URL, paste that in as the value of “homepage” in the package.json file. Mine looks like this:

"homepage": "http://localhost/capstone-testing/wp-content/plugins/react-plugin/crossword/",

Note: If you are working locally but eventually will move this site to a live server, you will have to come back and change this value in the future to your live URL and re-build your React app.

Change the “root” ID in your React app

Open the “index.html” file in the “public” folder of the React app.

Change the ID of “root” to “crossword”.

Open the “index.js” file in the “src” folder.

Change the ID in the element selector from “root” to “crossword”.

Note: We do this so you can run multiple React apps on the same page and avoid ID conflicts. If you were doing this process with a different app, simply choose a new unique ID.

Install react-app-rewired

Within your React app, open the terminal and run the following command:

npm install react-app-rewired --save-dev

In the root folder of your React app, create a file called “config-overrides.js”. Paste the following code into that file:

module.exports = function override(config, env) {
  config.optimization.splitChunks = {
    cacheGroups: {
      default: false,
    },
  };
config.optimization.runtimeChunk = false;
  return config;
}

Save that file and then edit “package.json” again. Change the values of “start”, “build”, and “test” to match the code below:

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",

Build the app by running the following in the terminal:

npm run build

Note: This section of tasks prevents React from creating chunked JS files and only creates one JS file now, which makes it easier to enqueue that file in WordPress.

Finish the WordPress Plugin

Copy the “build” folder from your React app into the “react-plugin” folder we created in our WordPress installation.

Rename the copied folder from “build” to “crossword”.

Note: The folder name needs to match the end of the URL you added to the “homepage” value in the “package.json” file. You can put multiple “build” folders for different React apps into this same plugin as long as you rename them.

Inside the “crossword” folder, open the “static” sub-folder, and then the “js” sub-folder.

There will only be one JavaScript file that begins with the word “main” in that folder. It will look something like this: main.1c04b8e4.js. Copy the filename of that JavaScript file.

Edit the “react-plugin.php” file to register that JavaScript file for WordPress. The code below can be copied and pasted and only the file name needs to be changed.

function react_plugin_scripts() {
    wp_register_script( 'crossword-app', plugins_url( '/crossword/static/js/main.1c04b8e4.js', __FILE__ ), array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'react_plugin_scripts' );

If your app includes some CSS, you can look for the file name in the “css” folder then add the code to register that CSS file in the wrapper function shown above.

wp_register_style( 'crossword-app-styles', plugins_url( '/crossword/static/css/main.7f846e7f.css', __FILE__ ), array(), '1.0.0' );

Note: If you are going to run multiple React apps through this plugin, you can add one wp_register_script and one wp_register_style for each React app’s JS file and CSS file. Also, if you ever re-build your React app and copy those files into the WordPress plugin, the file names will change and will need to be updated here.

Create a shortcode to output the React app within any WordPress Page, Post or template file. The code below can be copied and pasted.

function crossword_app( $atts ) {
    ob_start(); ?>
    <noscript>You need to enable JavaScript to view this page.</noscript>
    <div id="crossword"></div>
    <?php
    $html = ob_get_clean();
    wp_enqueue_script( 'crossword-app' );
    wp_enqueue_style( 'crossword-app-styles' );
    return $html;
}
add_shortcode( 'react-crossword', 'crossword_app' );

Note: If you are adding multiple React apps with this plugin, you can create a new shortcode function for each React app. You will need to rename the function, rename the shortcode, update the ID value, and update the enqueue script handle.

Test the React App

At this point you should be able to run that shortcode and see the React App load on the front-end of the WordPress site.

To use our example, open any Page or Post in your WordPress site and add the following shortcode to the Block Editor:

[react-crossword]

If it worked, you should see the crossword puzzle appear on that Page or Post.

Final Thoughts

As I mentioned, this is a quick and dirty way of handling this. It does require editing multiple files and re-building the app when moving from a local to a live environment but it gets the job done if that is not a major concern.

You can also use react-app-rewired and the “config-overrides.js” file to tell React to create the JS and CSS build files with the same name always to partially simplify this process.

Credit: https://betterprogramming.pub/how-to-embed-react-apps-in-wordpress-sites-96a21b995290