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)
Isac Junior
Posts