Reactjs 17 nueva transformación JSX

Aunque la version 17 de Reacjs no trae nuevas funcionalidades, introduce un nuevo transformador de JSX. Vamos a ver en qué consiste este cambio

Actualmente, cuando trabajamos con Reactjs lo hacemos usando JSX para escribir la creación de los elementos de forma declarativa. Pero los navegadores no son capaces de interpretar JSX por lo que utilizamos herramientas para transformarlo a javascript. Normalmente estas herramientas son Babel o Typescript.

Para la versión 17, los chicos de Reactjs han trabajado con Babeljs para “ofrecer una nueva versión reescrita de la transformación de JSX”.

Con esta nueva actualización se va a poder utilizar JSX en los archivos sin necesidad de importar el módulo React como hacíamos hasta ahora. Esto, a su vez, provoca que, una vez compilado el código, éste pese menos al tener menos referencias y código que colocar. Esto será más o menos apreciable en función del tamaño y estructura del proyecto.

Por lo demás, la sintaxis actual seguirá funcionando correctamente y no se prevé deprecarla a corto y medio plazo.

Entendiendo como funciona la nueva transformación JSX

Cuando utilizamos jsx, tenemos configurado de forma implícita (como cuando Create React App o Next.js) o de forma explícita mediante las configuraciones de Babel y Webpack para que nos transforme el código jsx a código javascript. En el momento de compilado lo que se produce básicamente es el siguiente cambio.


    import React from 'react';


    function App() {

        return <h1>Hello World</h1>;

    }

Por este otro código:

import React from 'react';

function App() { return React.createElement('h1', null, 'Hello world'); }

Como se ve, hasta esta nueva versión se hace necesario importar React para que se encuentre dentro del ámbito de la declaración del componente y así poder utilizarlo para transformar el código y aplicación. A partir de la versión 17 no será necesario ya que incorpora unos nuevos módulos que junto con las nuevas versiones de Babel y TypeScript ( según que se esté utilizando) transformarán el JSX sin necesidad de importarlo.

En el siguiente ejemplo vemos como sería esta transformación con los nuevos módulos:


    function App() {

        return <h1>Hello World</h1>;

    }

En el código anterior ya no está importado el módulo React y en el siguien muestra como se realizaría la nueva tansformación:


    // Esta importación la realiza el compilador que transforma el JSX. No hay que importarla
    import {jsx as _jsx} from 'react/jsx-runtime';

    function App() {

      return _jsx('h1', { children: 'Hello world' });

    }

Además de ahorrarnos la codificación de la importación, la utilización de estos nuevos módulos optimiza la transformación. No obstante seguiremos teniendo la necesidad de importar cuando hagamos uso de otras exportaciones de React como por ejemplo el uso de Hooks, Context...