{"id":46,"date":"2025-01-17T03:42:21","date_gmt":"2025-01-17T03:42:21","guid":{"rendered":"https:\/\/techkubo.com\/react\/?p=46"},"modified":"2025-05-19T08:09:09","modified_gmt":"2025-05-19T08:09:09","slug":"react-jsx","status":"publish","type":"post","link":"https:\/\/techkubo.com\/react\/react-jsx\/","title":{"rendered":"React JSX"},"content":{"rendered":"\n<p>JSX stands for JavaScript XML and it allows us to write HTML directly within React. This makes it easier to create and manage HTML structures within React applications.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Coding with JSX<\/h2>\n\n\n\n<p>JSX allows us to write HTML elements directly in JavaScript and place them in the DOM without using <code>createElement()<\/code> and\/or <code>appendChild()<\/code> methods. JSX converts HTML tags into React elements. While using JSX is not mandatory, it simplifies writing React applications.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Here are two examples: one with JSX and one without. <\/p>\n\n\n\n<p>In the first example, JSX allows us to write HTML directly within the JavaScript code. JSX is an extension of the JavaScript language based on ES6 and is converted into regular JavaScript at runtime.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using JSX<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;JavaScript&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const myElement = &lt;h1&gt;I Love Learning JSX!&lt;\/h1&gt;;\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(myElement);<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Without JSX<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;JavaScript&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const myElement = React.createElement('h1', {}, 'I am not using JSX!');\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(myElement);<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Expressions in JSX<\/h2>\n\n\n\n<p>With JSX, you can write expressions inside curly braces <code>{}<\/code>. These expressions can be React variables, properties, or any valid JavaScript expressions. JSX will execute the expression and return the result.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;JavaScript&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const myElement = &lt;h1&gt;React is {5 + 5} times better with JSX&lt;\/h1&gt;;<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Inserting a Large Block of HTML<\/h2>\n\n\n\n<p>To write HTML over multiple lines, enclose the HTML code within parentheses.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;JavaScript&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const myElement = (\n  &lt;ul&gt;\n    &lt;li&gt;Oranges&lt;\/li&gt;\n    &lt;li&gt;Mangoes&lt;\/li&gt;\n    &lt;li&gt;Grapes&lt;\/li&gt;\n  &lt;\/ul&gt;\n);<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">One Top Level Element<\/h2>\n\n\n\n<p>The HTML code must be wrapped in a single top-level element. If you need to write two paragraphs, place them inside a parent element, such as a <code>&lt;div&gt;<\/code>.<\/p>\n\n\n\n<p><strong>Wrap two paragraphs inside a <code>&lt;div><\/code> element EXAMPLE<\/strong><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;JavaScript&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">function App() {\n  return (\n    &lt;div&gt;\n      &lt;p&gt;This is paragraph one.&lt;\/p&gt;\n      &lt;p&gt;This is paragraph two.&lt;\/p&gt;\n    &lt;\/div&gt;\n  );\n}<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>JSX will throw an error if the HTML is not correctly structured or missing a parent element. Alternatively, you can use a &#8220;fragment&#8221; which prevents adding unnecessary nodes to the DOM.<\/p>\n\n\n\n<p>A fragment looks like an empty HTML tag: <code>&lt;&gt;&lt;\/&gt;<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;JavaScript&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const myElement = (\n  &lt;&gt;\n    &lt;p&gt;I am a beginner at React.&lt;\/p&gt;\n    &lt;p&gt;I am learning fast!&lt;\/p&gt;\n  &lt;\/&gt;\n);<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Elements Must Be Closed<\/h2>\n\n\n\n<p>JSX follows XML rules, so HTML elements must be properly closed. JSX will throw an error if the HTML elements are not properly closed.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;JavaScript&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const myElement = &lt;input type=&quot;text&quot; \/&gt;;<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Attribute class = className<\/h2>\n\n\n\n<p>The <code>class<\/code> attribute is commonly used in HTML. However, since the <code>class<\/code> keyword is reserved in JavaScript, JSX uses <code>className<\/code> instead. When JSX is rendered, <code>className<\/code> attributes are converted to <code>class<\/code> attributes.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;JavaScript&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const myElement = &lt;h1 className=&quot;myClass&quot;&gt;Hello, World!&lt;\/h1&gt;;<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conditions &#8211; if Statements<\/h2>\n\n\n\n<p>React supports if statements but not inside JSX. To use conditional statements in JSX, place the if statements outside the JSX or use a ternary expression.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Option 1: Write if statements outside JSX:<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;JavaScript&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const x = 5;\nlet text = &quot;Goodbye&quot;;\n\nif (x &lt; 10) {\n  text = &quot;Hello&quot;;\n}\n\nconst myElement = &lt;h1&gt;{text}&lt;\/h1&gt;;<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Option 2: Use ternary expressions:<\/strong><\/h3>\n\n\n\n<p>When embedding a JavaScript expression in JSX, remember to wrap the JavaScript with curly braces <code>{}<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;JavaScript&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const x = 5;\n\nconst myElement = &lt;h1&gt;{x &lt; 10 ? &quot;Hello&quot; : &quot;Goodbye&quot;}&lt;\/h1&gt;;<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>JSX stands for JavaScript XML and it allows us to write HTML directly within React. This makes it easier to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-46","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React JSX - React Tutorial<\/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:\/\/techkubo.com\/react\/react-jsx\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React JSX - React Tutorial\" \/>\n<meta property=\"og:description\" content=\"JSX stands for JavaScript XML and it allows us to write HTML directly within React. This makes it easier to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/techkubo.com\/react\/react-jsx\/\" \/>\n<meta property=\"og:site_name\" content=\"React Tutorial\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-17T03:42:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-19T08:09:09+00:00\" \/>\n<meta name=\"author\" content=\"Manong\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manong\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/techkubo.com\/react\/react-jsx\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/techkubo.com\/react\/react-jsx\/\"},\"author\":{\"name\":\"Manong\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965\"},\"headline\":\"React JSX\",\"datePublished\":\"2025-01-17T03:42:21+00:00\",\"dateModified\":\"2025-05-19T08:09:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/techkubo.com\/react\/react-jsx\/\"},\"wordCount\":361,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/techkubo.com\/react\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/techkubo.com\/react\/react-jsx\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/techkubo.com\/react\/react-jsx\/\",\"url\":\"https:\/\/techkubo.com\/react\/react-jsx\/\",\"name\":\"React JSX - React Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/techkubo.com\/react\/#website\"},\"datePublished\":\"2025-01-17T03:42:21+00:00\",\"dateModified\":\"2025-05-19T08:09:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/techkubo.com\/react\/react-jsx\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/techkubo.com\/react\/react-jsx\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/techkubo.com\/react\/react-jsx\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/techkubo.com\/react\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React JSX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/techkubo.com\/react\/#website\",\"url\":\"https:\/\/techkubo.com\/react\/\",\"name\":\"React Tutorial\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/techkubo.com\/react\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/techkubo.com\/react\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/techkubo.com\/react\/#organization\",\"name\":\"React Tutorial\",\"url\":\"https:\/\/techkubo.com\/react\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png\",\"contentUrl\":\"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png\",\"width\":300,\"height\":220,\"caption\":\"React Tutorial\"},\"image\":{\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965\",\"name\":\"Manong\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g\",\"caption\":\"Manong\"},\"sameAs\":[\"https:\/\/techkubo.com\"],\"url\":\"https:\/\/techkubo.com\/react\/author\/manong\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React JSX - React Tutorial","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:\/\/techkubo.com\/react\/react-jsx\/","og_locale":"en_US","og_type":"article","og_title":"React JSX - React Tutorial","og_description":"JSX stands for JavaScript XML and it allows us to write HTML directly within React. This makes it easier to [&hellip;]","og_url":"https:\/\/techkubo.com\/react\/react-jsx\/","og_site_name":"React Tutorial","article_published_time":"2025-01-17T03:42:21+00:00","article_modified_time":"2025-05-19T08:09:09+00:00","author":"Manong","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Manong","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/techkubo.com\/react\/react-jsx\/#article","isPartOf":{"@id":"https:\/\/techkubo.com\/react\/react-jsx\/"},"author":{"name":"Manong","@id":"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965"},"headline":"React JSX","datePublished":"2025-01-17T03:42:21+00:00","dateModified":"2025-05-19T08:09:09+00:00","mainEntityOfPage":{"@id":"https:\/\/techkubo.com\/react\/react-jsx\/"},"wordCount":361,"commentCount":0,"publisher":{"@id":"https:\/\/techkubo.com\/react\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/techkubo.com\/react\/react-jsx\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/techkubo.com\/react\/react-jsx\/","url":"https:\/\/techkubo.com\/react\/react-jsx\/","name":"React JSX - React Tutorial","isPartOf":{"@id":"https:\/\/techkubo.com\/react\/#website"},"datePublished":"2025-01-17T03:42:21+00:00","dateModified":"2025-05-19T08:09:09+00:00","breadcrumb":{"@id":"https:\/\/techkubo.com\/react\/react-jsx\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/techkubo.com\/react\/react-jsx\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/techkubo.com\/react\/react-jsx\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/techkubo.com\/react\/"},{"@type":"ListItem","position":2,"name":"React JSX"}]},{"@type":"WebSite","@id":"https:\/\/techkubo.com\/react\/#website","url":"https:\/\/techkubo.com\/react\/","name":"React Tutorial","description":"","publisher":{"@id":"https:\/\/techkubo.com\/react\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/techkubo.com\/react\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/techkubo.com\/react\/#organization","name":"React Tutorial","url":"https:\/\/techkubo.com\/react\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/","url":"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png","contentUrl":"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png","width":300,"height":220,"caption":"React Tutorial"},"image":{"@id":"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965","name":"Manong","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/techkubo.com\/react\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g","caption":"Manong"},"sameAs":["https:\/\/techkubo.com"],"url":"https:\/\/techkubo.com\/react\/author\/manong\/"}]}},"_links":{"self":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts\/46"}],"collection":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":2,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":176,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts\/46\/revisions\/176"}],"wp:attachment":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/media?parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/categories?post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/tags?post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}