Embedding a React Application to Wordpress post

Take advantage of the shortcode for easy embed React app to post.

Now let me introduce you to my little mission. When I redrawed this blog, I wanted to use some of the myths of applications that are created in React. Ok, but how do I embed React in to wordpress post?

What about shortcode like this?

[reactapp
  js="/static/js/main.7c7bc805.js"
  css="/static/css/main.587e14b5.css"
]

I wanted to insert the post directly into the post because sometimes something changes and I want to have an immediate overview of the status of the code without having to interfere with templates, HTML or PHP code.

Insert the code directly into template or PHP is recommended only where you can insert it once. For example, if you want to paste the Google Analytics code. It’s not too user friendly and not everyone is a programmer who can do this without a problem.

Ok, a shortcode is appropriate for the post. I have prepared a simple plugin for Worpress to embedding React application that uses a shortcode to insert it into the desired location with the code to run the React application.

What you need before you start.

1) Setup your React application.

Edit package.json and setup “homepage” parameter.

{
  "name": "publicalbum-embed-player",
  "version": "0.1.0",
  "homepage": "https://www.publicalbum.org/webapp/embed-player",
  "dependencies": {}
  ...
}

Edit your webpack config and set runtimeChunk="false".
This plugin can not insert a separated code!

2) Build app and upload to specific directory on server

The application must be in a public folder and available in the browser.

3) Install plugin

To make it work, it needs to install WordPress Embed React app plugin in following link: https://wordpress.org/plugins/embed-react-application/.

Let’s embedding

If you are ready, now insert the shortcode into your post using the following example:

[reactapp id="root"
  js="/static/js/main.7c7bc805.js"
  css="/static/css/main.587e14b5.css"
]

or for React with runtimeChunk (supported in ver. 1.0.1):

[reactapp id="root"
  "/static/js/1.60de8a0a.chunk.js" "/static/js/main.c8033d1a.js
  "/static/css/main.587e14b5.css"
]

That is all. I hope that this simple plug-in will help you make it easier for you to insert React applications into your blog.

Embedding a React Application to WordPress post