Olá pessoas desenvolvedoras de Software 🖖

Neste artigo que compartilhar com vocês sobre o JSX, que é uma tecnologia que foi introduzida no ReactJS. Prepara a sua bebida ☕ favorita e vem comigo. Boa leitura ✊🏾

Introdução ao JSX

JSX é uma tecnologia que nos permite escrever JavaScript que se parece muito com HTML.

O React pode funcionar normalmente sem o uso do JSX, o que acontece é que o JSX é uma tecnologia que nos ajuda a trabalhar com componentes e o React se benefícia muito da tecnologia.

Embora que nos paradigmas anteriores o JSX foi visto como uma má prática, em que temos que misturar JavaScript com a marcação (HTML) no mesmo lugar, acbou por revelar-se que a combinação da parte visual (view) com a funcionalidade, torna o racíonio sobre a view mais clara.

P.S. JSX é o acronímo de JavaScriptXML

JSX

Digamos que pretendemos definir a tag h1 contendo uma string. Definimos desse jeito:

Parece que misturamos JavaScript e HTML, mas não, o que temos aí é apenas JavaScript e o que parece HTML, é o que chamamos de syntatic sugar para definir componentes e a posição que ocupa na marcação.

Podemos inserir atributos no JSX de maneira muito simples:

Também podemos envolver componentes de forma simples. Temos uma tag main e, queremos envolver nele dois componentes, fazemos algo parecido como na imagem abaixo.

Nós envolvemos dois componentes em na tag main. Porque? Por que a função render() só pode retornar um único elemento. Quando são váraios, como na imagem acima, eles precisam ser agrupados para que a renderização de fato aconteça.

Transpilando JSX

Os navegadores web são configurados apenas para ler JS. Pois embora semelhante, o JSX não é o mesmo que o JS. Dá para fazer funcionar, no entanto. O que teremos que fazer é simplesmente transformar o JSX em JavaScript.

Como? transpilando o código.

Vejamos um exemplo:

JS puro

JSX

As duas estruturas são equivalentes. São apenas exemplos básicos, pode-se notar como é complicado a sintaxe usando o JS puro em comparação com o JSX.

A forma mais popular que temos para transpilar código JSX para JS é o babel, que é a opção padrão quando usamos o create-react-app, no caso de você usar, não precisa se preocupar, tudo acontece por baixo dos panos para você.

Caso não use o create-react-app você precisa configura o babel.

JS no JSX

JSX aceita qualquer tipo de JavaScript. Sempre que precisar adicionar qualquer JS, o que precisa fazer é apenas colocar dentro dos parenteses {} . Vamos definir uma constante e usa-lá.

Temos um exemplo básico. Os parenteses aceitam qualquer código JavaScript:

Como você pode notar, aninhamos JS dentro de JSX definido dentro do JS e aninhado dentro do JSX. Caso queira ir mais afundo, só vai 😊.

HTML no JSX

JSX assemelha-se ao HTML, mas não é HTML, é apenas a sintaxe XML. E no final do dia o que você acaba renderizando é HTML, então o que você precisa saber são as diferenças de como definimos as coisas no HTML, e como definimos no JSX.

No JSX você precisa fechar todas tags

Igual se fazia no XHTML, você precisa fechar todas as tags: no HTML temos <br>, no JSX temos os chamados self-closing tag <br /> e o mesmo vale para todas as outras tags que têm abertura apenas.

Padrão camelCase no JSX

No HTML os atributos são desse jeito onchange. No JSX, são todos renomeados, usando a estrutura camelCase:

- onclick => onClick

- onsubmit => onSubmit

- onchange => onChange

No JSX as class se tornam className

Lembra que JSX é JS, e no JavaScript a class é uma palavra reservada, então você não pode escreve-lá.

HTML

JSX

O mesmo vale para o for que fica htmlFor.

CSS no React

O atributo style no HTML nos permite especificar estilo inline. No JSX não aceita strings. O JSX nos providencia uma forma UAU de definir estilos.

Antigamente era algo normal escrever estilos inline no HTML, algo que agora é indemonizado 😁. No JSX não é a mesma coisa, o JSX antes de aceita uma string contendo as propriedades do CSS, o atributo style aceita apenas um objeto. O que significa que você precisa definir um objeto.

Os valores do CSS que escrevemos no JSX, são legeiramente diferentes do CSS puro:

o nome das propriedades são camelCase
os valores são strings
você precisa separar cada tupla com uma vírgula

Os estlios inline no JSX é tão UAU até você precisar:

escrever media queries
estilizar animações
referenciar uma pseudo classa :hover
referenciar um pseudo elemento ::last-child

O que acontece é que os estilos inlines no JSX cobrem apenas o básico.

Formulários no JSX

JSX mudou a maneira de como os formulários HTML funcionam, como o objetio de deixar as coisas facilitadas para as pessoas desenvolvedoras.

value e defaultValue

O atributo value sempre contém o valor atual do campo O atributo defaultValue contém o valor padrão que foi definido quando o campo foi criado

O que nos ajuda a resolver comportamentos estranhos de interação regular do DOM.

Vejamos o campo textarea no HTML:

No JSX:

Para o campo select no HTML usamos dessa forma:

No JSX:

Espaço em branco no JSX

Existem duas regras para inserir espaços vazios no JSX:

Espaço em branco horizontal

Se temos espaço em branco entre elementos na mesma linha, é reduzido para 1 espaço em branco apenas.

<p>Bem        vindo        aqui</p>

Como resultado:

<p>Bem vindo aqui</p>

Espaço em branco vertical

<p>
    Bem
    vindo
    aqui
</>

Como resultado:

<p>Bemvindoaqui</p>

Para corrigir esse problema dos espaços em branco vertical, adicionamos uma express como essa:

<p>
    Bem
    {' '}vindo
    {' '}aqui
</p>

<p>
    Bem
    {' vindo '}
    aqui
</p>

Adicionando comentários no JSX

Adicionamos comentários no JSX usando o forma normal de adicionar comentarios no JavaScript dentro de uma expressão:

<p>
   {/* comentário */}
   { // outro comentário }
</p>

Fazendo spread de atributos no JSX

A operação comum no JSX é assinalar o valor no atributo. Ao invés de fazer manualmente:

Também podemos passar desse jeito:

Graças ao Spread operator do ES6 as propriedades do objeto data seram usados como atributo de forma automática.

Como fazer loop no JSX

Suponhamos que temos um conjuto de frutas e precisamos fazer um loop nelas para gerar um partial, criamos um loop e adicionamos o JSX a um array.

Quando renderizarmos o JSX podemos gravar o arry some apenas envolvendo ele entre parenteses:

Também podemos fazer direitamente no JSX, usando map ao invés do for-of .

Antes de terminar...

Admito que é um artigo meio longo, mas se chegou até aqui me sinto realizado como autor do artigo e tudo que tenho para lhe dizer é MUITO OBRIGADO 🤓.

Se gostou do artigo e foi útil para você, por favor dê um Like e Compartilhe. No caso de dúvida ou quelquer comentário, me chame lá no Twitter.

Tag

#2Articles1Week

Entendendo JSX