O que é JSX?

JSX é uma sintaxe tipo XML/HTML usada pelo React que amplia o ECMAScript para que o texto tipo XML/HTML possa coexistir com o código JavaScript/React. A sintaxe destina-se a ser usada por pré-processadores (ou seja, transpilers como Babel) para transformar texto semelhante a HTML encontrado em arquivos JavaScript em objetos JavaScript padrão que um mecanismo de JavaScript irá analisar.

Basicamente, ao usar o JSX, você pode escrever estruturas concisas HTML/XML (por exemplo, DOM como estruturas de árvore) no mesmo arquivo que você escreve código JavaScript, então o Babel irá transformar essas expressões em código JavaScript real. Ao contrário do passado, em vez de colocar o JavaScript em HTML, o JSX nos permite colocar o HTML em JavaScript.

Ao usar o JSX, pode-se escrever o seguinte código JSX / JavaScript:

var nav = (
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
);

O Babel Vai transformar para isso:

var nav = React.createElement(
   "ul",
   { id: "nav" },
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Home"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "About"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Clients"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Contact Us"
      )
   )
);

Você pode pensar em JSX como uma abreviatura para chamar React.createElement ().

A idéia de misturar HTML e JavaScript no mesmo arquivo pode ser um tópico bastante controverso. Ignore o debate. Use-o se você achar útil. Caso contrário, escreva o código React necessário para criar elementos React. Sua escolha. Minha opinião é que o JSX fornece uma sintaxe concisa e familiar para definir uma estrutura de árvore com atributos que não requerem aprender um idioma de modelo ou deixar o JavaScript. Ambos os quais podem ser uma vitória ao construir grandes aplicativos.

Isso deve ser óbvio, mas JSX é mais fácil de ler e escrever sobre grandes de chamadas de função JavaScript ou literais de objeto (por exemplo, contraste as duas amostras de código nesta seção). Além disso, a equipe React acredita claramente que o JSX é mais adequado para definir a UI do que uma solução tradicional de modelos (por exemplo, Handlebars):

Marcação e o código que o gera está intimamente vinculado. Além disso, a lógica de exibição é muitas vezes muito complexa e o uso de linguagens de modelo para expressar torna-se complicado. Descobrimos que a melhor solução para este problema é gerar árvores de HTML e componentes diretamente do código JavaScript, de modo que você possa usar todo o poder expressivo de uma linguagem de programação real para criar UIs.

Observações

• Não pense no JSX como um template. Ao invés disso, pense no JSX como uma sintaxe JS alternativa que precisa ser compilada. Ou seja, JSX é simplesmente a conversão de marcação tipo XML para Javascript.
• O Babel é uma escolha subjetiva do time do React para transformar código ES* e JSX em código ES5. Você pode aprender maisw sobre Babel em http://babeljs.io/ ou por ler o Babel handbook.
• Alguns méritos do JSX são:
  • Pessoas com menos conhecimento técnico ainda assim conseguem entender e modificar as partes desejadas. Desenvolvedores CSS e designers vão achar JSX mais familiar do que o JavaScript sozinho. Ou seja, marcação HTML, usando o JSX, parece ser marcação HTML ao invés de uma pirâmide de funções createElement().
  • Você pode tirar vantagem do poder do JavaScript no HTML e evitar aprender ou usar uma linguagem de templates. JSX não é uma solução template. É uma sintaxe declarativa usada para expressar uma estrutura em árvore de elementos da UI e componentes.
  • Por adicionar o passo de transformação JSX você achará erros no seu HTML que talve de outra maneira não acharia.
  • JSX promove a ideia de estilo inline. O que pode ser uma coisa boa.
• Esteja ciente dos Gotchas.
• JSX é uma coisa separada do React em si. O JSX não cumpre quaisquer especificações XML ou HTML. O JSX é projetado como um recurso ECMAScript e a semelhança com XML/HTML é apenas na superfície (ou seja, parece XML/HTML para que você possa apenas escrever algo familiar). A especificação do JSX está sendo criada para ser usado por qualquer pessoa como uma extensão de sintaxe de XML como ECMAScript sem qualquer semântica definida.
• No JSX, <foo-bar /> sozinho é válido enquanto <foo-bar> sozinho não é. Você tem de fechar todas as tags, sempre.