<p>In this article we will talk about what is JSX and why do we need JSX in react applications.We will also talk about basics of JSX and how to work with JSX .</p>
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="nI0hRB6SXoE" title="ReactJS Tutorial For Beginners - 7 - JSX"><a placeholder href="https://youtu.be/nI0hRB6SXoE"><img src="https://i.ytimg.com/vi/nI0hRB6SXoE/hqdefault.jpg" layout="fill" object-fit="cover" alt="ReactJS Tutorial For Beginners - 7 - JSX"></a></amp-youtube></p>
<h3><span style="color: #000080;"><strong>What is JSX?</strong></span></h3>
<ul>
<li>JSX (JavaScript XML) is an XML-like syntax extension of JavaScript. Here &#8220;syntax extension&#8221; means that JSX is not valid Javascript. Web browsers can&#8217;t read it.<span style="font-size: 13.0pt; font-family: 'Segoe UI',sans-serif; color: #484848;"> </span></li>
<li>It describes what the UI should look like.</li>
<li>JSX may remind you of a template language, but it comes with the full power of JavaScript.</li>
<li>JSX is not understood by the browser therefore react uses babel compiler to convert JSX into pure JavaScript which is understood by the browser.</li>
</ul>
<p>Let us see a sample JSX code:</p>
<pre class="gatsby-code-jsx"><strong><code><span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token tag"><span class="token punctuation"><;</span>h1<span class="token punctuation">>;</span></span><span class="token plain-text">Hello, world!</span><span class="token tag"><span class="token punctuation"><;/</span>h1<span class="token punctuation">>;</span></span><span class="token punctuation">;</span></code></strong></pre>
<p>The above code snippet somewhat looks like HTML and it also uses a JavaScript-like variable but is neither HTML nor JavaScript, it is JSX.</p>
<h3 style="text-align: left;" align="center"><span style="color: #000080;"><strong>Why do we need JSX?</strong></span></h3>
<ul>
<li>It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript.</li>
<li>JSX is not a necessity for react applications we can also use react without JSX but It makes react code simple and easy to understand.</li>
<li>It makes easier for us to create templates.</li>
<li>Instead of separating the markup and logic in separated files, React uses <span style="color: #008000;"><strong><a style="color: #008000;" href="https://c1ctech.com/creating-first-react-component/">components</a></strong></span> for this purpose which contains both.</li>
</ul>
<h3><strong><span style="color: #000080;">JSX Outer Elements</span></strong></h3>
<p>A JSX expression must have exactly <em>one</em> outermost element.</p>
<p>In other words, this code will work:</p>
<pre><strong>const paragraphs = ( 

<;div id="i-am-the-outermost-element">; 

<;p>;I am a paragraph.<;/p>; 

<;p>;I, too, am a paragraph.<;/p>; 

<;/div>;);</strong></pre>
<p>But this code will not work:</p>
<pre><strong>const paragraphs = ( 

 <;p>;I am a paragraph.<;/p>; 

 <;p>;I, too, am a paragraph.<;/p>;);</strong></pre>
<p>The first opening tag and the final closing tag of a JSX expression must belong to the same JSX element!</p>
<p>If you notice that a JSX expression has multiple outer elements, the solution is usually simple: wrap the JSX expression in a <;div>; <;/div>;.</p>
<h3 style="margin-top: 0cm; background: white;"><span style="color: #000080;"><strong>Using JavaScript expressions in JSX</strong></span></h3>
<p>In React we are allowed to use normal JavaScript expressions with JSX. To embed any javascript expression in a piece of code written in JSX we will have to wrap that expression in curly braces {}.</p>
<p>You can put any valid <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions"><strong><span style="color: #008000;">JavaScript expression</span></strong></a> inside the curly braces in JSX. For example, <code>2 + 2</code>, <code>user.firstName</code>, or <code>formatName(user)</code> are all valid JavaScript expressions. In the example below, we embed the result of calling a JavaScript function, <code>formatName(user)</code>, into an element.</p>
<pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">function</span> <span class="token function">formatName</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 <span class="token keyword">return</span> user<span class="token punctuation">.</span>firstName <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> user<span class="token punctuation">.</span>lastName<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>
 firstName<span class="token punctuation">:</span> <span class="token string">'Harper'</span><span class="token punctuation">,</span>
 lastName<span class="token punctuation">:</span> <span class="token string">'Perez'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">(</span>
 <span class="token tag"><span class="token punctuation"><;</span>h1<span class="token punctuation">>;</span></span>
