In this post, we’ll see how to add React Apps to WordPress. It’s meant for small React apps that won’t conflict too much with WordPress. One such example is a React Snackbar component that I added to this blog post.
Example React App
As an example, we’ll include a React calculator App in this post (shown below).
Based on your project configuration, your React app will generate different output files that will need to be included to your WordPress page or blog post.
In general, a React app requires the following elements:
- A HTML element that contains the App. Usually, it’s a
divelement. - JS files (scripts).
- CSS styling files.
- (Optional) Additional assets (images, fonts, etc).
In this tutorial, we’ll see how to add all of these elements except for additional assets.
HTML entry point
Let’s assume our project has the following folder structure.
.
└── src
├── components
│ └── ...
├── index.js
└── ...
Here, index.js is what’s known as the entry point. It’s the first file that bundlers such as webpack analyze in order to generate the output files for the whole app.
This file calls the ReactDOM.render function, which instructs React to render all of its components into the HTML element that is passed as the 2nd argument. For the code snippet below, that’s an HTML element with id react-calculator-root (it’s up to us to choose the id).
// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<App />,
document.getElementById("react-calculator-root")
);
That means that our WordPress page must have an HTML element with this id so that React renders its components into it.
If you’re using a WordPress editor such as Gutenberg, all you need to do is add a custom HTML block with the following contents.
<div id="react-calculator-root"></div>
Adding scripts and styles
React relies heavily on JavaScript and the styling of the app will be added as CSS classes. They usually come in the form of external js and css files, respectively.
First, we need to generate our React app output files. This is usually done by running npm run build. It will write the project output files to the dist or build folder. Let’s assume our generated output files are the following.
./dist ├── calculator.css ├── calculator.js └── index.html
That means our WordPress page must somehow include calculator.css and calculator.js.
Adding scripts and CSS files to an HTML document is straightforward. All we need to do is add script and link tags. Unfortunately, WordPress does not allow to directly manipulate the head tag of the HTML source code.
To address this issue, we’ll need to use WordPress plugins. There are many of them that can be used to modify the head tag (to add additional link tags) and add script tags to the body of your document.
Our resulting WordPress HTML page should have the following structure. See that the CSS files are added to the head tag and the scriptis added to the bottom of the body tag. The link tag can be added directly to the body if you can’t add it to the head.
<!doctype html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="calculator.css">
</head>
<body>
...
<script src="calculator.js"></script>
</body>
</html>
Note that you might need to specify a specific path to your CSS and JS files. For example, maybe your WordPress site serves these files from the /static/ folder. In that case, the paths would be set to:
<head> ... <link rel="stylesheet" href="/static/calculator.css"> <body> ... <script src="/static/calculator.js"></script>
In most cases you don’t need to worry about the specific path as the plugin will take care of it.
For this example, I used wp-coder. It allows to create “blocks” with associated HTML, JS and CSS contents. I just had to copy the contents of calculator.js and calculator.css to the corresponding JS and CSS blocks of the plugin. When the “block” is added to the WordPress page, the associated JS and CSS files are included as script and link tags in the body of the page.
Inline HTML scripts
Besides external CSS and JS files, tools such as create-react-app also generate inline script tags that need to be added to the HTML source code of your WordPress page.
To verify this, check the index.html file in the distfolder. You will know if inline scripts were added because you’ll see minified JS code in the body of the file.
<!-- index.html -->
...
<script>!function(e){function r(r){for(var n,a,l=r[0],f=r[1],i=r[2],p=0,s=[];p<l.length;p++)a=l[...
In this case, these inline scripts also need to be added to the HTML of your WordPress page. You can do so by copying the contents of the <script> tag (including the the opening and closing tags) to a custom HTML Gutenberg block.
If you’re using the wp-coder plugin (or a similar one), you can directly add the inline script to your custom HTML block.
Following all of the steps above, your React app should be loaded to your WordPress page. You may need a bit of trial and error until you find a WordPress plugin that lets you add the script and link tags. Like I mentioned, wp-coder did the trick for me.
You might also need to tweak the output of your React project a little bit in order to accommodate to your needs and the characteristics of your WordPress page. For that purpose, I recommend using webpack instead of create-react-app. It requires more setup and configuration, but you’ll have much more control over your project. You can check this blog post for an example setup or go through their getting started guide for a more in-depth introduction.