{"id":105867,"date":"2019-04-23T20:01:45","date_gmt":"2019-04-23T20:01:45","guid":{"rendered":"https:\/\/jsforwp.dbemyj3z-liquidwebsites.com\/?p=105867"},"modified":"2019-04-23T20:01:46","modified_gmt":"2019-04-23T20:01:46","slug":"how-to-create-an-html-element-in-react-video","status":"publish","type":"post","link":"https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/","title":{"rendered":"How to Create an HTML Element in React [Video]"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">React Explained<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This video is an excerpt from the <a href=\"https:\/\/javascriptforwp.com\/react-book\/\">React Explained Course and Book<\/a> that breaks down how to use React for beginners.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the video we go over how to to use one of the most important functions in React, <code class=\"\" data-line=\"\">createElement()<\/code>.&nbsp; This is an agnostic function that creates a JavaScript object.&nbsp; Later we then use ReactDOM to convert the JavaScript object into valid HTML and add it to the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Checkout the video for more and the <a href=\"https:\/\/github.com\/zgordon\/react-book\">example file repo here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Video<\/h2>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Creating a React Element\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/T2z-swUtIr8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">To Learn More<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To learn more checkout the <a href=\"https:\/\/javascriptforwp.com\/react-book\/\">React Explained Book and Course<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Explained This video is an excerpt from the React Explained Course and Book that breaks down how to use React for beginners. In the video we go over how to to use one of the most important functions in React, createElement().&nbsp; This is an agnostic function that creates a JavaScript object.&nbsp; Later we then [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":105869,"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":[135,806,808],"tags":[],"class_list":["post-105867","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-free-videos","category-react-book","category-tutorial"],"acf":[],"featured_image_urls":{"full":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png",1280,720,false],"thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-150x150.png",150,150,true],"medium":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-300x169.png",300,169,true],"medium_large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-768x432.png",768,432,true],"large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-1024x576.png",1024,576,true],"1536x1536":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png",1280,720,false],"2048x2048":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png",1280,720,false],"course_icon":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-150x150.png",150,150,true],"course_banner":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-500x300.png",500,300,true],"latest-full-width":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png",1280,720,false],"latest-grid-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-600x400.png",600,400,true],"latest-grid-thumb-masonry":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-450x253.png",450,253,true],"latest-woo-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-600x338.png",600,338,true],"latest-nav-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-800x280.png",800,280,true],"latest-mega-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-235x160.png",235,160,true],"latest-fixed-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-65x65.png",65,65,true],"latest-hero":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png",1280,720,false],"latest-single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png",1280,720,false],"latest-hero-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-50x50.png",50,50,true],"latest-logo":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-400x225.png",400,225,true],"woocommerce_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-300x300.png",300,300,true],"woocommerce_single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-600x338.png",600,338,true],"woocommerce_gallery_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-100x100.png",100,100,true]},"post_excerpt_stackable":"<p>React Explained This video is an excerpt from the React Explained Course and Book that breaks down how to use React for beginners. In the video we go over how to to use one of the most important functions in React, createElement().&nbsp; This is an agnostic function that creates a JavaScript object.&nbsp; Later we then use ReactDOM to convert the JavaScript object into valid HTML and add it to the page. Checkout the video for more and the example file repo here. The Video To Learn More To learn more checkout the React Explained Book and Course.<\/p>\n","category_list":"<a href=\"https:\/\/javascriptforwp.com\/category\/free-videos\/\" rel=\"category tag\">Free Videos<\/a>, <a href=\"https:\/\/javascriptforwp.com\/category\/react-book\/\" rel=\"category tag\">React Book<\/a>, <a href=\"https:\/\/javascriptforwp.com\/category\/tutorial\/\" rel=\"category tag\">Tutorial<\/a>","author_info":{"name":"Zac Gordon","url":"https:\/\/javascriptforwp.com\/author\/zgordon\/"},"comments_num":"0 comments","featured_image_urls_v2":{"full":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png",1280,720,false],"thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-150x150.png",150,150,true],"medium":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-300x169.png",300,169,true],"medium_large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-768x432.png",768,432,true],"large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-1024x576.png",1024,576,true],"1536x1536":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png",1280,720,false],"2048x2048":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png",1280,720,false],"course_icon":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-150x150.png",150,150,true],"course_banner":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-500x300.png",500,300,true],"latest-full-width":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png",1280,720,false],"latest-grid-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-600x400.png",600,400,true],"latest-grid-thumb-masonry":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-450x253.png",450,253,true],"latest-woo-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-600x338.png",600,338,true],"latest-nav-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-800x280.png",800,280,true],"latest-mega-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-235x160.png",235,160,true],"latest-fixed-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-65x65.png",65,65,true],"latest-hero":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png",1280,720,false],"latest-single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png",1280,720,false],"latest-hero-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-50x50.png",50,50,true],"latest-logo":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-400x225.png",400,225,true],"woocommerce_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-300x300.png",300,300,true],"woocommerce_single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-600x338.png",600,338,true],"woocommerce_gallery_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained-100x100.png",100,100,true]},"post_excerpt_stackable_v2":"<p>React Explained This video is an excerpt from the React Explained Course and Book that breaks down how to use React for beginners. In the video we go over how to to use one of the most important functions in React, createElement().&nbsp; This is an agnostic function that creates a JavaScript object.&nbsp; Later we then use ReactDOM to convert the JavaScript object into valid HTML and add it to the page. Checkout the video for more and the example file repo here. The Video To Learn More To learn more checkout the React Explained Book and Course.<\/p>\n","category_list_v2":"<a href=\"https:\/\/javascriptforwp.com\/category\/free-videos\/\" rel=\"category tag\">Free Videos<\/a>, <a href=\"https:\/\/javascriptforwp.com\/category\/react-book\/\" rel=\"category tag\">React Book<\/a>, <a href=\"https:\/\/javascriptforwp.com\/category\/tutorial\/\" rel=\"category tag\">Tutorial<\/a>","author_info_v2":{"name":"Zac Gordon","url":"https:\/\/javascriptforwp.com\/author\/zgordon\/"},"comments_num_v2":"0 comments","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create an HTML Element in React [Video] - 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\/how-to-create-an-html-element-in-react-video\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create an HTML Element in React [Video] - JavaScript for WordPress\" \/>\n<meta property=\"og:description\" content=\"React Explained This video is an excerpt from the React Explained Course and Book that breaks down how to use React for beginners. In the video we go over how to to use one of the most important functions in React, createElement().&nbsp; This is an agnostic function that creates a JavaScript object.&nbsp; Later we then [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/\" \/>\n<meta property=\"og:site_name\" content=\"JavaScript for WordPress\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-23T20:01:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-23T20:01:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/how-to-create-an-html-element-in-react-video\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/how-to-create-an-html-element-in-react-video\\\/\"},\"author\":{\"name\":\"Zac Gordon\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/person\\\/76dfb19fbd859b4a17428b8b17767b25\"},\"headline\":\"How to Create an HTML Element in React [Video]\",\"datePublished\":\"2019-04-23T20:01:45+00:00\",\"dateModified\":\"2019-04-23T20:01:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/how-to-create-an-html-element-in-react-video\\\/\"},\"wordCount\":115,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/how-to-create-an-html-element-in-react-video\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/React-Explained.png\",\"articleSection\":[\"Free Videos\",\"React Book\",\"Tutorial\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/javascriptforwp.com\\\/how-to-create-an-html-element-in-react-video\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/how-to-create-an-html-element-in-react-video\\\/\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/how-to-create-an-html-element-in-react-video\\\/\",\"name\":\"How to Create an HTML Element in React [Video] - JavaScript for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/how-to-create-an-html-element-in-react-video\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/how-to-create-an-html-element-in-react-video\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/React-Explained.png\",\"datePublished\":\"2019-04-23T20:01:45+00:00\",\"dateModified\":\"2019-04-23T20:01:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/how-to-create-an-html-element-in-react-video\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/javascriptforwp.com\\\/how-to-create-an-html-element-in-react-video\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/how-to-create-an-html-element-in-react-video\\\/#primaryimage\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/React-Explained.png\",\"contentUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/React-Explained.png\",\"width\":1280,\"height\":720,\"caption\":\"How to Create an HTML Element with React\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/how-to-create-an-html-element-in-react-video\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/javascriptforwp.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create an HTML Element in React [Video]\"}]},{\"@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 Create an HTML Element in React [Video] - 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\/how-to-create-an-html-element-in-react-video\/","og_locale":"en_US","og_type":"article","og_title":"How to Create an HTML Element in React [Video] - JavaScript for WordPress","og_description":"React Explained This video is an excerpt from the React Explained Course and Book that breaks down how to use React for beginners. In the video we go over how to to use one of the most important functions in React, createElement().&nbsp; This is an agnostic function that creates a JavaScript object.&nbsp; Later we then [&hellip;]","og_url":"https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/","og_site_name":"JavaScript for WordPress","article_published_time":"2019-04-23T20:01:45+00:00","article_modified_time":"2019-04-23T20:01:46+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.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":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/#article","isPartOf":{"@id":"https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/"},"author":{"name":"Zac Gordon","@id":"https:\/\/javascriptforwp.com\/#\/schema\/person\/76dfb19fbd859b4a17428b8b17767b25"},"headline":"How to Create an HTML Element in React [Video]","datePublished":"2019-04-23T20:01:45+00:00","dateModified":"2019-04-23T20:01:46+00:00","mainEntityOfPage":{"@id":"https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/"},"wordCount":115,"commentCount":0,"publisher":{"@id":"https:\/\/javascriptforwp.com\/#organization"},"image":{"@id":"https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/#primaryimage"},"thumbnailUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png","articleSection":["Free Videos","React Book","Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/","url":"https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/","name":"How to Create an HTML Element in React [Video] - JavaScript for WordPress","isPartOf":{"@id":"https:\/\/javascriptforwp.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/#primaryimage"},"image":{"@id":"https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/#primaryimage"},"thumbnailUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png","datePublished":"2019-04-23T20:01:45+00:00","dateModified":"2019-04-23T20:01:46+00:00","breadcrumb":{"@id":"https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/#primaryimage","url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png","contentUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/04\/React-Explained.png","width":1280,"height":720,"caption":"How to Create an HTML Element with React"},{"@type":"BreadcrumbList","@id":"https:\/\/javascriptforwp.com\/how-to-create-an-html-element-in-react-video\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascriptforwp.com\/"},{"@type":"ListItem","position":2,"name":"How to Create an HTML Element in React [Video]"}]},{"@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\/105867","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=105867"}],"version-history":[{"count":0,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts\/105867\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/media\/105869"}],"wp:attachment":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/media?parent=105867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/categories?post=105867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/tags?post=105867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}