"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Como o React JSX é transformado em JavaScript nos bastidores

Como o React JSX é transformado em JavaScript nos bastidores

Publicado em 2024-11-06
Navegar:544

How React JSX Gets Transformed Into JavaScript Behind the Scenes

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.

O Processo:

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.

Como funciona Babel?

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...

Por que é importante:

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.

Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/kashif_ullah_dev/how-react-jsx-gets-transformed-into-javascript-behind-the-scenes-467f?1 Se houver alguma violação, entre em contato com study_golang@163 .com para excluí-lo
Tutorial mais recente Mais>

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