{"id":3285,"date":"2022-11-03T16:48:09","date_gmt":"2022-11-03T16:48:09","guid":{"rendered":"https:\/\/explore.techenutia.com\/?p=3285"},"modified":"2022-12-28T15:39:13","modified_gmt":"2022-12-28T15:39:13","slug":"jsx-the-beginning-of-react","status":"publish","type":"post","link":"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/","title":{"rendered":"JSX: The Beginning of React"},"content":{"rendered":"\n<p>JSX is a syntax extension to Javascript but doesn&#8217;t it look like <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\">HTML<\/a>? That&#8217;s the first question you will ask yourself when you see JSX code or any standard react template. It&#8217;s technically not HTML but to save you from the complexity you can say it is inspired by HTML. But, there is more to it. JSX basically allows you to write HTML syntax with javascript as an add-on. You can render values, and use javascript loops, pass events in JSX. Store this syntax in variables to be reused. Let&#8217;s look at the basics<\/p>\n\n\n\n<div class=\"wp-block-ugb-heading ugb-heading ugb-6af0238 ugb-main-block\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><h2 class=\"ugb-heading__title\">Embedding Expressions<\/h2><p class=\"ugb-heading__subtitle\">If you want a dynamic title for your blog post how would you do that in React? It&#8217;s simple<\/p><\/div><\/div><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>let name = \"I am dynamic\"\n&lt;h1>Title is: {name}&lt;\/h1><\/code><\/pre>\n\n\n\n<p>The above line of code will render the name variable into h1 and display it as h1 on the front end of the website. You can basically put any Javascript code in these curly braces. Write a mathematical expression called a function or whatever you desire. <\/p>\n\n\n\n<div class=\"wp-block-ugb-heading ugb-heading ugb-e285207 ugb-main-block\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><h2 class=\"ugb-heading__title\">Dynamic Attributes<\/h2><p class=\"ugb-heading__subtitle\">With JSX you can define dynamic attributes for elements. Here is an example: the below code renders an image element whose src URL is fetched from DB. we can put a condition that after a certain amount of time the imageSrc is updated with a new URL from DB and the image on the frontend will change as well. <\/p><\/div><\/div><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>let imageSrc = \"fetch some url from db based on a condition\"\n&lt;img src={imageSrc} alt\"I render an image based on a condition\"\/><\/code><\/pre>\n\n\n\n<p>These are the two most important concepts of JSX more importantly JSX also prevents Injection Attacks. As it is impossible to insert something into JSX that is not explicitly written by you. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>JSX is a syntax extension to Javascript but doesn&#8217;t it look like HTML? That&#8217;s the first question you will ask yourself when you see JSX code or any standard react template. It&#8217;s technically not HTML but to save you from the complexity you can say it is inspired by HTML.&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/\">Read the post<span class=\"screen-reader-text\">JSX: The Beginning of React<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":3236,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3285","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-infinity-fitness","excerpt","zoom","full-without-featured","even","excerpt-0"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.12 (Yoast SEO v26.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>JSX: The Beginning of React | ManOrInfinity<\/title>\n<meta name=\"description\" content=\"JSX. what is JSX? how good is jsx? why use jsx? what is jsx used for? jsx vs html? Is JSX an extension to HTML? Benefits of JSX. Learn JSX\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JSX: The Beginning of React\" \/>\n<meta property=\"og:url\" content=\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/\" \/>\n<meta property=\"og:site_name\" content=\"ManOrInfinity\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-03T16:48:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-28T15:39:13+00:00\" \/>\n<meta name=\"author\" content=\"manorinfinity\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@manorinfinity\" \/>\n<meta name=\"twitter:site\" content=\"@manorinfinity\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"manorinfinity\" \/>\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:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/\"},\"author\":{\"name\":\"manorinfinity\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\"},\"headline\":\"JSX: The Beginning of React\",\"datePublished\":\"2022-11-03T16:48:09+00:00\",\"dateModified\":\"2022-12-28T15:39:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/\"},\"wordCount\":259,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\"},\"image\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"Infinity Fitness\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/\",\"url\":\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/\",\"name\":\"JSX: The Beginning of React | ManOrInfinity\",\"isPartOf\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2022-11-03T16:48:09+00:00\",\"dateModified\":\"2022-12-28T15:39:13+00:00\",\"description\":\"JSX. what is JSX? how good is jsx? why use jsx? what is jsx used for? jsx vs html? Is JSX an extension to HTML? Benefits of JSX. Learn JSX\",\"breadcrumb\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/manorinfinity.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JSX: The Beginning of React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/#website\",\"url\":\"https:\/\/manorinfinity.com\/blog\/\",\"name\":\"ManOrInfinity\",\"description\":\"Thrive towards greatness\",\"publisher\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/manorinfinity.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\",\"name\":\"manorinfinity\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png\",\"contentUrl\":\"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png\",\"width\":282,\"height\":260,\"caption\":\"manorinfinity\"},\"logo\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Complex Problem Solver, Outloud Thinker, An Outstanding Writer, and a very curious human being\",\"sameAs\":[\"http:\/\/manorinfinity.com\"],\"url\":\"https:\/\/manorinfinity.com\/blog\/author\/manorinfinity\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JSX: The Beginning of React | ManOrInfinity","description":"JSX. what is JSX? how good is jsx? why use jsx? what is jsx used for? jsx vs html? Is JSX an extension to HTML? Benefits of JSX. Learn JSX","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:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/","og_locale":"en_US","og_type":"article","og_title":"JSX: The Beginning of React","og_url":"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/","og_site_name":"ManOrInfinity","article_published_time":"2022-11-03T16:48:09+00:00","article_modified_time":"2022-12-28T15:39:13+00:00","author":"manorinfinity","twitter_card":"summary_large_image","twitter_creator":"@manorinfinity","twitter_site":"@manorinfinity","twitter_misc":{"Written by":"manorinfinity","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#article","isPartOf":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/"},"author":{"name":"manorinfinity","@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901"},"headline":"JSX: The Beginning of React","datePublished":"2022-11-03T16:48:09+00:00","dateModified":"2022-12-28T15:39:13+00:00","mainEntityOfPage":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/"},"wordCount":259,"commentCount":0,"publisher":{"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901"},"image":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#primaryimage"},"thumbnailUrl":"","articleSection":["Infinity Fitness"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/","url":"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/","name":"JSX: The Beginning of React | ManOrInfinity","isPartOf":{"@id":"https:\/\/manorinfinity.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#primaryimage"},"image":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#primaryimage"},"thumbnailUrl":"","datePublished":"2022-11-03T16:48:09+00:00","dateModified":"2022-12-28T15:39:13+00:00","description":"JSX. what is JSX? how good is jsx? why use jsx? what is jsx used for? jsx vs html? Is JSX an extension to HTML? Benefits of JSX. Learn JSX","breadcrumb":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/manorinfinity.com\/blog\/2022\/11\/03\/jsx-the-beginning-of-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/manorinfinity.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JSX: The Beginning of React"}]},{"@type":"WebSite","@id":"https:\/\/manorinfinity.com\/blog\/#website","url":"https:\/\/manorinfinity.com\/blog\/","name":"ManOrInfinity","description":"Thrive towards greatness","publisher":{"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/manorinfinity.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901","name":"manorinfinity","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/","url":"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png","contentUrl":"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png","width":282,"height":260,"caption":"manorinfinity"},"logo":{"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/"},"description":"Complex Problem Solver, Outloud Thinker, An Outstanding Writer, and a very curious human being","sameAs":["http:\/\/manorinfinity.com"],"url":"https:\/\/manorinfinity.com\/blog\/author\/manorinfinity\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/posts\/3285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/comments?post=3285"}],"version-history":[{"count":1,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/posts\/3285\/revisions"}],"predecessor-version":[{"id":3377,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/posts\/3285\/revisions\/3377"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/media?parent=3285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/categories?post=3285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/tags?post=3285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}