React é há muito tempo uma biblioteca JavaScript obrigatória e é facilmente uma das mais populares do mundo. Além disso, com estruturas populares como Next.js e Remix sendo construídas sobre React e a capacidade de fazer desenvolvimento móvel com React-Native, esta biblioteca não irá desaparecer tão cedo. O problema com isso, entretanto, é que a maioria dos iniciantes migra para o React e começa a aprendê-lo sem realmente entender como ele funciona. Então, vamos mergulhar.

Como funciona o JSX

No React, JSX (JavaScript XML) é uma sintaxe semelhante ao HTML, mas funciona em JavaScript. Não é JavaScript válido em si, então o React usa um transpiler (geralmente Babel) para converter JSX em JavaScript padrão. Este código JavaScript é o que o navegador interpreta.

Quando você escreve JSX, ele é transformado em chamadas de função React.createElement(). Essas chamadas de função produzem elementos React, que são os blocos de construção de um aplicativo React. Cada elemento representa uma parte da IU.

Aqui está um exemplo de como isso é:

JSX em um componente React

const element = (
  

    
Hello, React!
    
This is a paragraph.
  
);

JSX transformado em JavaScript:

const element = React.createElement(
  'div',
  null,
  React.createElement('h1', null, 'Hello, React!'),
  React.createElement('p', null, 'This is a paragraph.')
);

React pega essas chamadas React.createElement() aninhadas e as converte nos elementos HTML correspondentes no DOM do navegador.

Conclusão

JSX torna a escrita de componentes React mais fácil, permitindo que você escreva uma sintaxe semelhante ao HTML, mas é apenas um açúcar sintático para chamadas React.createElement() que criam a estrutura do seu aplicativo usando JavaScript. Isto é o que permite ao React gerenciar a UI de forma eficiente através de seu mecanismo Virtual DOM.

Se você gostou deste artigo, também pode gostar do meu boletim informativo gratuito que envio todas as semanas para desenvolvedores como você. Você pode se inscrever aqui.