Writing Markup with JSX

JSX: Colocando marcação em JavaScript

A Web foi construída em HTML, CSS e JavaScript. Por muitos anos, os desenvolvedores da Web mantiveram o conteúdo em HTML, o design em CSS e a lógica em JavaScript — muitas vezes em arquivos separados! O conteúdo era marcado dentro do HTML enquanto a lógica da página vivia separadamente no JavaScript:

Mas à medida que a Web se tornava mais interativa, a lógica determinava cada vez mais o conteúdo. O JavaScript ficou a cargo do HTML! É por isso que no React, a lógica de renderização e a marcação vivem juntas no mesmo lugar — os componentes.

Manter a lógica de renderização e a marcação de um botão juntas garante que eles permaneçam sincronizados entre si em todas as edições. Por outro lado, os detalhes não relacionados, como a marcação do botão e a marcação da barra lateral, são isolados uns dos outros, tornando mais seguro alterar qualquer um deles por conta própria.

Cada componente do React é uma função JavaScript que pode conter alguma marcação que o React renderiza no navegador. Os componentes do React usam uma extensão de sintaxe chamada JSX para representar essa marcação. O JSX se parece muito com o HTML, mas é um pouco mais rígido e pode exibir informações dinâmicas. A melhor maneira de entender isso é converter alguma marcação HTML em marcação JSX.

Convertendo HTML em JSX

Suponha que você possua um HTML (perfeitamente válido):

<h1>Ferramentas do Hedy Lamarr</h1>
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  class="photo"
>
<ul>
    <li>Inventar novos semáforos
    <li>Ensaiar uma cena de filme
    <li>Melhorar a tecnologia espectral
</ul>

E você quer colocar dentro do seu componente:

export default function ListaDeTarefas() {
  return (
    // ???
  )
}

Se você copiar e colar como está, não funcionará:

Isso ocorre porque o JSX é mais rígido e possui algumas regras a mais que o HTML! Se você ler as mensagens de erro acima, elas o guiarão para corrigir a marcação ou você poderá seguir o guia abaixo.

As Regras do JSX

1. Retornar um único elemento raiz

Para retornar vários elementos de um componente, envolva-os com uma única tag pai.

Por exemplo, você pode usar uma <div>:

<div>
  <h1>Tarefas do Hedy Lamarr</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="foto"
  >
  <ul>
    ...
  </ul>
</div>

Se você não quiser adicionar uma <div> extra à sua marcação, você pode escrever <> e </> em vez disso:

<>
  <h1>Tarefas do Hedy Lamarr</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

Essa tag vazia é chamada de Fragmento. Os fragmentos permitem que você agrupe coisas sem deixar rastros na árvore HTML do navegador.

2. Fechar todas as tags

O JSX requer que as tags sejam explicitamente fechadas: tags de fechamento automático como <img> devem se tornar <img />, e tags de empacotamento como <li>laranjas devem ser escritas como <li>laranjas</li> .

É assim que a imagem e os itens da lista de Hedy Lamarr ficam fechados:

<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="foto"
   />
  <ul>
    <li>Inventar novos semáforos</li>
    <li>Ensaiar uma cena de filme</li>
    <li>Melhorar a tecnologia espectral</li>
  </ul>
</>

3. camelCase em todas na maioria das coisas!

JSX se transforma em JavaScript e atributos escritos em JSX se tornam chaves de objetos JavaScript. Em seus próprios componentes, muitas vezes você desejará ler esses atributos em variáveis. Mas JavaScript tem limitações em nomes de variáveis. Por exemplo, seus nomes não podem conter hífens ou palavras reservadas como class.

É por isso que, no React, muitos atributos HTML e SVG são escritos em camelCase. Por exemplo, em vez de stroke-width você usa strokeWidth. Já que class é uma palavra reservada, no React você escreve className, nomeado após a propriedade DOM correspondente:

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="foto"
/>

Você pode encontrar todos esses atributos na lista de propriedades do componente DOM. Se você errar, não se preocupe — o React imprimirá uma mensagem com uma possível correção para o console do navegador.

Dica: use um conversor JSX

Converter todos esses atributos em marcação pode ser tedioso! Recomendamos o uso de um conversor para traduzir seu HTML e SVG existentes para JSX. Os conversores são muito úteis na prática, mas ainda vale a pena entender o que está acontecendo para que você possa escrever JSX confortavelmente por conta própria.

Aqui está seu resultado final: