¿Cuáles son las ventajas de usar JSX en ReactJS?

JavaScript XML o JSX es una extensión de la sintaxis del lenguaje JavaScript. La biblioteca React es una extensión para escribir código similar a XML para elementos y componentes. Las etiquetas JSX tienen un nombre de etiqueta, atributos e hijos. 

Aunque JSX no es una necesidad para escribir aplicaciones React, es extremadamente beneficioso ya que hace que el código React sea más simple y elegante. 

JSX tiene las siguientes ventajas:

• JSX nos ayuda a mantener nuestro código más simple y elegante al escribir grandes fragmentos de código.
• De acuerdo con los documentos de React, la mayoría de las personas lo encuentran útil como ayuda visual cuando trabajan con la interfaz de usuario dentro del código JavaScript.
• JSX también permite que React muestre mensajes de error y advertencia más útiles.
• Si uno está familiarizado con HTML, es bastante fácil usar JSX al crear la aplicación React
• Más rápido que JavaScript normal, ya que realiza optimizaciones mientras se traduce a JavaScript normal.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app example

• Paso 2: después de crear la carpeta de su proyecto, es decir, ejemplo , muévase a ella con el siguiente comando:

  cd example

• Paso 3: Cree una nueva carpeta llamada Componentes y cree los archivos Nojsx.js y Jsx.js.

Estructura del proyecto: La estructura del proyecto tendrá el siguiente aspecto.

Implementación: Escriba el siguiente código en los archivos App.js, Nojsx.js y Jsx.js.

import React from 'react';
  
import Jsx from './Components/Jsx' 
import Nojsx from './Components/Nojsx' 
  
export default function App() {
  return (
    <div className="App">
     <Jsx/>
     <Nojsx/>
    </div>
  );
}

import React from 'react'
  
const Nojsx = () => {
    return React.createElement(
        'div',
        {id:'Nojsx',className : 'GfgClass'},
        React.createElement('h1',null, 'Welcome to GFG')
    )
}
  
export default Nojsx

import React from 'react'
  
const Jsx = () => {
    return (
        <div className ='GfgClass'>
        <h1>Welcome to GFG</h1>
        </div>
    )
} 
  
export default Jsx

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Producción

Conclusión: Ambos componentes producirán el mismo resultado. Podemos concluir que escribir código de componente con JSX es mucho más simple que escribirlo sin JSX. 

Referencia: https://reactjs.org/docs/introducing-jsx.html