{"id":89684,"date":"2018-08-09T14:28:23","date_gmt":"2018-08-09T14:28:23","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/embed-react-application\/"},"modified":"2019-02-26T16:21:18","modified_gmt":"2019-02-26T16:21:18","slug":"embed-react-application","status":"publish","type":"plugin","link":"https:\/\/lt.wordpress.org\/plugins\/embed-react-application\/","author":16009195,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.1","stable_tag":"trunk","tested":"5.1.22","requires":"4.0","requires_php":"","requires_plugins":"","header_name":"Embed React app","header_author":"pavex@ines.cz","header_description":"Embed your React application in to site","assets_banners_color":"","last_updated":"2019-02-26 16:21:18","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post","header_author_uri":"https:\/\/www.publicalbum.org\/","rating":4.8,"author_block_rating":0,"active_installs":200,"downloads":5190,"num_ratings":5,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description"],"tags":[],"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":1,"5":4},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":"1922342","resolution":"128x128","location":"assets"},"icon-256x256.png":{"filename":"icon-256x256.png","revision":"1922342","resolution":"256x256","location":"assets"}},"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":[],"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[230,52651,160306],"plugin_category":[56],"plugin_contributors":[154203],"plugin_business_model":[],"class_list":["post-89684","plugin","type-plugin","status-publish","hentry","plugin_tags-embed","plugin_tags-react","plugin_tags-reactapp","plugin_category-social-and-sharing","plugin_contributors-pavex","plugin_committers-pavex"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/embed-react-application\/assets\/icon-128x128.png?rev=1922342","icon_2x":"https:\/\/ps.w.org\/embed-react-application\/assets\/icon-256x256.png?rev=1922342","generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p>This is a simple way how to embed react application in to your post. In my blog, a wanted include small application, but typical react app is a single page app, hardly linked in index.html. He needed a simple way to solve it. The result is visible on my blog, for example: <a href=\"https:\/\/www.publicalbum.org\/blog\/embedding-google-photos-albums\">Embeding Google Photos album<\/a>.<\/p>\n\n<h3>How to do it<\/h3>\n\n<p>You need compiled React app hosted on public url. Find filenames after building an application. If you using create-ract-app script, all what you need, find in \"static\" directory. Assemble file names into a shortcode like this:<\/p>\n\n<pre><code>[reactapp id=\"root\" js=\"pathto\/static\/js\/main.000000.js\" css=\"pathto\/static\/css\/main.000000.css\"]\n[reactapp id=\"custom_id\" \"pathto\/static\/js\/main.000000.js\" \"pathto\/static\/css\/main.000000.css\" \"pathto\/static\/css\/another.css\"]\n<\/code><\/pre>\n\n<ul>\n<li>id - ID of application root element<\/li>\n<li>js[n] - path to Java script bundle<\/li>\n<li>css[n] - path to Stylesheet<\/li>\n<li>(files are detected automaticly by extension js\/css)<\/li>\n<\/ul>\n\n<p>That's all.\nWhen application was updated, you must setup new links to shortcode.\nIf you want to more information about this plugin, you may visit <a href=\"https:\/\/www.publicalbum.org\/blog\/embedding-react-app-wordpress-post\">Embedding a React Application to WordPress post<\/a> post in my blog.<\/p>\n\n<h4>1.0.1<\/h4>\n\n<p><em>Release Date - 18 January 2019<\/em><\/p>\n\n<ul>\n<li>Multiple script insert for new react build compatibility.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>React application shortcode.<\/li>\n<\/ul>","raw_excerpt":"Embed React application into your Wordpress post.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/lt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/89684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/lt.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/lt.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=89684"}],"author":[{"embeddable":true,"href":"https:\/\/lt.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/pavex"}],"wp:attachment":[{"href":"https:\/\/lt.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=89684"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/lt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=89684"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/lt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=89684"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/lt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=89684"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/lt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=89684"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/lt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=89684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}