<span class="gatsby-highlight-code-line"><span class="token plain-text"> Hello, </span><span class="token punctuation">{</span><span class="token function">formatName</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">!</span>
</span> <span class="token tag"><span class="token punctuation"><;/</span>h1<span class="token punctuation">>;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
 element<span class="token punctuation">,</span>
 document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>If a JSX expression takes up more than one line, then you must wrap the multi-line JSX expression in parentheses.</p>
<p>This is to make sure we are avoiding JavaScript’s automatic semicolon insertion which will add semicolons (based on rules given by the JavaScript specifications) to terminate statements when we don’t necessarily want/expect that behavior in a JSX expression.</p>
<p>For example:</p>
<pre><strong>const theExample = ( 

<;a href="https://www.example.com">; 

 <;h1>; Click me! <;/h1>; 

<;/a>; );</strong></pre>
<h3 id="jsx-is-an-expression-too"><strong><span style="color: #000080;">JSX is an Expression Too</span></strong></h3>
<p>JSX is not understood by the browser therefore react uses Babel compiler (to convert JSX into pure javascript ) and after compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.</p>
<p>This means that you can use JSX inside of <code>if</code> statements and <code>for</code> loops, assign it to variables, accept it as arguments, and return it from functions:</p>
<div class="gatsby-highlight" data-language="jsx">
<pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">function</span> <span class="token function">getGreeting</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 <span class="token keyword">if</span> <span class="token punctuation">(</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="gatsby-highlight-code-line"> <span class="token keyword">return</span> <span class="token tag"><span class="token punctuation"><;</span>h1<span class="token punctuation">>;</span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span><span class="token function">formatName</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">!</span><span class="token tag"><span class="token punctuation"><;/</span>h1<span class="token punctuation">>;</span></span><span class="token punctuation">;</span>
</span> <span class="token punctuation">}</span>
<span class="gatsby-highlight-code-line"> <span class="token keyword">return</span> <span class="token tag"><span class="token punctuation"><;</span>h1<span class="token punctuation">>;</span></span><span class="token plain-text">Hello, Stranger.</span><span class="token tag"><span class="token punctuation"><;/</span>h1<span class="token punctuation">>;</span></span><span class="token punctuation">;</span>
</span><span class="token punctuation">}</span></code></pre>
</div>
<p>Here’s an example of a JSX element being saved in a variable:</p>
<pre><strong>const navBar = <;nav>;I am a nav bar<;/nav>;;</strong></pre>
<p>Here’s an example of several JSX elements being stored in an object:</p>
<pre><strong>const myTeam = { 

center: <;li>;Benzo Walli<;/li>;, 

powerForward: <;li>;Rasha Loa<;/li>;, 

smallForward: <;li>;Tayshaun Dasmoto<;/li>;, 

shootingGuard: <;li>;Colmar Cumberbatch<;/li>;, 

pointGuard: <;li>;Femi Billon<;/li>;};</strong></pre>
<h3 id="specifying-attributes-with-jsx"><strong><span style="color: #000080;">Specifying Attributes with JSX</span></strong></h3>
<p>JSX elements can have <em>attributes</em>, just like HTML elements can. But instead of the normal naming convention of HTML, JSX uses camelCase convention for attributes.</p>
<p>For example,</p>
<pre><span class="cm-keyword"><span style="font-size: 13.5pt; font-family: Consolas;">const</span></span> <span class="cm-def"><span style="font-size: 13.5pt; font-family: Consolas;">panda</span></span><span style="font-size: 13.5pt; font-family: Consolas;"> <span class="cm-operator">=</span> </span><span class="cm-tag"><span style="font-size: 13.5pt; font-family: Consolas;"><;img</span></span> <span class="cm-attribute"><span style="font-size: 13.5pt; font-family: Consolas;">src</span></span><span style="font-size: 13.5pt; font-family: Consolas;">=</span><span class="cm-string"><span style="font-size: 13.5pt; font-family: Consolas;">"images/panda.jpg"</span></span> 

