JSX

Sintaxe like XML

Quando JSX surgiu como uma alternativa para escrevermos nosso template, ele de início foi mal visto e realmente pode parecer estranho no começo. Inicialmente, houveram comparações a um retrocesso por ele estar mesclando a estrutura do DOM com a lógica da aplicação. Isso era um dos pontos em que pessoas apontavam como negativo do JSX, mas que posteriormente, se mostrou poderoso.

Como tudo que há de novo, inicialmente, temos um certo desconforto mesmo quando tal tecnologia, de certa forma, altera e nos retira da zona de conforto. Mas, após já ter amadurecido na comunidade, ele vem ganhando muita força e já mostrou o seu valor. Amado e odiado, ele é o mais popular template para criação da estrutura de uma interface.

Considerando o seguinte código abaixo, acredite, isso não é HTML! E neste artigo, iremos conhecer melhor sobre isto e sobre essa fantástica alternativa para templates.

O que é JSX?

Em resumo, JSX é uma sintaxe semelhante ao XML, onde você consegue escrever e compreender de uma melhor forma, como será montado o seu component na UI.

JSX não é uma proposta para EcmaScript, ele é apenas uma sintaxe!

É claro que, JSX não é interpretado pelo browser, por este motivo devemos utilizar um transpiler para realizar a mágica. Hoje existem vários transpiladores que transpilam JSX, entre eles, o mais conhecido, Babel.

Basicamente, usando o JSX você pode escrever estruturas concisas do tipo HTML, e no mesmo arquivo que você escreve o código JavaScript, então o Babel transformará isso em código JavaScript. Ao contrário do passado, em vez de colocar JavaScript em HTML, o JSX nos permite colocar HTML em JavaScript.

JSX providencia uma sintaxe familiar para definir a árvore estrutural, e isso não requer um novo conhecimento e também não abandonamos o Javascript.

Então, o código acima terá o seguinte resultado após ser transpilado:

Viu? É por isso que citei que isso não é HTML.

createElement

No exemplo acima, o transpiler englobou os nós com a função React.createElement, isso se dá porque estamos utilizando o preset babel-preset-reacte nele está contido o plugin transform-react-jsx, que utiliza por padrão o Pragma React.createElement.

Esse assunto já foi citado no meu artigo sobre Preact, e você poderá verificar que, no exemplo do Preact, é necessário alterar o Pragma. No Preact, a função que manipula o nó é a função h.

Vamos entender melhor esta estrutura, para isto, iremos analisar um pequeno caso, apenas um elemento h1.

Isso irá ser transpilado para isto:

Parâmetros da função createElement:

1. Type
2. Props
3. Children

O objetivo é tornar o resultado compreensível para ser renderizado. A função irá retornar um object com a estrutura abaixo.

Méritos do JSX

• Por se parecer com HTML, pessoas menos experientes ainda podem entender e modificar as partes necessárias.
• Você pode aproveitar todo o poder do JavaScript em HTML e evitar aprender ou usar uma linguagem de modelos.

Quem usa?

Existe outras libs e frameworks que utilizam JSX.

• Preact
• Inferno
• React-Native
• Vuejs(Opcional)

Então é isso galera, espero que tenham gostado.

Abraços