JSX

Quando surgiu como uma alternativa para escrevermos nosso template, o JSX logo foi mal visto e, realmente, ele pode parecer estranho no começo. Foi considerado um retrocesso no início por mesclar a estrutura do DOM com a lógica da aplicação, mas se mostrou poderoso posteriormente.

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, o JSX 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.

const nav = (   <nav className="menu">     <ul>       <li><a href="#">Home</a></li>       <li><a href="#">About</a></li>     </ul>   </nav> )

O que é JSX?

Em resumo, JSX é uma sintaxe semelhante ao XML, na qual você consegue escrever e compreender de uma forma melhor 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. Isso não requer um novo conhecimento nem precisamos abandonar o Javascript.

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

var nav = React.createElement(   "nav",   { className: "menu" },   React.createElement(     "ul",     null,     React.createElement(       "li",       null,       React.createElement(         "a",         { href: "#" },         "Home"       )     ),     React.createElement(       "li",       null,       React.createElement(         "a",         { href: "#" },         "About"       )     )   ) );

Viu? Eu já havia citado que isso não é HTML.

Element

No exemplo acima, o transpiler englobou os nós com a função React.createElement. Isso se dá porque neste caso, utilizamos o preset babel-preset-react e 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.

<h1 className="title">Hello World</h1>

Isso irá ser transpilado para isto:

React.createElement(   "h1",   { className: "title" },   "Hello World" );

Parâmetros da função createElement:

• Type

• Propriedades

• Children

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

 {   type: 'h1',   props: { className: 'title' },   children: ['Hello World'], }

Méritos do JSX

• Por se parecer com HTML, pessoas menos técnicas 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 além do React que utilizam JSX.

• Preact

• Inferno

• React-Native

• Vuejs(Opcional)