{"id":1331,"date":"2021-05-20T12:53:37","date_gmt":"2021-05-20T07:23:37","guid":{"rendered":"https:\/\/myfreeonlinetools.com\/blog\/?p=1331"},"modified":"2021-05-20T14:30:00","modified_gmt":"2021-05-20T09:00:00","slug":"create-first-react-dom-to-import-data-into-element","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/","title":{"rendered":"Create First React Component"},"content":{"rendered":"<pre>import React from 'react'; \r\nimport ReactDom from 'react-dom';\r\n\r\nfunction Greeting(){\r\nreturn(\r\n       &lt;div&gt;\r\n          &lt;h4&gt;\r\n            this is john and this is my first componenet; \r\n          &lt;\/h4&gt;\r\n        &lt;\/div&gt;\r\n      );\r\n}\r\n\r\nReactDom.render(&lt;Greeting \/&gt;, document.getElementById('root'));<\/pre>\n<h3>Create element by React.createElement.<\/h3>\n<p>&nbsp;<\/p>\n<pre>import React from 'react'; \r\nimport ReactDom from 'react-dom';\r\n\r\nconst Great = () =&gt; {\r\nreturn React.createElement('h1',{}, 'Hello this element create by create elements');\r\n}\r\n\r\nReactDom.render(&lt;Great \/&gt;, document.getElementById('root'));<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>import React from &#8216;react&#8217;; import ReactDom from &#8216;react-dom&#8217;; function Greeting(){ return( &lt;div&gt; &lt;h4&gt; this is john and this is my first componenet; &lt;\/h4&gt; &lt;\/div&gt; ); } ReactDom.render(&lt;Greeting \/&gt;, document.getElementById(&#8216;root&#8217;)); Create [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1331","post","type-post","status-publish","format-standard","hentry","category-react"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create First React Component - MyFreeOnlineTools<\/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:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create First React Component - MyFreeOnlineTools\" \/>\n<meta property=\"og:description\" content=\"import React from &#039;react&#039;; import ReactDom from &#039;react-dom&#039;; function Greeting(){ return( &lt;div&gt; &lt;h4&gt; this is john and this is my first componenet; &lt;\/h4&gt; &lt;\/div&gt; ); } ReactDom.render(&lt;Greeting \/&gt;, document.getElementById(&#039;root&#039;)); Create [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/\" \/>\n<meta property=\"og:site_name\" content=\"MyFreeOnlineTools\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-20T07:23:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-20T09:00:00+00:00\" \/>\n<meta name=\"author\" content=\"myfreeonlinetools\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myfreeonlinetools\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"Create First React Component\",\"datePublished\":\"2021-05-20T07:23:37+00:00\",\"dateModified\":\"2021-05-20T09:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"articleSection\":[\"React\"],\"inLanguage\":\"en\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/\",\"name\":\"Create First React Component - MyFreeOnlineTools\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"datePublished\":\"2021-05-20T07:23:37+00:00\",\"dateModified\":\"2021-05-20T09:00:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create First React Component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"name\":\"MyFreeOnlineTools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\",\"name\":\"MyFreeOnlineTools\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"width\":387,\"height\":79,\"caption\":\"MyFreeOnlineTools\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\",\"name\":\"myfreeonlinetools\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"caption\":\"myfreeonlinetools\"},\"description\":\"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.\",\"sameAs\":[\"https:\/\/myfreeonlinetools.com\/\",\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\",\"https:\/\/www.youtube.com\/learnschoolonline\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create First React Component - MyFreeOnlineTools","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:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/","og_locale":"en_US","og_type":"article","og_title":"Create First React Component - MyFreeOnlineTools","og_description":"import React from 'react'; import ReactDom from 'react-dom'; function Greeting(){ return( &lt;div&gt; &lt;h4&gt; this is john and this is my first componenet; &lt;\/h4&gt; &lt;\/div&gt; ); } ReactDom.render(&lt;Greeting \/&gt;, document.getElementById('root')); Create [&hellip;]","og_url":"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2021-05-20T07:23:37+00:00","article_modified_time":"2021-05-20T09:00:00+00:00","author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"Create First React Component","datePublished":"2021-05-20T07:23:37+00:00","dateModified":"2021-05-20T09:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/"},"wordCount":10,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"articleSection":["React"],"inLanguage":"en"},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/","url":"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/","name":"Create First React Component - MyFreeOnlineTools","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"datePublished":"2021-05-20T07:23:37+00:00","dateModified":"2021-05-20T09:00:00+00:00","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/blog\/create-first-react-dom-to-import-data-into-element\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create First React Component"}]},{"@type":"WebSite","@id":"https:\/\/myfreeonlinetools.com\/blog\/#website","url":"https:\/\/myfreeonlinetools.com\/blog\/","name":"MyFreeOnlineTools","description":"","publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization","name":"MyFreeOnlineTools","url":"https:\/\/myfreeonlinetools.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","width":387,"height":79,"caption":"MyFreeOnlineTools"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c","name":"myfreeonlinetools","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","caption":"myfreeonlinetools"},"description":"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.","sameAs":["https:\/\/myfreeonlinetools.com\/","https:\/\/www.facebook.com\/LearnSchoolOnline\/","https:\/\/www.youtube.com\/learnschoolonline"]}]}},"_links":{"self":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/comments?post=1331"}],"version-history":[{"count":0,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1331\/revisions"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=1331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=1331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=1331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}