Ao escrever React, você frequentemente verá JSX – uma sintaxe que se parece com HTML dentro do seu código JavaScript. Mas você já se perguntou como esse código é executado no navegador?
Aqui está a mágica: JSX não é JavaScript válido! Os navegadores não conseguem entendê-lo diretamente. Nos bastidores, uma ferramenta como Babel intervém para converter (ou "transpilar") JSX em JavaScript normal.
1.Você escreve JSX – Parece HTML, mas reside em seus componentes React. Por exemplo:
const element =Hello, World!
;
2.Babel transforma – Durante o processo de construção, Babel converte o JSX em JavaScript puro usando React.createElement:
const element = React.createElement('h1', null, 'Hello, World!');
3.JavaScript no navegador – Por fim, esse JavaScript padrão é o que o navegador executa, construindo o DOM dinamicamente.
Babel é um poderoso compilador JavaScript que permite usar os recursos JavaScript mais recentes (incluindo JSX no React), garantindo compatibilidade entre diferentes navegadores e ambientes. Aqui está um resumo de como o Babel funciona:
1.Análise
Babel começa analisando seu código JavaScript ou JSX moderno em uma árvore de sintaxe abstrata (AST). A AST é uma estrutura detalhada em forma de árvore que representa o código de uma forma fácil para Babel (e outras ferramentas) analisar e manipular. Durante esta etapa, Babel lê o código, mas ainda não o altera.
Por exemplo, Babel usa este código JSX:
const element =Hello, World!
;
E gera um AST, que representa a estrutura desse código.
2.Transformando
Em seguida, Babel aplica uma série de plugins ao AST. Cada plugin é responsável por transformar partes específicas do AST de acordo com as regras que ele define. Essas transformações podem incluir a conversão da sintaxe moderna do JavaScript (como funções de seta ou assíncrono/espera) em versões mais antigas e compatíveis com o navegador.
Para JSX, transformações Babel:
const element =Hello, World!
;
const element = React.createElement('h1', null, 'Hello, World!');
3. Geração de código
Depois que todas as transformações forem feitas, Babel gera o código JavaScript a partir do AST transformado. Esta é a etapa final onde a saída legível por humanos é produzida, que o navegador ou Node.js pode executar.
Vamos concluir...
JSX permite que você escreva código de UI mais intuitivo e baseado em componentes, mas é o Babel e o tempo de execução do JavaScript que dão vida a ele. Compreender essa conversão ajuda você a solucionar melhor os problemas e a escrever aplicativos React mais otimizados.
Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.
Copyright© 2022 湘ICP备2022001581号-3