Embora o React 17 não contenha novos recursos, ele fornecerá suporte para uma nova versão do JSX Transform. Neste post, descreveremos o que é e como experimentá-lo.
\nOs navegadores não entendem JSX imediatamente, então a maioria dos usuários do React confia em um compilador como o Babel ou TypeScript para transformar o código JSX em JavaScript regular. Muitos toolkits pré-configurados como o Create React App ou Next.js também incluem um JSX Transform por baixo do capô.
\nJunto com a versão React 17, queríamos fazer algumas melhorias no JSX Transform, mas não queríamos quebrar as configurações existentes. É por isso que trabalhamos com Babel para oferecer uma versão nova e reescrita do JSX Transform para pessoas que gostariam de atualizar.
\nAtualizar para a nova transformação é totalmente opcional, mas tem alguns benefícios:
\nEsta atualização não mudará a sintaxe JSX e não é necessária. O antigo JSX Transform continuará funcionando normalmente e não há planos de remover o suporte para ele.
\nReact 17 RC já inclui suporte para a nova transformação, então experimente! Para facilitar a adoção também adaptamos seu suporte para React 16.14.0, React 15.7.0 e React 0.14.10. Você pode encontrar as instruções de atualização para diferentes ferramentas abaixo.
\nAgora, vamos examinar mais de perto as diferenças entre a velha e a nova transformação.
\nQuando você usa JSX, o compilador o transforma em chamadas de função React que o navegador pode entender. A antiga transformação JSX transforma JSX em chamadas React.createElement(...).
Por exemplo, digamos que seu código-fonte tenha a seguinte aparência:
\nimport React from 'react';\n\nfunction App() {\n return <h1>Hello World</h1>;\n}Nos bastidores, a antiga transformação JSX o transforma em JavaScript regular:
\nimport React from 'react';\n\nfunction App() {\n return React.createElement('h1', null, 'Hello world');\n}\n\nNota
\nSeu código-font não precisa ser alterado de forma alguma. Estamos descrevendo como a transformação JSX transforma seu código-fonte JSX no código JavaScript que um navegador pode entender.
\n
No entanto, isso não é perfeito:
\nReact.createElement, React precisa estar no escopo se você usasse JSX.React.createElement não permite.Para resolver esses problemas, o React 17 apresenta dois novos pontos de entrada para o pacote React que devem ser usados apenas por compiladores como Babel e TypeScript. Em vez de transformar JSX em React.createElement, a nova transformação JSX importa automaticamente funções especiais desses novos pontos de entrada no pacote React e os chama.
Digamos que seu código-fonte tenha a seguinte aparência:
\nfunction App() {\n return <h1>Hello World</h1>;\n}É para isso que a nova transformação JSX o compila:
\n// Inserido por um compilador (não importe você mesmo!)\nimport {jsx as _jsx} from 'react/jsx-runtime';\n\nfunction App() {\n return _jsx('h1', { children: 'Hello world' });\n}Observe como nosso código original não precisava mais importar o React para usar JSX! (Mas ainda precisaríamos importar o React para usar Hooks ou outras exportações que o React fornece.)
\nEsta mudança é totalmente compatível com todo o código JSX existente, assim você não terá que mudar seus componentes. Se estiver curioso, vocÊ pode verificar a RFC técnica para obter mais detalhes sobre como a nova transformação funciona.
\n\n\nNota
\nAs funções dentro de
\nreact/jsx-runtimeereact/jsx-dev-runtimedevem ser usadas apenas pela transformação do compilador. Se você precisa criar elementos manualmente em seu código, você deve continuar usandoReact.createElement. Ele continuará a funcionar e não irá embora.
Se você não estiver pronto para atualizar para a nova transformação JSX ou se estiver usando JSX para outra biblioteca, não se preocupe. A transformação antiga não será removida e continuará a ter suporte.
\nSe quiser fazer upgrade, você precisará de duas coisas:
\nComo a nova transformação JSX não exige que o React esteja no escopo, também preparamos um script automatizado que removerá as importações desnecessárias de sua base de código.
\nCreate React App 4.0.0+ usa a nova transformação para versões compatíveis do React.
\nNext.js v9.5.3+ usa a nova transformação para versões compatíveis do React.
\nGatsby v2.24.5+ usa a nova transformação para versões compatíveis do React.
\n\n\nNota
\nSe você obtiver este erro de Gatsby após atualizar para React 17 RC, execute
\nnpm updatepara corrigi-lo.
O suporte para a nova transformação JSX está disponível no Babel v7.9.0 e superior.
\nPrimeiro, você precisará atualizar para a última transformação do Babel e do plugin.
\nSe você estiver usando @babel/plugin-transform-react-jsx:
# para usuários npm\nnpm update @babel/core @babel/plugin-transform-react-jsx# para usuários yarn\nyarn upgrade @babel/core @babel/plugin-transform-react-jsxSe você estiver usando @babel/preset-react:
# para usuários npm\nnpm update @babel/core @babel/preset-react# para usuários yarn\nyarn upgrade @babel/core @babel/preset-reactAtualmente, a antiga transformação {"runtime": "classic"} é a opção padrão. Para habilitar a nova transformação, você pode passar {"runtime": "automatic"} como uma opção para @babel/plugin-transform-react-jsx ou @babel/preset-react:
// Se você estiver usando @babel/preset-react\n{\n \"presets\": [\n [\"@babel/preset-react\", {\n \"runtime\": \"automatic\"\n }]\n ]\n}// Se você estiver usando @babel/plugin-transform-react-jsx\n{\n \"plugins\": [\n [\"@babel/plugin-transform-react-jsx\", {\n \"runtime\": \"automatic\"\n }]\n ]\n}A partir do Babel 8, "automatic" será o tempo de execução padrão para ambos os plug-ins. Para obter mais informações, verifique a documentação do Babel para @babel/plugin-transform-react-jsx e @babel/preset-react.
\n\nNota
\nSe você usar JSX com uma biblioteca diferente de React, você pode usar a opção
\nimportSourcepara importar dessa biblioteca - desde que forneça os pontos de entrada necessários. Como alternativa, você pode continuar usando a transformação clássica, que continuará a ser compatível.Se você é um autor de biblioteca e está implementando o ponto de entrada
\n/jsx-runtimepara sua biblioteca, tenha em mente que há um caso em que até mesmo a nova transformação tem que voltar paracreateElementpara compatibilidade de versões anteriores. Nesse caso, ele irá importar automaticamentecreateElementdiretamente do ponto de entrada root especificado porimportSource.
Se você estiver usando eslint-plugin-react, as regas de react/jsx-uses-react e react/react-in-jsx-scope não são mais necessárias e podem ser desativadas ou removidas.
{\n // ...\n \"rules\": {\n // ...\n \"react/jsx-uses-react\": \"off\",\n \"react/react-in-jsx-scope\": \"off\"\n }\n}TypeScript suporta a nova transformação JSX em v4.1.
\nFlow suporta a nova transformação JSX em v0.126.0 para cima, adicionando react.runtime = automatic às opções de configuração do Flow.
Como a nova transformação JSX importará automaticamente as funções react/jsx-runtime necessárias, o React não precisará mais estar no escopo quando você usar JSX. Isso pode levar a importação React não utilizadas em seu código. Não faz mal mantê-los, mas se quiser removê-los, recomendamos a execução de um script “codemod” para removê-los automaticamente:
cd your_project\nnpx react-codemod update-react-imports\n\nNota
\nSe você estiver recebendo errors ao executar o codemod, tente especificar um dialeto JavaScript diferente quando
\nnpx react-codemod update-react-importssolicitar que você escolha um. Em particular, neste momento, a configuração “JavaScript com Flow” suporta sintaxe mais recente do que a configuração “JavaScript”, mesmo se você não usar o Flow. Crie uma issue se você tiver problemas.Lembre-se de que a saída do codemod nem sempre corresponderá ao estilo de codificação do seu projeto, então você pode querer executar Prettier depois que o codemod terminar para uma formatação consistente.
\n
Executar este codemod irá:
\nimport React from "react") para importações nomeadas desestruturadas (ex. import { useState } from "react"), que é o estilo preferido no futuro. Este codemod não afetará as importações de namespace existentes (ou seja, import * as React from "react"), que também é um estilo válido. As importações padrão continuarão funcionando no React 17, mas, a longo prazo, encorajamos nos afastar delas.Por exemplo,
\nimport React from 'react';\n\nfunction App() {\n return <h1>Olá Mundo</h1>;\n}será substituído por
\nfunction App() {\n return <h1>Olá Mundo</h1>;\n}Se você usar alguma outra importação do React - por exemplo, um Hook - então o codemod irá convertê-lo em uma importação nomeada.
\nPor exemplo,
\nimport React from 'react';\n\nfunction App() {\n const [text, setText] = React.useState('Olá Mundo');\n return <h1>{text}</h1>;\n}será substituído por
\nimport { useState } from 'react';\n\nfunction App() {\n const [text, setText] = useState('Olá Mundo');\n return <h1>{text}</h1>;\n}Além de limpar as importações não utilizadas, isso também o ajudará a se preparar para uma versão principal futura do React (não do React 17), que oferecerá suporte aos Módulos ES e não terá uma exportação padrão.
\nGostaríamso de agradecer aos mantenedores de Babel, TypeScript, Create React App, Next.js, Gatsby, ESLint e Flow por sua ajuda na implementação e intergação da nova transformação JSX. Também queremos agradecer à comunidade React por seus comentários e discussões sobre a RFC técnica.
","excerpt":"Embora o React 17 não contenha novos recursos, ele fornecerá suporte para uma nova versão do JSX Transform. Neste post, descreveremos o que é e como experimentá-lo. O Que é um JSX Transform? Os navegadores não entendem JSX imediatamente, então a maioria dos usuários do React confia em um compilador como o Babel ou TypeScript para transformar o código JSX em JavaScript regular. Muitos toolkits pré-configurados como o Create React App ou Next.js também incluem um JSX Transform por baixo do capô…","frontmatter":{"title":"Apresentando o novo JSX Transform","next":null,"prev":null,"author":[{"frontmatter":{"name":"Luna Ruan","url":"https://twitter.com/lunaruan"}}]},"fields":{"date":"22 de setembro de 2020","path":"content/blog/2020-09-22-introducing-the-new-jsx-transform.md","slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"React v17.0"},"fields":{"slug":"/blog/2020/10/20/react-v17.html"}}},{"node":{"frontmatter":{"title":"Apresentando o novo JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Candidato à lançamento: Sem novas funcionalidades"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Construindo Ótimas Experiências de Usuário com Modo Concorrente e Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparando para o Futuro com as Prereleases React"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Apresentando o novo React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 e a atualização do Roadmap"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"O React já esta traduzido? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: O React com Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}}]}},"pageContext":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}},"staticQueryHashes":[]}