<span class="cm-attribute"><span style="font-size: 13.5pt; font-family: Consolas;">alt</span></span><span style="font-size: 13.5pt; font-family: Consolas;">=</span><span class="cm-string"><span style="font-size: 13.5pt; font-family: Consolas;">"panda"</span></span> 

<span class="cm-attribute"><span style="font-size: 13.5pt; font-family: Consolas;">width</span></span><span style="font-size: 13.5pt; font-family: Consolas;">=</span><span class="cm-string"><span style="font-size: 13.5pt; font-family: Consolas;">"500px"</span></span> 

<span class="cm-attribute"><span style="font-size: 13.5pt; font-family: Consolas;">height</span></span><span style="font-size: 13.5pt; font-family: Consolas;">=</span><span class="cm-string"><span style="font-size: 13.5pt; font-family: Consolas;">"500px"</span></span> <span class="cm-tag"><span style="font-size: 13.5pt; font-family: Consolas;">/>;</span></span><span style="font-size: 13.5pt; font-family: Consolas;">;</span></pre>
<p>We can also use custom attributes in JSX. For example ,</p>
<pre class="line number6 index5 alt1"><code></code></pre>
<pre class="line number6 index5 alt1"><strong><code>const element = <;div>;</code> <code><;h1 className =</code><code>"hello"</code><code>>;Hello World<;/h1>; </code> <code><;h2 data-sampleAttribute=</code><code>"sample"</code><code>>;
 Custom attribute<;/h2>;</code> <code><; /div>;;</code></strong></pre>
<pre class="line number6 index5 alt1"><code></code></pre>
<p><strong><span style="color: #003366;">Specifying attribute values : </span></strong>JSX allows us to specify attribute values in two ways:</p>
<ol>
<li><strong><span style="color: #0000ff;">As string literals:</span> </strong>We can specify the values of attributes as hard-coded strings using quotes:
<pre><strong><code><span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token tag"><span class="token punctuation"><;</span>div <span class="token attr-name">tabIndex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">>;</span></span><span class="token tag"><span class="token punctuation"><;/</span>div<span class="token punctuation">>;</span></span><span class="token punctuation">;</span></code></strong></pre>
</li>
<li><strong><span style="color: #0000ff;">As javascript expressions:</span></strong> We can specify attributes as expressions using curly braces {}:
<pre><strong>const varName="Honey";
var ele = <;h1 className = {varName}>;Hello!<;/h1>;;</strong></pre>
</li>
</ol>
<p> ;</p>
<p><strong><span style="color: #000080;">Note:</span> We cannot use class and for attribute names used in Html, Instead we have to use className and htmlFor attribute in JSX.</strong> <span style="font-family: 'Segoe UI',sans-serif; color: #484848;">This is because JSX gets translated into JavaScript, and </span><code><span style="font-size: 10.0pt; font-family: Consolas; color: #15141f; background: #DFE0E0;">class</span></code><span style="font-family: 'Segoe UI',sans-serif; color: #484848;"> and <strong>for</strong> are the reserved words in JavaScript.</span></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<p style="margin: 0cm; margin-bottom: .0001pt; background: white;"><span style="font-family: 'Segoe UI',sans-serif; color: #484848;">When JSX is <span style="font-family: 'Segoe UI',sans-serif;">rendered</span>, JSX </span><code><span style="font-size: 10.0pt; font-family: Consolas; color: #15141f; background: #DFE0E0;">className</span></code><span style="font-family: 'Segoe UI',sans-serif; color: #484848;"> attributes are automatically rendered as </span><code><span style="font-size: 10.0pt; font-family: Consolas; color: #15141f; background: #DFE0E0;">class</span></code><span style="font-family: 'Segoe UI',sans-serif; color: #484848;"> attribute and <strong>htmlFor</strong> get rendered as <strong>for</strong> attribute .</span></p>
<h3></h3>
<h3 id="children-in-jsx"><strong><span style="color: #000080;">Children in JSX</span></strong></h3>
<p>In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is known as JSX children and is passed as a special prop: <code>props.children</code>.</p>
<p><span style="color: #003366;"><strong>Specifying children </strong>:</span> There are several different ways to pass children in JSX:</p>
<p id="string-literals-1"><span style="color: #0000ff;"><strong>As String Literals</strong> :</span>You can put a string between the opening and closing tags and <code>props.children</code> will just be that string. For example:</p>
<div class="gatsby-highlight" data-language="jsx">
<pre class="gatsby-code-jsx"><code><span class="token tag"><span class="token punctuation"><;</span>MyComponent<span class="token punctuation">>; </span></span><span class="token plain-text">Hello world!</span><span class="token tag"><span class="token punctuation"><;/</span>MyComponent<span class="token punctuation">>;</span></span></code></pre>
</div>
<p><code>props.children</code> in <code>MyComponent</code> will simply be the string <code>"Hello world!"</code>.</p>
<p id="jsx-children"><span style="color: #0000ff;"><strong>As JSX Children</strong> :</span> You can provide more JSX elements as the children. This is useful for displaying nested components. For example:</p>
<pre class="gatsby-code-html"><code class="gatsby-code-html"><span class="token tag"><span class="token punctuation"><;</span>div<span class="token punctuation">>;</span></span>
 Here is a list:
 <span class="token tag"><span class="token punctuation"><;</span>ul<span class="token punctuation">>;</span></span>
 <span class="token tag"><span class="token punctuation"><;</span>li<span class="token punctuation">>;</span></span>Item 1<span class="token tag"><span class="token punctuation"><;/</span>li<span class="token punctuation">>;</span></span>
 <span class="token tag"><span class="token punctuation"><;</span>li<span class="token punctuation">>;</span></span>Item 2<span class="token tag"><span class="token punctuation"><;/</span>li<span class="token punctuation">>;</span></span>
 <span class="token tag"><span class="token punctuation"><;/</span>ul<span class="token punctuation">>;</span></span>
