{"id":64885,"date":"2018-11-08T05:37:22","date_gmt":"2018-11-08T05:37:22","guid":{"rendered":"https:\/\/jsforwp.dbemyj3z-liquidwebsites.com\/?p=64885"},"modified":"2018-12-24T02:06:40","modified_gmt":"2018-12-24T02:06:40","slug":"enqueue-react-in-wordpress","status":"publish","type":"post","link":"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/","title":{"rendered":"How to Enqueue React in A WordPress Theme or Plugin"},"content":{"rendered":"

Starting with\u00a0WordPress 5.0, React is made available as a dependency we can load in our\u00a0WordPress themes and plugins.<\/p>\n

In\u00a0WordPress, React is abstracted into a library called Element<\/p><\/blockquote>\n

When we make the Element (React) library available, WordPress will load React into the global window object as window.wp.element<\/code>.\u00a0 This is a little different from how we would normally make React a dependency in our project.\u00a0 In\u00a0WordPress, we will access React via the global window object.<\/p>\n

NOTE: Before getting into how this is done, make sure that you have the proper babel and build configurations setup to be able to process the React and JSX code you will write.<\/em><\/p>\n

Making React a Dependency in a Theme<\/h2>\n

Making React available in a theme is as easy as adding wp-element<\/code> as a dependency to our\u00a0JavaScript files enqueued with the normal wp_enqueue_scripts<\/code> hook.<\/p>\n

add_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );\nfunction my_enqueue_theme_js() {\n\n\twp_enqueue_script(\n\t  'my-theme-frontend',\n\t  get_stylesheet_directory_uri() . '\/js\/theme.js',\n\t  ['wp-element'],\n\t  time(), \/\/ Change this to null for production\n\t  true\n\t);\n\n}\n<\/code><\/pre>\n
Once we do this we will have window.wp.element<\/code> available in our\u00a0JavaScript.\u00a0 This contains the ReactDOM render()<\/code> function as well as createElement()<\/code> if you wanted to write React without JSX.<\/p>\n
So, we could write something like this in our theme.js<\/code> file we enqueued above.<\/p>\n
const Hello = () => <p>Hello World<\/p>;\nwp.element.render(<Hello \/>, document.getElementById("content") );\n<\/code><\/pre>\n
This wouldn’t do much.\u00a0 It would display Hello World inside of any markup in our theme with an ID of content.\u00a0 For your theme you will need to make sure you have the correct HTML element selected to render your React code into.<\/p>\n
However, you now have React loaded and can write React now just like you would outside of WordPress.<\/p>\n
Making React a Dependency in a Plugin<\/h2>\n
The code we use for making React available in a plugin is quite similar to the theme.\u00a0 We simply, make wp-element<\/code> a dependency for our plugin\u00a0JavaScript.<\/p>\n
The code below shows how to make React available on both the frontend and in the admin area for a plugin.<\/p>\n
add_action( 'wp_enqueue_scripts', 'my_enqueue_plugin_js' ); \/\/ Loads on frontend\nadd_action( 'admin_enqueue_scripts', 'my_enqueue_plugin_js' ); \/\/ Loads in admin area\n\nfunction my_enqueue_plugin_js() {\n\n\twp_enqueue_script(\n\t  'my-plugin-frontend',\n\t  plugin_dir_url( __FILE__ ) . 'js\/plugin.js',\n\t  ['wp-element'],\n\t  time(), \/\/ Change this to null for production\n\t  true\n\t);\n\n}\n<\/code><\/pre>\n
This would allow us to have access to the ReactDOM render() method just like in the theming example.\u00a0 You can now add very simple or quite complex\u00a0React code in your plugins.<\/p>\n
Here is what that might look like in our plugin.js<\/code> file enqueued above.<\/p>\n
const Hello = () => <p>Hello Plugin React!<\/p>;\nwp.element.render(<Hello \/>, document.getElementById("my-app") );\n<\/code><\/pre>\n
Like this previous example, this would not do much.\u00a0 It would simply find an HTML element with the id my-app<\/code>\u00a0and allow you to render into that whatever React you want to write.<\/p>\n
Using React in Your\u00a0WordPress Themes and Plugins<\/h2>\n
As mentioned, at the beginning of this article, you must have the proper development tools processing your\u00a0JavaScript if you want to write JSX.<\/p>\n
However, once you have that setup, you can easily write simple or advanced React UIs on the frontend of a\u00a0WordPress site via a theme or plugin or in the admin area with your plugins.<\/p>\n","protected":false},"excerpt":{"rendered":"
Starting with\u00a0WordPress 5.0, React is made available as a dependency we can load in our\u00a0WordPress themes and plugins. In\u00a0WordPress, React is abstracted into a library called Element When we make the Element (React) library available, WordPress will load React into the global window object as window.wp.element.\u00a0 This is a little different from how we would […]<\/p>\n","protected":false},"author":4,"featured_media":64928,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","footnotes":""},"categories":[808],"tags":[],"class_list":["post-64885","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial"],"acf":[],"featured_image_urls":{"full":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png",1280,720,false],"thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-150x150.png",150,150,true],"medium":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-300x169.png",300,169,true],"medium_large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-768x432.png",768,432,true],"large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-1024x576.png",1024,576,true],"1536x1536":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png",1280,720,false],"2048x2048":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png",1280,720,false],"course_icon":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-150x150.png",150,150,true],"course_banner":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-500x300.png",500,300,true],"latest-full-width":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png",1280,720,false],"latest-grid-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-600x400.png",600,400,true],"latest-grid-thumb-masonry":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-450x253.png",450,253,true],"latest-woo-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-600x338.png",600,338,true],"latest-nav-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-800x280.png",800,280,true],"latest-mega-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-235x160.png",235,160,true],"latest-fixed-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-65x65.png",65,65,true],"latest-hero":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png",1280,720,false],"latest-single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png",1280,720,false],"latest-hero-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-50x50.png",50,50,true],"latest-logo":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-400x225.png",400,225,true],"woocommerce_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-300x300.png",300,300,true],"woocommerce_single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-600x338.png",600,338,true],"woocommerce_gallery_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-100x100.png",100,100,true]},"post_excerpt_stackable":"
Starting with\u00a0WordPress 5.0, React is made available as a dependency we can load in our\u00a0WordPress themes and plugins. In\u00a0WordPress, React is abstracted into a library called Element When we make the Element (React) library available, WordPress will load React into the global window object as window.wp.element.\u00a0 This is a little different from how we would normally make React a dependency in our project.\u00a0 In\u00a0WordPress, we will access React via the global window object. NOTE: Before getting into how this is done, make sure that you have the proper babel and build configurations setup to be able to process the React…<\/p>\n","category_list":"Tutorial<\/a>","author_info":{"name":"Zac Gordon","url":"https:\/\/javascriptforwp.com\/author\/zgordon\/"},"comments_num":"1 comment","featured_image_urls_v2":{"full":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png",1280,720,false],"thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-150x150.png",150,150,true],"medium":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-300x169.png",300,169,true],"medium_large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-768x432.png",768,432,true],"large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-1024x576.png",1024,576,true],"1536x1536":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png",1280,720,false],"2048x2048":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png",1280,720,false],"course_icon":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-150x150.png",150,150,true],"course_banner":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-500x300.png",500,300,true],"latest-full-width":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png",1280,720,false],"latest-grid-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-600x400.png",600,400,true],"latest-grid-thumb-masonry":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-450x253.png",450,253,true],"latest-woo-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-600x338.png",600,338,true],"latest-nav-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-800x280.png",800,280,true],"latest-mega-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-235x160.png",235,160,true],"latest-fixed-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-65x65.png",65,65,true],"latest-hero":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png",1280,720,false],"latest-single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png",1280,720,false],"latest-hero-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-50x50.png",50,50,true],"latest-logo":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-400x225.png",400,225,true],"woocommerce_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-300x300.png",300,300,true],"woocommerce_single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-600x338.png",600,338,true],"woocommerce_gallery_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React-100x100.png",100,100,true]},"post_excerpt_stackable_v2":"
Starting with\u00a0WordPress 5.0, React is made available as a dependency we can load in our\u00a0WordPress themes and plugins. In\u00a0WordPress, React is abstracted into a library called Element When we make the Element (React) library available, WordPress will load React into the global window object as window.wp.element.\u00a0 This is a little different from how we would normally make React a dependency in our project.\u00a0 In\u00a0WordPress, we will access React via the global window object. NOTE: Before getting into how this is done, make sure that you have the proper babel and build configurations setup to be able to process the React…<\/p>\n","category_list_v2":"Tutorial<\/a>","author_info_v2":{"name":"Zac Gordon","url":"https:\/\/javascriptforwp.com\/author\/zgordon\/"},"comments_num_v2":"1 comment","yoast_head":"\nHow to Enqueue React in A WordPress Theme or Plugin - JavaScript for WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Enqueue React in A WordPress Theme or Plugin - JavaScript for WordPress\" \/>\n<meta property=\"og:description\" content=\"Starting with\u00a0WordPress 5.0, React is made available as a dependency we can load in our\u00a0WordPress themes and plugins. In\u00a0WordPress, React is abstracted into a library called Element When we make the Element (React) library available, WordPress will load React into the global window object as window.wp.element.\u00a0 This is a little different from how we would […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"JavaScript for WordPress\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-08T05:37:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-12-24T02:06:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Zac Gordon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/zgordon\" \/>\n<meta name=\"twitter:site\" content=\"@zgordon\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zac Gordon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/enqueue-react-in-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/enqueue-react-in-wordpress\\\/\"},\"author\":{\"name\":\"Zac Gordon\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/person\\\/76dfb19fbd859b4a17428b8b17767b25\"},\"headline\":\"How to Enqueue React in A WordPress Theme or Plugin\",\"datePublished\":\"2018-11-08T05:37:22+00:00\",\"dateModified\":\"2018-12-24T02:06:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/enqueue-react-in-wordpress\\\/\"},\"wordCount\":447,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/enqueue-react-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/React.png\",\"articleSection\":[\"Tutorial\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/javascriptforwp.com\\\/enqueue-react-in-wordpress\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/enqueue-react-in-wordpress\\\/\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/enqueue-react-in-wordpress\\\/\",\"name\":\"How to Enqueue React in A WordPress Theme or Plugin - JavaScript for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/enqueue-react-in-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/enqueue-react-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/React.png\",\"datePublished\":\"2018-11-08T05:37:22+00:00\",\"dateModified\":\"2018-12-24T02:06:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/enqueue-react-in-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/javascriptforwp.com\\\/enqueue-react-in-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/enqueue-react-in-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/React.png\",\"contentUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/React.png\",\"width\":1280,\"height\":720,\"caption\":\"React in WordPress Logos - How to Add React to WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/enqueue-react-in-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/javascriptforwp.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Enqueue React in A WordPress Theme or Plugin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#website\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/\",\"name\":\"JavaScript for WordPress\",\"description\":\"Tutorials, Courses, Bootcamps and Conferences\",\"publisher\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/javascriptforwp.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\",\"name\":\"JavaScript for WordPress Master Course\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/wapuu-square.png\",\"contentUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/wapuu-square.png\",\"width\":200,\"height\":200,\"caption\":\"JavaScript for WordPress Master Course\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/zgordon\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/person\\\/76dfb19fbd859b4a17428b8b17767b25\",\"name\":\"Zac Gordon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"caption\":\"Zac Gordon\"},\"description\":\"Zac Gordon is a professional educator, with a current focus on JavaScript development with and alongside WordPress. Zac has years of experience teaching at high schools, colleges, bootcamps and online learning sites like Treehouse, Udemy and Frontend Masters.\",\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/zgordon\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/zgordon\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Enqueue React in A WordPress Theme or Plugin - JavaScript for WordPress","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:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Enqueue React in A WordPress Theme or Plugin - JavaScript for WordPress","og_description":"Starting with\u00a0WordPress 5.0, React is made available as a dependency we can load in our\u00a0WordPress themes and plugins. In\u00a0WordPress, React is abstracted into a library called Element When we make the Element (React) library available, WordPress will load React into the global window object as window.wp.element.\u00a0 This is a little different from how we would […]","og_url":"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/","og_site_name":"JavaScript for WordPress","article_published_time":"2018-11-08T05:37:22+00:00","article_modified_time":"2018-12-24T02:06:40+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png","type":"image\/png"}],"author":"Zac Gordon","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/zgordon","twitter_site":"@zgordon","twitter_misc":{"Written by":"Zac Gordon","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/"},"author":{"name":"Zac Gordon","@id":"https:\/\/javascriptforwp.com\/#\/schema\/person\/76dfb19fbd859b4a17428b8b17767b25"},"headline":"How to Enqueue React in A WordPress Theme or Plugin","datePublished":"2018-11-08T05:37:22+00:00","dateModified":"2018-12-24T02:06:40+00:00","mainEntityOfPage":{"@id":"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/"},"wordCount":447,"commentCount":1,"publisher":{"@id":"https:\/\/javascriptforwp.com\/#organization"},"image":{"@id":"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png","articleSection":["Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/","url":"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/","name":"How to Enqueue React in A WordPress Theme or Plugin - JavaScript for WordPress","isPartOf":{"@id":"https:\/\/javascriptforwp.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png","datePublished":"2018-11-08T05:37:22+00:00","dateModified":"2018-12-24T02:06:40+00:00","breadcrumb":{"@id":"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/#primaryimage","url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png","contentUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2018\/11\/React.png","width":1280,"height":720,"caption":"React in WordPress Logos - How to Add React to WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/javascriptforwp.com\/enqueue-react-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascriptforwp.com\/"},{"@type":"ListItem","position":2,"name":"How to Enqueue React in A WordPress Theme or Plugin"}]},{"@type":"WebSite","@id":"https:\/\/javascriptforwp.com\/#website","url":"https:\/\/javascriptforwp.com\/","name":"JavaScript for WordPress","description":"Tutorials, Courses, Bootcamps and Conferences","publisher":{"@id":"https:\/\/javascriptforwp.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/javascriptforwp.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/javascriptforwp.com\/#organization","name":"JavaScript for WordPress Master Course","url":"https:\/\/javascriptforwp.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascriptforwp.com\/#\/schema\/logo\/image\/","url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2016\/03\/wapuu-square.png","contentUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2016\/03\/wapuu-square.png","width":200,"height":200,"caption":"JavaScript for WordPress Master Course"},"image":{"@id":"https:\/\/javascriptforwp.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/zgordon"]},{"@type":"Person","@id":"https:\/\/javascriptforwp.com\/#\/schema\/person\/76dfb19fbd859b4a17428b8b17767b25","name":"Zac Gordon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","caption":"Zac Gordon"},"description":"Zac Gordon is a professional educator, with a current focus on JavaScript development with and alongside WordPress. Zac has years of experience teaching at high schools, colleges, bootcamps and online learning sites like Treehouse, Udemy and Frontend Masters.","sameAs":["https:\/\/twitter.com\/zgordon","https:\/\/x.com\/https:\/\/twitter.com\/zgordon"]}]}},"_links":{"self":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts\/64885","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/comments?post=64885"}],"version-history":[{"count":0,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts\/64885\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/media\/64928"}],"wp:attachment":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/media?parent=64885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/categories?post=64885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/tags?post=64885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}