{"id":61,"date":"2018-09-23T14:34:45","date_gmt":"2018-09-23T14:34:45","guid":{"rendered":"https:\/\/www.publicalbum.org\/blog\/?p=61"},"modified":"2020-08-25T06:55:07","modified_gmt":"2020-08-25T06:55:07","slug":"embedding-react-app-wordpress-post","status":"publish","type":"post","link":"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post","title":{"rendered":"Embedding a React Application to WordPress post"},"content":{"rendered":"

Take advantage of the shortcode<\/em> for easy embed React app to post.<\/h2>\n

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<\/strong> post?<\/p>\n

What about shortcode<\/em> like this?<\/p>\n

[reactapp\n  js=\"\/static\/js\/main.7c7bc805.js\"\n  css=\"\/static\/css\/main.587e14b5.css\"\n]<\/pre>\n
<\/p>\n
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.<\/p>\n
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.<\/p>\n
Ok, a shortcode<\/em> is appropriate for the post. I have prepared a simple plugin for Worpress to embedding React application<\/strong> that uses a shortcode<\/em> to insert it into the desired location with the code to run the React application.<\/p>\n
What you need before you start.<\/h3>\n
1) Setup your React application.<\/h6>\n
Edit package.json<\/strong> and setup “homepage” parameter.<\/p>\n
{\n  \"name\": \"publicalbum-embed-player\",\n  \"version\": \"0.1.0\",\n  \"homepage\": \"https:\/\/www.publicalbum.org\/webapp\/embed-player\",\n  \"dependencies\": {}\n  ...\n}<\/pre>\n
Edit your webpack config and set runtimeChunk=\"false\"<\/code>.
\nThis plugin can not insert a separated code!<\/strong><\/p>\n
2) Build app and upload to specific directory on server<\/h6>\n
The application must be in a public folder and available in the browser.<\/p>\n
3) Install plugin<\/h6>\n
To make it work, it needs to install WordPress Embed React app<\/strong><\/a> plugin in following link: https:\/\/wordpress.org\/plugins\/embed-react-application\/<\/a>.<\/p>\n
Let’s embedding<\/h3>\n
If you are ready, now insert the shortcode<\/em> into your post using the following example:<\/p>\n
[reactapp id=\"root\"\n  js=\"\/static\/js\/main.7c7bc805.js\"\n  css=\"\/static\/css\/main.587e14b5.css\"\n]<\/pre>\n
or for React with runtimeChunk<\/code> (supported in ver. 1.0.1)<\/em>:<\/p>\n
[reactapp id=\"root\"\n  \"\/static\/js\/1.60de8a0a.chunk.js\" \"\/static\/js\/main.c8033d1a.js\n  \"\/static\/css\/main.587e14b5.css\"\n]<\/pre>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading “Embedding a React Application to WordPress post”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-61","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"yoast_head":"\nEmbedding a React Application to Wordpress post - Public album .org<\/title>\n<meta name=\"description\" content=\"Shortcode is appropriate for the post. I have prepared a simple plugin for Worpress to embedding React application that uses a shortcode to insert.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embedding a React Application to Wordpress post - Public album .org\" \/>\n<meta property=\"og:description\" content=\"Shortcode is appropriate for the post. I have prepared a simple plugin for Worpress to embedding React application that uses a shortcode to insert.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post\" \/>\n<meta property=\"og:site_name\" content=\"Public album .org\" \/>\n<meta property=\"article:published_time\" content=\"2018-09-23T14:34:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-25T06:55:07+00:00\" \/>\n<meta name=\"author\" content=\"Pavex\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pavex\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post\",\"url\":\"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post\",\"name\":\"Embedding a React Application to Wordpress post - Public album .org\",\"isPartOf\":{\"@id\":\"https:\/\/www.publicalbum.org\/blog\/#website\"},\"datePublished\":\"2018-09-23T14:34:45+00:00\",\"dateModified\":\"2020-08-25T06:55:07+00:00\",\"author\":{\"@id\":\"https:\/\/www.publicalbum.org\/blog\/#\/schema\/person\/1415f3e82b03ca14f8aa2f18468a5b87\"},\"description\":\"Shortcode is appropriate for the post. I have prepared a simple plugin for Worpress to embedding React application that uses a shortcode to insert.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.publicalbum.org\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Embedding a React Application to WordPress post\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.publicalbum.org\/blog\/#website\",\"url\":\"https:\/\/www.publicalbum.org\/blog\/\",\"name\":\"Public album .org\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.publicalbum.org\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.publicalbum.org\/blog\/#\/schema\/person\/1415f3e82b03ca14f8aa2f18468a5b87\",\"name\":\"Pavex\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.publicalbum.org\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e47c6671479e0609362ab70337cfac20?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e47c6671479e0609362ab70337cfac20?s=96&d=mm&r=g\",\"caption\":\"Pavex\"},\"url\":\"https:\/\/www.publicalbum.org\/blog\/author\/pavex\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Embedding a React Application to Wordpress post - Public album .org","description":"Shortcode is appropriate for the post. I have prepared a simple plugin for Worpress to embedding React application that uses a shortcode to insert.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post","og_locale":"en_US","og_type":"article","og_title":"Embedding a React Application to Wordpress post - Public album .org","og_description":"Shortcode is appropriate for the post. I have prepared a simple plugin for Worpress to embedding React application that uses a shortcode to insert.","og_url":"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post","og_site_name":"Public album .org","article_published_time":"2018-09-23T14:34:45+00:00","article_modified_time":"2020-08-25T06:55:07+00:00","author":"Pavex","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pavex","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post","url":"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post","name":"Embedding a React Application to Wordpress post - Public album .org","isPartOf":{"@id":"https:\/\/www.publicalbum.org\/blog\/#website"},"datePublished":"2018-09-23T14:34:45+00:00","dateModified":"2020-08-25T06:55:07+00:00","author":{"@id":"https:\/\/www.publicalbum.org\/blog\/#\/schema\/person\/1415f3e82b03ca14f8aa2f18468a5b87"},"description":"Shortcode is appropriate for the post. I have prepared a simple plugin for Worpress to embedding React application that uses a shortcode to insert.","breadcrumb":{"@id":"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.publicalbum.org\/blog"},{"@type":"ListItem","position":2,"name":"Embedding a React Application to WordPress post"}]},{"@type":"WebSite","@id":"https:\/\/www.publicalbum.org\/blog\/#website","url":"https:\/\/www.publicalbum.org\/blog\/","name":"Public album .org","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.publicalbum.org\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.publicalbum.org\/blog\/#\/schema\/person\/1415f3e82b03ca14f8aa2f18468a5b87","name":"Pavex","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.publicalbum.org\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e47c6671479e0609362ab70337cfac20?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e47c6671479e0609362ab70337cfac20?s=96&d=mm&r=g","caption":"Pavex"},"url":"https:\/\/www.publicalbum.org\/blog\/author\/pavex"}]}},"_links":{"self":[{"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/posts\/61"}],"collection":[{"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":17,"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/posts\/61\/revisions"}],"predecessor-version":[{"id":1050,"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/posts\/61\/revisions\/1050"}],"wp:attachment":[{"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/media?parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/categories?post=61"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.publicalbum.org\/blog\/wp-json\/wp\/v2\/tags?post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}