React 17 - Conheça o que vai mudar no JSX

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.

Formação Desenvolvedor React

Conhecer a formação