{"id":1009,"date":"2020-10-11T14:05:22","date_gmt":"2020-10-11T08:35:22","guid":{"rendered":"https:\/\/myfreeonlinetools.com\/blog\/?p=1009"},"modified":"2020-10-28T22:14:20","modified_gmt":"2020-10-28T16:44:20","slug":"react-babel-with-react-fragment-create-page-elements","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/","title":{"rendered":"React Babel with React Fragment Create Page Elements"},"content":{"rendered":"

HTML Code<\/h3>\n
<!doctype html>\r\n\r\n<html>\r\n\t<head>\r\n\t\t<title>Page Title<\/title>\r\n\t\t<meta charset=\"UTF-8\">\r\n\t\t<meta name=\"viewport\" content=\"initial-scale=1.0\">\r\n\t<\/head>\r\n<script crossorigin src=\"https:\/\/unpkg.com\/react@16\/umd\/react.development.js\"><\/script>\r\n<script crossorigin src=\"https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js\">\r\n    <\/script>\r\n<script src=\"https:\/\/unpkg.com\/babel-standalone@6.26.0\/babel.min.js\"><\/script>\r\n\t<body>\r\n        \r\n        <div id=\"root\"><\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
React Babel JavaScript Code<\/h3>\n
<script type=\"text\/babel\">\r\n\r\nconst main = <React.Fragment>\r\n<main>\r\n<h1>My Blog<\/h1>\r\n<h2>H2 Heading of Page<\/h2>\r\n<article>\r\n<h2>My First Blog<\/h2>\r\n<p>This is Content of paragraph<\/p><p>This is Content of paragraph<\/p><p>This is Content of paragraph<\/p><p>This is Content of paragraph<\/p><p>This is Content of paragraph<\/p><p>This is Content of paragraph<\/p><p>This is Content of paragraph<\/p><p>This is Content of paragraph<\/p>\r\n<\/article>\r\n<\/main>\r\n<footer>This is footer of Page<\/footer>\r\n<\/React.Fragment>;\r\nReactDOM.render(main, document.getElementById('root'));\r\n\r\n<\/script><\/pre>\n
Output<\/h3>\n
\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
HTML Code <!doctype html> <html> <head> <title>Page Title<\/title> <meta charset=”UTF-8″> <meta name=”viewport” content=”initial-scale=1.0″> <\/head> <script crossorigin src=”https:\/\/unpkg.com\/react@16\/umd\/react.development.js”><\/script> <script crossorigin src=”https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js”> <\/script> <script src=”https:\/\/unpkg.com\/babel-standalone@6.26.0\/babel.min.js”><\/script> <body> <div id=”root”><\/div> <\/body> <\/html> React Babel […]<\/p>\n","protected":false},"author":1,"featured_media":1074,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1009","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"yoast_head":"\nReact Babel with React Fragment Create Page Elements - 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\/react-babel-with-react-fragment-create-page-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Babel with React Fragment Create Page Elements - MyFreeOnlineTools\" \/>\n<meta property=\"og:description\" content=\"HTML Code <!doctype html> <html> <head> <title>Page Title<\/title> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <\/head> <script crossorigin src="https:\/\/unpkg.com\/react@16\/umd\/react.development.js"><\/script> <script crossorigin src="https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js"> <\/script> <script src="https:\/\/unpkg.com\/babel-standalone@6.26.0\/babel.min.js"><\/script> <body> <div id="root"><\/div> <\/body> <\/html> React Babel […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/\" \/>\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=\"2020-10-11T08:35:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-28T16:44:20+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/10\/react_babel_with_react_fragment_create_page_elements.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"225\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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\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:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"React Babel with React Fragment Create Page Elements\",\"datePublished\":\"2020-10-11T08:35:22+00:00\",\"dateModified\":\"2020-10-28T16:44:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/\"},\"wordCount\":15,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/10\/react_babel_with_react_fragment_create_page_elements.jpg\",\"articleSection\":[\"React\"],\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/\",\"name\":\"React Babel with React Fragment Create Page Elements - MyFreeOnlineTools\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/10\/react_babel_with_react_fragment_create_page_elements.jpg\",\"datePublished\":\"2020-10-11T08:35:22+00:00\",\"dateModified\":\"2020-10-28T16:44:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#primaryimage\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/10\/react_babel_with_react_fragment_create_page_elements.jpg\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/10\/react_babel_with_react_fragment_create_page_elements.jpg\",\"width\":400,\"height\":225,\"caption\":\"React Babel with React Fragment Create Page Elements\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Babel with React Fragment Create Page Elements\"}]},{\"@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":"React Babel with React Fragment Create Page Elements - 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\/react-babel-with-react-fragment-create-page-elements\/","og_locale":"en_US","og_type":"article","og_title":"React Babel with React Fragment Create Page Elements - MyFreeOnlineTools","og_description":"HTML Code <!doctype html> <html> <head> <title>Page Title<\/title> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"initial-scale=1.0\"> <\/head> <script crossorigin src=\"https:\/\/unpkg.com\/react@16\/umd\/react.development.js\"><\/script> <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js\"> <\/script> <script src=\"https:\/\/unpkg.com\/babel-standalone@6.26.0\/babel.min.js\"><\/script> <body> <div id=\"root\"><\/div> <\/body> <\/html> React Babel […]","og_url":"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2020-10-11T08:35:22+00:00","article_modified_time":"2020-10-28T16:44:20+00:00","og_image":[{"width":400,"height":225,"url":"http:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/10\/react_babel_with_react_fragment_create_page_elements.jpg","type":"image\/jpeg"}],"author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"React Babel with React Fragment Create Page Elements","datePublished":"2020-10-11T08:35:22+00:00","dateModified":"2020-10-28T16:44:20+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/"},"wordCount":15,"commentCount":0,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/10\/react_babel_with_react_fragment_create_page_elements.jpg","articleSection":["React"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/","url":"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/","name":"React Babel with React Fragment Create Page Elements - MyFreeOnlineTools","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#primaryimage"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/10\/react_babel_with_react_fragment_create_page_elements.jpg","datePublished":"2020-10-11T08:35:22+00:00","dateModified":"2020-10-28T16:44:20+00:00","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#primaryimage","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/10\/react_babel_with_react_fragment_create_page_elements.jpg","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/10\/react_babel_with_react_fragment_create_page_elements.jpg","width":400,"height":225,"caption":"React Babel with React Fragment Create Page Elements"},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/blog\/react-babel-with-react-fragment-create-page-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Babel with React Fragment Create Page Elements"}]},{"@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\/1009","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=1009"}],"version-history":[{"count":0,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1009\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media\/1074"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=1009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=1009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=1009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}