Olá Web Developers! O React 17 foi lançado e não trouxe nenhuma funcionalidade nova. Porém, ele veio com algo que vai mudar como o JSX funciona e um detalhe de como você lida com ele.
Como o JSX funcionava até agora
Os navegadores não entendem JSX. Portanto, é necessário que uma ferramenta como Babel faça a “tradução” do JSX para JavaScript comum.
Isso significa que quando você escreve o seguinte código:
function MeuComponente(){
return <div>Olá Web Developers!</div>;
}
Teremos o seguinte resultado:
function MeuComponente(){
return React.createElement('div', null, 'Olá Web Developers!');
}
Note que o JSX é substituído por React.createElement(). Por consequência, mesmo que você não fosse usar algo do React, era necessário importá-lo:
import React from 'react';
function MeuComponente(){
return <div>Olá Web Developers!</div>;
}
Caso você não importasse, você teria um erro na hora da transpilação. E muitos iniciantes no mundo do React já tiveram esse mesmo problema, sem entender onde estavam errando.
Curso
React - Despertando o Poder dos Hooks
Conhecer o curso
O novo JSX Transform do React 17
No React 17 em diante não vamos mais precisar importar o React para apenas usar JSX. A fim de simplificar as coisas, o novo transformador de JSX irá injetar automaticamente as funções necessárias.
Então o seguinte código:
function MeuComponente(){
return <div>Olá Web Developers!</div>;
}
Vai se tranformar em:
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('div', { children: 'Olá Web Developers!' });
}
E o melhor de tudo: você não precisa mudar nada no seu código, pois isso é compatível com os códigos já existentes!
Se acaso você quiser atualizar seu código, a própria equipe de desenvolvimento do React criou um script que remove automaticamente as importações não usadas do React. Basta executar npx react-codemod update-react-imports.
Mas existe alguma vantagem no novo JSX Transform?
Sim! Além de não precisarmos mais importar o React quando não formos usá-lo, também teremos uma melhora no tamanho dos arquivos.
// antigo
function MeuComponente(){
return React.createElement('div', null, 'Olá Web Developers!');
}
// novo
function App() {
return _jsx('div', { children: 'Olá Web Developers!' });
}
Além disso, também foi dito que o formato anterior não possibilitava certas melhorias e simplificações, que agora com o novo formato serão possíveis.
De acordo com a equipe de desenvolvimento do React, esse novo formato também vai permitir futuras melhorias e até a redução do número de conceitos que as pessoas precisam saber para aprender React.
