Clever Geek Handbook

Nuevo motor de transformación JSX en React 17 Release Candidate

React 17 Release Candidate presenta una nueva forma de transformar JSX. Con él, en un paquete, no necesitará React, aunque todavía lo necesita para usar ganchos. Este es el principal beneficio del nuevo mecanismo. A continuación se muestra una breve traducción de un artículo en el blog ReactJS .



¿Qué es la transformación JSX?



Dado que los navegadores no entienden JSX de fábrica, los desarrolladores confían en compiladores como Babel o Typescript para transformar JSX en JS simple. React 17 Release Candidate presenta un nuevo mecanismo opcional de transformación de JSX a JS.



Estos son los beneficios:



  • Usando JSX sin React Import
  • Dependiendo de la configuración, el paquete puede ser un poco más pequeño
  • En el futuro, habrá funciones disponibles para simplificar el trabajo con react


(Tal vez no lo traduje con bastante precisión, aquí está el original: permitirá futuras mejoras que reducirán la cantidad de conceptos que necesita para aprender React ) La



actualización no cambia JSX en sí de ninguna manera, y todos los compiladores funcionaron y seguirán funcionando. No hay planes para abandonarlos. Está previsto admitir el nuevo mecanismo JSX Transform para versiones anteriores de React: 16.x, 15.x, 14.x, aquí están las instrucciones para la actualización.



Qué cambió



La antigua transformación JSX funcionó así:



Código 



import React from 'react';

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


Transformado en 



import React from 'react';

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


Pero esto no es genial y he aquí por qué:





Para abordar esto, React 17 introduce dos nuevos puntos de entrada para que los usen otras herramientas como Babel y Typescript, y ahora, en lugar de transformarse en React.createElement, se importan y llaman nuevas funciones del paquete React.



Digamos que su código se ve así: 



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


Después de una nueva transformación, se verá así: 



// 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' });
}


El nuevo mecanismo no importa React, aunque todavía es necesario para que funcionen los ganchos.



La nueva transformación es totalmente compatible con todo el código JSX existente, no tiene que cambiar nada. Aquí están los detalles técnicos de cómo funciona la nueva transformación JSX.



Cómo actualizar



Si no está listo para actualizar o está utilizando JSX para otras bibliotecas, no se preocupe, la transformación anterior no se eliminará y será compatible.



La actualización requiere dos cosas:



  • Reaccionar versión con nuevo soporte de transformación. Hasta ahora solo son 17, pero en el futuro 16.x, 15.xy 14.x
  • Compilador compatible (ver más abajo)


Create React App La



compatibilidad con Create React App estará en la versión v4.0 ahora está en prueba beta (a partir del 22/09/2020)



Next.js



Next.js v9.5.3 + ya usa la nueva transformación React para versiones compatibles.



Gatsby



Gatsby v2.24.5 + ya usa la nueva transformación React para versiones compatibles.



Nota
Gatsby 17.0.0-rc.2, npm update







Soporte de configuración manual de Babel desde v7.9.0 y superior.



Si esta usandoBabel/ plugin-transform-react-jsx:



# npm

npm update @babel/core @babel/plugin-transform-react-jsx

# yarn

yarn upgrade @babel/core @babel/plugin-transform-react-jsx



Si usaBabel/ preset-react:



# npm

npm update @babel/core @babel/preset-react

# yarn

yarn upgrade @babel/core @babel/preset-react



Ahora para transformar JSX, enBabel/ plugin-transform-react-jsx y en Babel/ preset-react, el valor predeterminado es {"runtime": "classic"} esta es la versión anterior de la transformación. Para habilitar una nueva transformación, necesita la opción {"runtime": "automatic"}



si usaBabel/ preset-react: 



{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}


Si esta usando Babel/ plugin-transform-react-jsx: 



{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}


A partir de Babel 8, "automático" será el predeterminado para ambos complementos. Hay documentación más detallada aquí @ babel / plugin-transform-react-jsx y @ babel / preset-react .



Nota
, importSource , . , .



ESLint



Si tiene el complemento eslint-plugin-react , entonces las reglas react / jsx-uses-react y react / react-in-jsx-scope ya no son necesarias y se pueden eliminar. 



{
  // ...
  "rules": {
    // ...
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}






Compatibilidad con TypeScript para transformaciones JSX desde la versión 4.1 beta . Soporte de



flujo



para transformaciones JSX desde la versión 0.126.0 y superior.



Cómo eliminar las importaciones de React no utilizadas



Dado que la nueva transformación JSX importará automáticamente react / jsx-runtime, React ya no es necesario en el alcance para usar JSX. Las importaciones no utilizadas no son críticas, pero si desea eliminarlas, se recomienda utilizar el script codemod. 



cd your_project
npx react-codemod update-react-imports


Como resultado:



  • Eliminar cualquier importación de React no utilizada
  • Todas las importaciones como import React de "react" se cambiarán a import {useState} con nombre de "react". Este es el método de importación preferido. Codemod no afectará importaciones como import * ya que React from "react", esta también es una importación válida y en la versión 17 funcionará, pero en el futuro le pediremos que se deshaga de ella


El código: 



import React from 'react';

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


Será reemplazado por: 



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


Si usa algo más en la reacción (por ejemplo, un gancho), la importación con nombre aparecerá en el código:



Código 



import React from 'react';

function App() {
  const [text, setText] = React.useState('Hello World');
  return <h1>{text}</h1>;
}


Reemplazado con el código: 



import { useState } from 'react';

function App() {
  const [text, setText] = useState('Hello World');
  return <h1>{text}</h1>;
}


Eliminar las importaciones no utilizadas ayudará a prepararse para las próximas versiones de React (no 17) en las que habrá soporte para módulos ES y no habrá exportación predeterminada.



Expresiones de gratitud



Nos gustaría agradecer a los equipos de Babel, TypeScript, Create React App, Next.js, Gatsby, ESLint y Flow por su ayuda en la integración del nuevo motor de transformación JSX. También agradecemos a la comunidad React por sus comentarios y discusiones sobre el RFC .


More articles:


All Articles