Nuevo JSX Transform de React

Aunque React 17 no ofrece nuevas funcionalidades, esta nueva versión nos trae un JSX transform renovado.

¿Qué es JSX Transform?

Los navegadores no entienden JSX, así que la mayoría de desarrolladores de React utilizan un compilador como Babel o TypeScript para traducir el código JSX a JavaScript normal.

Muchas herramientas como ‘Create React App’ o Next.js también incluyen un JSX transform de base.

Según la página oficial de React, en esta nueva versión se han añadido unas cuantas mejoras a JSX transform sin romper nada existente. Se ha trabajado con Babel para ofrecer una nueva versión reescrita de JSX transform que la gente pueda actualizar desde ya.

Actualizar a la nueva versión de JSX transform es opcional pero trae una serie de beneficios:

• Con la nueva versión, puedes usar JSX sin importar React.
• Dependiendo de tu configuración, la compilación del bundle será menor.
• Nuevas mejoras para reducir el número de conceptos que deberás entender en el futuro para aprender React.

Recuerda que este upgrade no cambia la sintaxis de JSX y tampoco es obligatorio.

React 17 RC ya incluye suporte para el nuevo JSX transform así que… ¡vamos a echar un vistazo!

Veamos las diferencias entre el antiguo y el nuevo JSX transform:

¿En qué se diferencia el nuevo JSX tranform?

Cuando usas JSX, el compilador lo transforma en llamadas a funciones de React que el navegador entiende. El viejo JSX transform convertía JSX en llamadas React.createElement(...) .

Por ejemplo, supongamos que este es tu código:

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

Por debajo, el viejo JSX tranforma este código en:

import React from 'react';

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

 

Sin embargo, esto no es perfecto:

• Como JSX se compilaba a React.createElement, React necesitaba estar en el scope.
• Hay algunas mejoras de rendimiento que React.createElement no permite.

Para resolver esto, React 17 ha introducido dos nuevos entry points en el paquete de React que son utilizados por los compiladores como Babel o TypeScript.

En vez de transformar JSX a React.createElement, el nuevo JSX transform importa automáticamente algunas funciones especiales de esos entry points y los llama.

Digamos que este es tu código:

function App() {
  return <h1>Hello World</h1>;
}

 

Este es el código compilado por el nuevo JSX transform:

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

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

 

Date cuenta cómo nuestro código original no ha necesitado importar React para poder usar JSX.

Eso sí, todavía necesitamos importar React para usar Hooks y otros exports que React nos ofrece.

Este cambio es totalmente compatible con el código JSX existente actualmente por lo que no tendrás que hacer cambios en tus componentes.

Importante

Las funciones dentro de react/jsx-runtime y react/jsx-dev-runtime solo deben ser utilizadas por el compilador. Si necesitas crear elementos manualmente  en tu código, puedes seguir utilizando React.createElement.

6