Clever Geek Handbook

Novo mecanismo de transformação JSX no React 17 Release Candidate

O React 17 Release Candidate apresenta uma nova maneira de transformar JSX. Com ele, em um pacote, o próprio React não é necessário, embora ainda seja necessário usar ganchos. Este é o principal benefício do novo mecanismo. Abaixo está uma breve tradução de um artigo no blog ReactJS .



O que é transformação JSX



Uma vez que os navegadores não entendem JSX fora da caixa, os desenvolvedores contam com compiladores como Babel ou Typescript para transformar JSX em JS simples. O React 17 Release Candidate apresenta um novo mecanismo opcional de transformação JSX em JS.



Aqui estão os benefícios:



  • Usando JSX sem React Import
  • Dependendo das configurações, o pacote pode diminuir ligeiramente
  • No futuro, recursos estarão disponíveis para simplificar o trabalho com o react


(Talvez eu não tenha traduzido com precisão - aqui está o original: ele permitirá melhorias futuras que reduzem o número de conceitos que você precisa para aprender React ) A



atualização não altera o JSX em si de forma alguma e todos os compiladores funcionaram e funcionarão. Não há planos de abandoná-los. Está planejado para oferecer suporte ao novo mecanismo JSX Transform para versões anteriores do React: 16.x, 15.x, 14.x, aqui estão as instruções para a atualização.



O que mudou



A antiga transformação JSX funcionava assim:



Código 



import React from 'react';

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


Transformado em 



import React from 'react';

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


Mas não é ótimo, e este é o motivo:





Para resolver isso, o React 17 apresenta dois novos pontos de entrada destinados ao uso por outras ferramentas, como Babel e Typescript, e agora, em vez de se transformar em React.createElement, novas funções do pacote React são importadas e chamadas.



Digamos que seu código seja assim: 



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


Após uma nova transformação, ficará assim: 



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


O novo mecanismo não importa o React, embora ainda seja necessário para que os ganchos funcionem.



A nova transformação é totalmente compatível com todo o código JSX existente, você não precisa mudar nada. Aqui estão os detalhes técnicos de como a nova transformação JSX funciona.



Como fazer o upgrade



Se você não está pronto para atualizar ou está usando JSX para outras bibliotecas, não se preocupe, a transformação antiga não será removida e terá suporte.



Para fazer upgrade, você precisa de duas coisas:



  • Versão React com novo suporte de transformação. Até agora são apenas 17, mas no futuro 16.x, 15.xe 14.x
  • Compilador compatível (veja abaixo)


Criar aplicativo



React O suporte para criar aplicativo React estará na versão v4.0, agora em teste beta (a partir de



22.09.20 ). Next.js



Next.js v9.5.3 + já usa a nova transformação React para versões compatíveis.



Gatsby



Gatsby v2.24.5 + já usa a nova transformação React para versões compatíveis.



Nota
Gatsby 17.0.0-rc.2, npm update







Suporte para configuração manual do Babel de v7.9.0 e superior.



Se você estiver 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



Se você usarbabel/ preset-



react : # npm

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

# yarn

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



Agora para transformar JSX, embabel/ plugin-transform-react-jsx e em babel/ preset-react, o padrão é {"runtime": "classic"} esta é a versão antiga da transformação. Para habilitar uma nova transformação, você precisa da opção {"runtime": "automatic"}



Se você usarbabel/ preset-react: 



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


Se você estiver usando babel/ plugin-transform-react-jsx: 



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


A partir do Babel 8, "automático" será o padrão para ambos os plug-ins. Há uma documentação mais detalhada aqui @ babel / plugin-transform-react-jsx e @ babel / preset- react .



Nota
, importSource , . , .



ESLint



Se você tiver o plugin eslint-plugin-react , então as regras react / jsx-uses-react e react / react-in-jsx-scope não são mais necessárias e podem ser removidas. 



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






Suporte TypeScript para transformações JSX desde a versão 4.1 beta . Suporte de



fluxo



para transformações JSX da versão 0.126.0 e superior.



Como retirar as importações React não utilizadas



Como a nova transformação JSX importará automaticamente react / jsx-runtime, o React não é mais necessário no escopo para usar JSX. As importações não utilizadas não são críticas, mas se você quiser removê-las, é recomendável usar o script do codemod. 



cd your_project
npx react-codemod update-react-imports


Como um resultado:



  • Remova todas as importações React não utilizadas
  • Todas as importações, como import React from "react", serão alteradas para o nome import {useState} de "react". Este é o método de importação preferido. Codemod não afetará importações como import * como React from "react", esta também é uma importação válida e na versão 17 funcionará, mas no futuro pediremos que você se livre dela


O código: 



import React from 'react';

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


Será substituído por: 



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


Se você usar outra coisa na reação (por exemplo, um gancho), a importação nomeada aparecerá no código:



Código 



import React from 'react';

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


Substituído pelo código: 



import { useState } from 'react';

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


A remoção de importações não utilizadas ajudará na preparação para as próximas versões do React (não 17) nas quais haverá suporte para módulos ES e não haverá exportação padrão.



Agradecimentos



Gostaríamos de agradecer às equipes de Babel, TypeScript, Create React App, Next.js, Gatsby, ESLint e Flow por sua ajuda na integração do novo mecanismo de transformação JSX. Agradecemos também à comunidade React por seus comentários e discussões sobre o RFC .


More articles:


All Articles