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) Set the homepage of 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": {}
  ...
}
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"
]

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.

Leave a Reply

Your email address will not be published. Required fields are marked *