<span class="token tag"><span class="token punctuation"><;/</span>div<span class="token punctuation">>;</span></span></code></pre>
<p>A React component can also return an array of elements:</p>
<div class="gatsby-highlight" data-language="jsx">
<pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 <span class="token comment">// No need to wrap list items in an extra element!</span>
 <span class="token keyword">return</span> <span class="token punctuation">[</span>
 <span class="token comment">// Don't forget the keys :)</span>
 <span class="token tag"><span class="token punctuation"><;</span>li <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A<span class="token punctuation">"</span></span><span class="token punctuation">>;</span></span><span class="token plain-text">First item</span><span class="token tag"><span class="token punctuation"><;/</span>li<span class="token punctuation">>;</span></span><span class="token punctuation">,</span>
 <span class="token tag"><span class="token punctuation"><;</span>li <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>B<span class="token punctuation">"</span></span><span class="token punctuation">>;</span></span><span class="token plain-text">Second item</span><span class="token tag"><span class="token punctuation"><;/</span>li<span class="token punctuation">>;</span></span><span class="token punctuation">,</span>
 <span class="token tag"><span class="token punctuation"><;</span>li <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>C<span class="token punctuation">"</span></span><span class="token punctuation">>;</span></span><span class="token plain-text">Third item</span><span class="token tag"><span class="token punctuation"><;/</span>li<span class="token punctuation">>;</span></span><span class="token punctuation">,</span>
 <span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
</div>
<h3></h3>
<p id="javascript-expressions-as-children"><strong><span style="color: #0000ff;">As JavaScript Expressions :</span></strong> You can pass any JavaScript expression as children, by enclosing it within <code>{}</code>. For example,</p>
<pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">function</span> <span class="token function">Hello</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="gatsby-highlight-code-line"> <span class="token keyword">return</span> <span class="token tag"><span class="token punctuation"><;</span>div<span class="token punctuation">>;</span></span><span class="token plain-text">Hello </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>addressee<span class="token punctuation">}</span><span class="token plain-text">!</span><span class="token tag"><span class="token punctuation"><;/</span>div<span class="token punctuation">>;</span></span><span class="token punctuation">;</span>
</span><span class="token punctuation">}</span></code></pre>
<p><strong><span style="color: #0000ff;">As Functions :</span></strong> You can also pass function as JSX children .For example, if you have a custom component, you could have it take a callback as <code>props.children</code>:<code></code></p>
<pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token comment">// Calls the children callback numTimes to produce a repeated component</span>
<span class="token keyword">function</span> <span class="token function">Repeat</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 <span class="token keyword">let</span> items <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="gatsby-highlight-code-line"> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><;</span> props<span class="token punctuation">.</span>numTimes<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span> items<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span><span class="token function">children</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
 <span class="token keyword">return</span> <span class="token tag"><span class="token punctuation"><;</span>div<span class="token punctuation">>;</span></span><span class="token punctuation">{</span>items<span class="token punctuation">}</span><span class="token tag"><span class="token punctuation"><;/</span>div<span class="token punctuation">>;</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">ListOfTenThings</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 <span class="token keyword">return</span> <span class="token punctuation">(</span>
 <span class="token tag"><span class="token punctuation"><;</span>Repeat <span class="token attr-name">numTimes</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span></span><span class="token punctuation">>;</span></span>
