¿Por qué los navegadores no pueden leer JSX?

React es una biblioteca de JavaScript que se utiliza para crear aplicaciones web. React usa JSX que nos permite escribir objetos JavaScript dentro de los elementos HTML . JSX no es ni una string ni HTML. Es una extensión de sintaxis de JavaScript. JSX hace que el código sea fácil y comprensible. 

const num = 20 + 30;
const ele = <h1>{num} is 50</h1>;

JSX no es un JavaScript válido ya que están incrustados en elementos HTML. Como JSX es una combinación de HTML y JavaScript, los navegadores no lo admiten. Entonces, si algún archivo contiene un archivo JSX, Babel transpiler convierte el JSX en objetos JavaScript que se convierten en un JavaScript válido. Por lo tanto, los navegadores entienden el código y lo ejecutan. Los navegadores no pueden leer JSX porque no existe una implementación inherente para que los motores del navegador los lean y comprendan. JSX no está destinado a ser implementado por los motores o navegadores, está destinado a ser utilizado por varios transpiladores para transformar estos JSX en código JavaScript válido.

Veamos cómo los navegadores ejecutan JSX y cómo se convierte en JavaScript. Para ejecutar JSX, cree una aplicación de reacción.

Crear 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 su directorio a la carpeta recién creada usando el siguiente comando.

cd foldername

Estructura del proyecto: se crea una estructura de proyecto como se muestra a continuación;

Estructura del proyecto

Paso 3:   Ahora, abra index.js y agregue el siguiente código. Este código está escrito en JSX. 

import React from 'react';
import ReactDOM from 'react-dom';
  
const ele = ( 
    <div className = 'page'
    style = {
        { textAlign: 'center' }
    }>
    <h1 id = 'head'> Never Stop Learning!!! </h1>
     <h2 style = {
        { color: 'green' }
    }> Because life never stops teaching </h2> 
    <p> From GeeksforGeeks </p>
   
    </div>
);
  
ReactDOM.render(ele, document.getElementById('root'));

Explicación: el código anterior se convierte a JavaScript como se muestra a continuación utilizando el compilador Babel, ya que JSX no es compatible con los navegadores, convierte el código JSX a JavaScript.

Paso 4: El código que se muestra a continuación es un código convertido de JSX, es decir, código JavaScript (sin JSX). Agregue el siguiente código en index.js para ver cómo funciona.

import React from 'react';
import ReactDOM from 'react-dom';
      
const ele = React.createElement("div", {
        className: 'page',
        style: { textAlign: 'center' }
    },
    React.createElement("h1", { id: 'head' }, "Never Stop Learning!!!"),
    React.createElement("h2", { style: { color: 'green' } }, 
                        "Because life never stops teaching"),
    React.createElement('p', null, "From GeeksforGeeks")
);
  
ReactDOM.render(ele, document.getElementById('root'));

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

inicio de npm

Salida: Ambos códigos dan la misma salida. Porque son los mismos códigos escritos en JSX y otro es JavaScript convertido.