ReactJS | Introducción a JSX

Ya habíamos dicho en nuestro artículo sobre Introducción a ReactJS que React es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. Pero en lugar de usar JavaScript normal, el código de React debe escribirse en algo llamado JSX. 
Veamos un ejemplo de código JSX: 

const ele = <h1>This is sample JSX</h1>;

El fragmento de código anterior se parece un poco a HTML y también usa una variable similar a JavaScript, pero no es HTML ni JavaScript, es JSX. JSX es básicamente una extensión de sintaxis de JavaScript normal y se usa para crear elementos React. Estos elementos luego se procesan en React DOM. Aprenderemos en detalle sobre renderizado y DOM en el próximo artículo.
¿Por qué JSX?

import React from 'react';
import ReactDOM from 'react-dom';
 
const name = "Learner";
 
const element = <h1>Hello,
{ name }.Welcome to GeeksforGeeks.< /h1>;
  
ReactDOM.render(
    element,
    document.getElementById("root")
);

import React from 'react';
import ReactDOM from 'react-dom';
 
let i = 1;
 
const element = <h1>{ (i == 1) ? 'Hello World!' : 'False!' } < /h1>;
  
ReactDOM.render(
    element,
    document.getElementById("root")
);

import React from 'react';
import ReactDOM from 'react-dom';
 
 
const element = <div><h1 className = "hello">Hello Geek</h1>
            <h2 data-sampleAttribute="sample">Custom attribute</h2>< /div>;
 
  
ReactDOM.render(
    element,
    document.getElementById("root")
);

import React from 'react';
import ReactDOM from 'react-dom';
 
 
const element = <div>
                   <h1>This is Heading 1 < /h1>
                   <h2>This is Heading 2</h2 >
                   <h3>This is Heading 3 < /h3>   
                </div > ;
ReactDOM.render(
    element,
    document.getElementById("root"));

import React from 'react';
import ReactDOM from 'react-dom';
 
 
const element = <div><h1>Hello World !</h1>
            {/ * This is a comment in JSX * /}
        </div>;
 
ReactDOM.render(
    element,
    document.getElementById("root"));