{"id":6795,"date":"2021-05-13T10:26:54","date_gmt":"2021-05-13T04:56:54","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6795"},"modified":"2021-05-13T10:27:25","modified_gmt":"2021-05-13T04:57:25","slug":"jsx-javascript-xml","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/","title":{"rendered":"JSX – JavaScript XML"},"content":{"rendered":"

JSX stands for JavaScript Extension or JavaScript XML.<\/strong><\/h2>\n

JSX is the HTML-like syntax that is used by React components to render in the browser<\/span>.<\/span><\/p>\n

\u201cReact\u00a0<\/span>doesn\u2019t require<\/span><\/a>\u00a0using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.\u201d \u2014 <\/span>reactjs.org<\/b><\/p>\n

By using JSX, we can write HTML-like structures in the same file as we write JavaScript code, then Babel will transform these expressions into actual JavaScript code. Unlike in the past, instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.<\/span><\/p>\n

By using JSX, we can write the following JSX code:<\/strong><\/p>\n

var list = (\r\n\r\n<ul id=\"list\">\r\n\r\n<li>Apple<\/li>\r\n\r\n<li>Orange<\/li>\r\n\r\n<li>Banana<\/li>\r\n\r\n<li>Mango<\/li>\r\n\r\n<li>Jackfruit<\/li>\r\n\r\n<\/ul>\r\n\r\n);<\/pre>\n
Bable<\/b> will transform it into this:<\/span><\/p>\n
var list = React.createElement(\"ul\", { id: \"list\" },\r\n\r\nReact.createElement(\"li\", null, \"Apple\"),\r\n\r\nReact.createElement(\"li\", null, \"Orange\"),\r\n\r\nReact.createElement(\"li\", null, \"Banana\"),\r\n\r\nReact.createElement(\"li\", null, \"Mango\"),\r\n\r\nReact.createElement(\"li\", null, \"Jackfruit\")\r\n\r\n)<\/pre>\n

\nSo, we can think of JSX as a shorthand for calling\u00a0<\/span>React.createElement()<\/span>. JSX is easier to read and write over large pyramids of JavaScript function calls or object literals. Additionally, the React team clearly believes JSX is better suited for defining UI\u2019s than a traditional templating solution.<\/span><\/p>\n
    \n
  1. JavaScript expressions can be used inside JSX. We just need to wrap it with curly brackets <\/span>{}<\/b>.<\/span><\/li>\n
  2. HTML tags always use\u00a0<\/span>lowercase<\/b>\u00a0tag names, while React components start with\u00a0<\/span>Uppercase<\/b>.<\/span><\/li>\n
  3. In the case of styling, react recommends using inline styles. When we want to set inline styles, we need to use\u00a0<\/span>camelCase<\/b>\u00a0syntax.<\/span><\/li>\n
  4. We cannot use\u00a0<\/span>if-else<\/b>\u00a0statements inside JSX, instead, we can use\u00a0<\/span>conditional (ternary)<\/b>\u00a0expressions.<\/span><\/li>\n<\/ol>\n
    \"JAVASCRIPT<\/p>\n
    JSX is easy to understand, but as a newcomer to JSX, there are a few things you need to keep in mind.<\/strong><\/b><\/p>\n
      \n
    • Variables<\/b><\/li>\n<\/ul>\n
      Whenever you want to render a variable\/expression in JSX, you need to wrap them with curly braces\u00a0<\/span>{}<\/span>. You can include any JS expressions within curly braces.<\/span><\/p>\n
      const name = \u2018John\u2019;\r\n\r\nreturn (\r\n\r\n<div>\r\n\r\n\u00a0\u00a0<h1>Welcome!<\/h1>\r\n\r\n\u00a0\u00a0<h2>{name}<\/h2>\r\n\r\n\u00a0\u00a0<p>Years of coding {2012 - 2021}<\/p>\r\n\r\n\u00a0\u00a0<p>Today : {new Date().toLocaleDateString()}<\/p>\r\n\r\n<\/div>\r\n\r\n);<\/pre>\n
        \n
      • Rendering nothing<\/b><\/li>\n<\/ul>\n
        Return\u00a0<\/span>null<\/span> if we want to React to not render content to the UI. When we return\u00a0<\/span>undefined<\/span>,\u00a0<\/span>[]<\/span>(empty array), boolean values also, React wouldn\u2019t render any content, but\u00a0<\/span>null<\/span>\u00a0is good to use as the code can be easily readable by fellow developers.<\/span><\/p>\n
        if(loading) return null;\r\n\r\nreturn <div>Content loaded!<\/div>;<\/pre>\n
          \n
        • Conditional rendering<\/b><\/li>\n<\/ul>\n
          \u00a0\u00a0\u00a0\u00a0\u00a0There are three ways to conditionally render content in React.<\/span><\/p>\n
            \n
          • If\/Else<\/b><\/li>\n<\/ul>\n
            This is the general syntax we use in most programming languages.<\/span><\/p>\n
            const val = 7;\r\nif(val>5) {\r\nreturn <div>Above 5!<\/div>\r\n} else {\r\nreturn <div>Below 5!<\/div>\r\n}<\/pre>\n
              \n
            • Ternary Operator<\/b><\/li>\n<\/ul>\n
              We can also use the traditional ternary operators in JSX to render conditionally.\u00a0<\/span><\/p>\n
              return isValid() === true\r\n? <div>Yay!<\/div>\r\n: <div>Error!<\/div><\/pre>\n
                \n
              • Logical Operator<\/b><\/li>\n<\/ul>\n
                We can also use the logical AND operator\u00a0<\/span>&&<\/span>\u00a0also to render conditionally. When this is used, only if the first condition is true the content will be rendered.<\/span><\/p>\n
                return is Valid && <div>Hello World!<\/div><\/pre>\n
                 <\/p>\n","protected":false},"excerpt":{"rendered":"
                JSX stands for JavaScript Extension or JavaScript XML. JSX is the HTML-like syntax that is used by React components to render in the browser. \u201cReact\u00a0doesn\u2019t require\u00a0using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and […]<\/p>\n","protected":false},"author":1,"featured_media":6800,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[108],"tags":[627,625,628,626,630,631,629],"class_list":["post-6795","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css-js","tag-javascript-extension","tag-javascript-xml","tag-parse-xml-using-javascript","tag-using-jsx","tag-xml-and-javascript","tag-xml-parser-in-javascript","tag-xml-tutorial"],"yoast_head":"\nJSX - JavaScript XML - InnovationM - Blog<\/title>\n<meta name=\"description\" content=\"JSX stands for JavaScript XML. The main advantage of using XML along with JavaScript is that editing of data becomes very easy.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JSX - JavaScript XML - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"JSX stands for JavaScript XML. The main advantage of using XML along with JavaScript is that editing of data becomes very easy.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-13T04:56:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-13T04:57:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/05\/JAVASCRIPT-XML.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\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:\\\/\\\/www.innovationm.com\\\/blog\\\/jsx-javascript-xml\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/jsx-javascript-xml\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"JSX – JavaScript XML\",\"datePublished\":\"2021-05-13T04:56:54+00:00\",\"dateModified\":\"2021-05-13T04:57:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/jsx-javascript-xml\\\/\"},\"wordCount\":412,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/jsx-javascript-xml\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/JAVASCRIPT-XML.png\",\"keywords\":[\"JavaScript Extension\",\"JavaScript XML\",\"Parse XML using JavaScript\",\"using JSX\",\"XML and JavaScript\",\"XML Parser In JavaScript\",\"XML Tutorial\"],\"articleSection\":[\"HTML5 \\\/ CSS \\\/ JS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/jsx-javascript-xml\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/jsx-javascript-xml\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/jsx-javascript-xml\\\/\",\"name\":\"JSX - JavaScript XML - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/jsx-javascript-xml\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/jsx-javascript-xml\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/JAVASCRIPT-XML.png\",\"datePublished\":\"2021-05-13T04:56:54+00:00\",\"dateModified\":\"2021-05-13T04:57:25+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"description\":\"JSX stands for JavaScript XML. The main advantage of using XML along with JavaScript is that editing of data becomes very easy.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/jsx-javascript-xml\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/jsx-javascript-xml\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/jsx-javascript-xml\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/JAVASCRIPT-XML.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/JAVASCRIPT-XML.png\",\"width\":960,\"height\":540,\"caption\":\"JAVASCRIPT XML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/jsx-javascript-xml\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JSX – JavaScript XML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JSX - JavaScript XML - InnovationM - Blog","description":"JSX stands for JavaScript XML. The main advantage of using XML along with JavaScript is that editing of data becomes very easy.","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:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/","og_locale":"en_US","og_type":"article","og_title":"JSX - JavaScript XML - InnovationM - Blog","og_description":"JSX stands for JavaScript XML. The main advantage of using XML along with JavaScript is that editing of data becomes very easy.","og_url":"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/","og_site_name":"InnovationM - Blog","article_published_time":"2021-05-13T04:56:54+00:00","article_modified_time":"2021-05-13T04:57:25+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/05\/JAVASCRIPT-XML.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"JSX – JavaScript XML","datePublished":"2021-05-13T04:56:54+00:00","dateModified":"2021-05-13T04:57:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/"},"wordCount":412,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/05\/JAVASCRIPT-XML.png","keywords":["JavaScript Extension","JavaScript XML","Parse XML using JavaScript","using JSX","XML and JavaScript","XML Parser In JavaScript","XML Tutorial"],"articleSection":["HTML5 \/ CSS \/ JS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/","url":"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/","name":"JSX - JavaScript XML - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/05\/JAVASCRIPT-XML.png","datePublished":"2021-05-13T04:56:54+00:00","dateModified":"2021-05-13T04:57:25+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"description":"JSX stands for JavaScript XML. The main advantage of using XML along with JavaScript is that editing of data becomes very easy.","breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/05\/JAVASCRIPT-XML.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/05\/JAVASCRIPT-XML.png","width":960,"height":540,"caption":"JAVASCRIPT XML"},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/jsx-javascript-xml\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JSX – JavaScript XML"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6795"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6795\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/6800"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}