¿Cómo funciona JSX detrás de escena?

 Aprender HTML es más fácil que React, que consiste en Estados , Componentes , Eventos , etc. Entonces, para facilitar la codificación, React introdujo JSX . Es una extensión de JavaScript donde podemos incrustar objetos válidos de JavaScript en elementos HTML. JSX hace que Code sea más fácil de leer y comprender. Por lo general, HTML y JavaScript se escriben por separado, pero React crea componentes que contienen tanto HTML como JavaScript. Entonces, si está familiarizado con HTML, puede modificar fácilmente su código usando JSX.

const age = 20;
const ele = <h1> I'm {age} years old </h1>;

Cómo funciona JSX detrás de escena:

 La mayoría de los usuarios usan JSX porque es fácil de aprender y de implementar y pueden encontrar errores fácilmente. Cada vez que se escribe un código en JSX, Babel transcompila el código en código JavaScript.

JSX convirtiendo a JavaScript

Crear una aplicación de reacción

Siga los pasos a continuación para crear una aplicación de reacción:

Paso 1: Cree una aplicación de reacción usando el siguiente comando.

npx create-react-app foldername

Paso 2: Cambie el directorio a una carpeta recién creada.

cd foldername

Crea una estructura de proyecto como se muestra a continuación:

Estructura del proyecto

Paso 3: ahora dentro de index.js , escriba el siguiente código y verifique el código con JSX y sin JSX.

El código que está escrito en JSX se parece al siguiente código:

import React from 'react';
import ReactDOM from 'react-dom';
  
const ele = ( 
  <div> 
    <h1 id="h1"> Welcome to GeeksforGeeks </h1> 
      
<p> Don't stop learning </p>
   
  </div>
);
ReactDOM.render(ele, document.getElementById('root'));

Sin usar JSX: el código que está escrito en JSX se convierte en código de reacción usando el compilador babel como se muestra a continuación:

import React from 'react';
import ReactDOM from 'react-dom';
  
const ele = React.createElement(
    "div", { "class": "container" },
    React.createElement(
        "h1", { id: "h1" }, "Welcome to GeeksforGeeks"),
    React.createElement("p", null, "Don't stop learning"));
  
ReactDOM.render(ele, document.getElementById('root'));

Paso para ejecutar la aplicación: Para ejecutar la aplicación, ingrese el siguiente comando.

npm start

Producción:

Ambos códigos producen el siguiente resultado: