JSX

Construir até mesmo uma pequena interface com JavaScript puro significa fazer várias coisas em sequência: criar um elemento, definir sua classe, definir seu texto, depois anexá-lo à página. O markup e o código que o controla ficam separados, e mantê-los sincronizados fica cada vez mais difícil conforme a interface cresce. JSX fecha essa lacuna: o markup fica diretamente dentro do seu JavaScript, perto o suficiente para que você possa misturá-los livremente em vez de manter templates e scripts separados.

Markup dentro de JavaScript

Como JSX é JavaScript, você pode colocar qualquer expressão JavaScript nele envolvendo-a entre chaves, {}. Uma variável, uma chamada de função, um cálculo, qualquer valor que você precise, vai direto no markup onde você digitaria texto estático.

const name = 'Ada'
return <p className="greeting">Olá, {name}</p>

Aqui {name} é substituído pelo valor da variável name quando isso é renderizado, então a página mostra "Olá, Ada". Fora das chaves, tudo é markup; dentro delas, você está de volta ao JavaScript puro.

Algumas regras vêm com JSX. A maioria dos atributos usa camelCase em vez dos nomes em letras minúsculas com hífen que o HTML usa, então é className, htmlFor e tabIndex em vez de class, for e tabindex, enquanto atributos ARIA e data- mantêm seus hífens, como em aria-hidden e data-testid. Toda tag tem que ser fechada, inclusive as que ficariam abertas em HTML, então <img /> e <br /> precisam daquele traço de fechamento. E um componente só pode retornar um elemento raiz. Se você precisa retornar dois elementos lado a lado sem envolvê-los num <div> extra, envolva-os num fragment, escrito como colchetes angulares vazios:

return (
  <>
    <h1>Título</h1>
    <p>Algum texto</p>
  </>
)

Como JSX difere do HTML

JSX parece próximo o suficiente do HTML para que as diferenças sejam sutis o bastante para você não notar até que elas causem problemas. Os nomes dos atributos são a primeira: class vira className, porque class é uma palavra reservada em JavaScript. O atributo style é outro: em HTML é uma string de CSS, mas em JSX recebe um objeto JavaScript, com nomes de propriedades em camelCase e valores como strings.

<div style={{ backgroundColor: 'lightblue', fontSize: '18px' }}>Estilizado</div>

As chaves externas {} aqui são as mesmas que embutem qualquer expressão, e as chaves internas {} são o literal do objeto sendo embutido, o que é o motivo pelo qual um atributo style em JSX acaba com duas chaves seguidas.

A outra diferença é o que é permitido dentro de {}. Isso só aceita expressões, coisas que produzem um valor, como uma variável, uma chamada de função, ou um ternário. Não aceita statements, então um if ou um loop for não pode ir diretamente dentro de chaves no seu markup. Quando você precisa daquele tipo de lógica, você a executa acima do return e embutir o resultado em vez disso.

Nos bastidores, JSX é compilado para chamadas de função JavaScript puro antes de chegar ao navegador. Isso é mais um detalhe de ferramental do que algo em que você vai pensar no dia a dia, e o capítulo Beyond the basics retorna a isso uma vez que o resto do React está no lugar.

JSX é açúcar sintático. O compilador transforma cada elemento numa chamada a React.createElement ou, com o runtime JSX automático que as ferramentas deste curso usam (padrão desde React 17, e o padrão que você vai conseguir em qualquer setup moderno), uma chamada equivalente gerada pela ferramenta de build sem você precisar de React em escopo. O exemplo anterior compila para algo próximo a React.createElement('p', { className: 'greeting' }, 'Olá, ', name).

Esse passo de compilação é exatamente o motivo pelo qual {} só contém expressões. Cada {} vira um argumento passado para aquela chamada de função, e um argumento de função tem que avaliar para um valor. Um statement como if ou for não produz um valor, então não pode estar onde um argumento é esperado. Um ternário funciona inline porque é uma expressão; um if não, porque é um statement. Quando a lógica é mais do que um ternário consegue manter de forma limpa, calcule o valor numa variável acima do return e embutir aquela variável em vez disso.

JunoJSX é markup com JavaScript misturado A coisa principal para se lembrar: {} é sua porta de volta ao JavaScript de dentro do markup. Qualquer coisa entre essas chaves é um valor, uma variável, um cálculo, uma chamada de função, e aparece direto na página. Todo o resto segue daí: className em vez de class, fechando toda tag, e um elemento raiz por return.

JunoJSX é markup com JavaScript misturado Trate {} como seu slot de expressão: variáveis, chamadas de função, ternários, tudo bem, statements como if não. Combine isso com as diferenças de nomenclatura, className, htmlFor, style como um objeto, e JSX para de parecer uma variante de HTML e começa a parecer o que é, JavaScript vestindo sintaxe de markup.

JunoJSX é markup com JavaScript misturado Cada {} compila para um argumento de função, que é exatamente a razão pela qual expressões funcionam lá e statements não. Mantenha esse modelo mental e as outras peculiaridades de JSX, atributos camelCase, o objeto style, tags auto-fecháveis, param de parecer regras arbitrárias e começam a parecer consequências de "isso são chamadas React.createElement disfarçadas."

Próximo: Styling components, onde esses elementos ganham seu visual.