JSX para JavaScript: do código React ao JS puro
Levar JSX para JavaScript é reescrever a sintaxe de tags dos componentes React em JS que o navegador consegue executar. A ferramenta usa Babel, então o resultado é o mesmo de uma etapa de build com Babel. Você escolhe entre as chamadas clássicas a React.createElement e o runtime automático jsx() e copia o resultado. Seu código é compilado no seu navegador, nunca é enviado e nunca é executado.
JSX para JS online: passo a passo
Você não precisa instalar nada nem criar uma conta:
- Cole seu código no campo Código JSX. Enquanto estiver vazio, ele mostra “Cole o JSX aqui…”. O limite é de 1.000.000 de caracteres.
- Aguarde um instante. A ferramenta compila enquanto você digita ou cola, cerca de um terço de segundo após a última alteração, então não há botão para apertar. Na primeira vez, o Babel é baixado uma única vez e leva um pouco mais de tempo.
- Leia o resultado sob o título JavaScript. Ele aparece como código destacado, somente leitura.
- Selecione Copiar para a área de transferência. O botão muda para Copiado.
- Para mudar como o JSX é compilado, use o botão de engrenagem ao lado (Configurações do runtime JSX). Ele abre o grupo Runtime JSX com duas opções, Clássico e Automático. Depois da mudança, o código é compilado de novo.
Se o texto não for um JSX válido, você vê uma mensagem de erro de sintaxe com linha e coluna, a linha problemática e um ^ sob o ponto exato, e nenhum resultado até corrigir o erro. Se o código não tiver nenhum JSX, ele volta como JavaScript puro, com o aviso “Não foi encontrado JSX neste código, então ele voltou como JavaScript puro.”
JSX React createElement: clássico ou automático
No modo Clássico, o padrão, cada elemento vira uma chamada a React.createElement(type, props, ...children) e o fragmento vira React.Fragment. Nenhum import é adicionado, então o React precisa estar no escopo. Escolha esse modo se seu projeto ou tutorial ainda importa o React em todo arquivo, ou se você mira uma configuração mais antiga.
No modo Automático, o JSX vira chamadas a jsx() ou jsxs(), com os filhos dentro das props, e o fragmento se chama _Fragment. O import de react/jsx-runtime é adicionado, só com os nomes que o código usa. Ele exige React 17 ou superior e entrega o que uma cadeia de ferramentas atual do React produziria.
O que o conversor de JSX mantém e o que muda
- Imports e exports ficam como você escreveu.
- Comentários ficam, no mesmo lugar.
- O JavaScript comum ao redor do JSX não é alterado, além do layout do Babel.
- A formatação é a do Babel, não a do Prettier: suas aspas e quebras de linha dentro do JSX não são mantidas. Para organizar o resultado, passe-o pelo Formatador de Código.
- Anotações
/*#__PURE__*/são adicionadas antes das chamadas de elementos. Elas avisam os empacotadores de que a chamada não tem efeitos colaterais.
O que ele não faz: TSX, TypeScript e Flow
Ele compila apenas JSX. Não lê TypeScript, então um TSX com anotações de tipo dá erro de sintaxe, e o Flow também não é suportado. Não executa seu código, não verifica se os componentes funcionam e não agrupa arquivos.
Para ir no sentido contrário, do JavaScript comum para código tipado, use o Conversor de JS para TS. Para ler scripts minificados ou ofuscados, use o Desofuscador de JS.
Babel JSX online, sem sair do navegador
O Babel é carregado uma vez, na primeira vez que você cola, e depois disso a compilação acontece em um Web Worker no seu dispositivo. Seu componente não é enviado a lugar nenhum e nunca é executado, então você pode colar sem receio até um arquivo com efeitos colaterais.
Perguntas frequentes
Como levar JSX para JS online?
Cole seu JSX no campo “Código JSX”. Cerca de um terço de segundo depois, o JavaScript compilado aparece sob o título “JavaScript”. Não há botão de converter, e “Copiar para a área de transferência” leva o resultado. O Babel é baixado uma vez na primeira colagem, então a primeira conversão demora um pouco mais.
O Babel transforma JSX em JavaScript?
Sim. O preset de React do Babel compila JSX em JavaScript, e é isso que esta página executa no seu navegador, então o resultado é o mesmo de uma etapa de build com Babel. Ferramentas de build fazem o mesmo automaticamente ao montar um projeto. Use esta página quando quiser ver ou copiar o resultado de um único componente ou trecho.
Qual é a diferença entre JS e JSX?
JSX é JavaScript com uma sintaxe parecida com XML para descrever interfaces, como uma tag button com um manipulador onClick. Os navegadores não conseguem executá-lo, então um compilador reescreve cada tag como uma chamada de função comum. O resultado é JavaScript comum. A extensão .jsx é só uma convenção de nome para arquivos que contêm JSX.
Qual é a diferença entre o runtime clássico e o automático?
O clássico transforma o JSX em chamadas a React.createElement, então o React precisa estar no escopo em todo arquivo que usa JSX. O automático o transforma em chamadas a jsx() e jsxs() e adiciona sozinho o import de react/jsx-runtime, por isso você não importa o React só para escrever JSX. O automático exige React 17 ou superior. Aqui o padrão é “Clássico”.
Como obter React.createElement a partir do JSX?
Deixe o runtime JSX em “Clássico”, que é o padrão. Cada elemento vira uma chamada a React.createElement: primeiro o nome da tag, depois o objeto de props (null quando não há nenhum) e depois os filhos. Um fragmento vira React.Fragment.
Por que o resultado usa React mas nunca o importa?
A saída clássica chama React.createElement e React.Fragment sem adicionar import, porque presume que o React já está no escopo. Se o seu arquivo não começa com import React from 'react', adicione essa linha ou troque o runtime JSX para “Automático”, que escreve o import necessário.
Por que há comentários /*#__PURE__*/ no resultado?
O Babel coloca /*#__PURE__*/ antes de cada chamada de elemento. Isso avisa minificadores e empacotadores de que a chamada não tem efeitos colaterais, então um elemento que nunca é usado pode ficar de fora do pacote final. Você pode manter os comentários ou apagá-los: eles não mudam o que o código faz.
Ele converte TSX ou TypeScript?
Não. Ele espera JSX dentro de JavaScript comum, então uma anotação de tipo como props: Props é um erro de sintaxe. Remova os tipos antes ou compile o TypeScript com o compilador do TypeScript. A sintaxe do Flow também não é suportada.
Meu código é enviado ou executado?
Não. O Babel compila o código no seu navegador, em um Web Worker, e nada é enviado a um servidor. O código também nunca é executado, então você pode colar sem receio um componente com efeitos colaterais. O único download é o próprio Babel, uma vez.