<span class="gatsby-highlight-code-line"> <span class="token punctuation">{</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span> <span class="token operator">=>;</span> <span class="token tag"><span class="token punctuation"><;</span>div <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">>;</span></span><span class="token plain-text">This is item </span><span class="token punctuation">{</span>index<span class="token punctuation">}</span><span class="token plain-text"> in the list</span><span class="token tag"><span class="token punctuation"><;/</span>div<span class="token punctuation">>;</span></span><span class="token punctuation">}</span>
</span> <span class="token tag"><span class="token punctuation"><;/</span>Repeat<span class="token punctuation">>;</span></span>
 <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<pre class="gatsby-code-jsx"><code></code></pre>
<h3 id="jsx-represents-objects"><strong><span style="color: #000080;">JSX Represents Objects</span></strong></h3>
<p>Babel compiles JSX down to <code>React.createElement()</code> calls.For example,</p>
<p>Given below is the JSX expression assigning to a variable element.</p>
<div class="gatsby-highlight" data-language="jsx">
<pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">(</span>
 <span class="token tag"><span class="token punctuation"><;</span>h1 <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>greeting<span class="token punctuation">"</span></span><span class="token punctuation">>;</span></span><span class="token plain-text">
 Hello, world!
 </span><span class="token tag"><span class="token punctuation"><;/</span>h1<span class="token punctuation">>;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;

</span></code></pre>
</div>
<div class="gatsby-highlight" data-language="jsx">Corresponding to the above JSX code the createElement function call look like this as shown below:</div>
<pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token keyword">const</span> element <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span>
 <span class="token string">'h1'</span><span class="token punctuation">,</span>
 <span class="token punctuation">{</span>className<span class="token punctuation">:</span> <span class="token string">'greeting'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
 <span class="token string">'Hello, world!'</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p><code>React.createElement()</code> create and return react element look like this :</p>
<div class="gatsby-highlight" data-language="jsx">
<pre class="gatsby-code-jsx"><code class="gatsby-code-jsx"><span class="token comment">// Note: this structure is simplified</span>
<span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">{</span>
 type<span class="token punctuation">:</span> <span class="token string">'h1'</span><span class="token punctuation">,</span>
 props<span class="token punctuation">:</span> <span class="token punctuation">{</span>
 className<span class="token punctuation">:</span> <span class="token string">'greeting'</span><span class="token punctuation">,</span>
 children<span class="token punctuation">:</span> <span class="token string">'Hello, world!'</span>
 <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</div>
<p>These objects are called <strong><span style="color: #008000;">“React elements”</span></strong>. You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.</p>
<h3><span style="color: #000080;"><strong>Comments in JSX</strong></span></h3>
<p>JSX allows us to use comments as it allows us to use JavaScript expressions. Comments in JSX begins with <strong>/</strong> and ends with <strong>/</strong>. We can add comments in JSX by wrapping them in curly braces {} just like we did in the case of expressions. Below example shows how to add comments in JSX:</p>
<pre class="line number6 index5 alt1"><code>const element = <;div>;
</code> <code><;h1>;Hello World !<;/h1>; </code> <code>{/ * This is a comment </code><code>in</code> <code>JSX * /} </code> <code><;/div>;;</code></pre>
<pre class="line number6 index5 alt1"><code></code></pre>