Escrevendo Markup com JSX

JSXé uma extensão de sintaxe para JavaScript que permite escrever marcação semelhante a HTML dentro de um arquivo JavaScript. Embora existam outras formas de escrever componentes, a maioria dos desenvolvedores React prefere a concisão do JSX, e a maioria das bases de código o utiliza.

JSX: Colocando marcação em JavaScript

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

HTML

JavaScript

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

Sidebar.jsComponente React

Form.jsComponente React

Manter a lógica de renderização e a marcação de um botão juntas garante que elas permaneçam sincronizadas uma com a outra em cada edição. Por outro lado, detalhes que não estão relacionados, como a marcação do botão e a marcação de uma barra lateral, são isolados uns dos outros, tornando mais seguro alterar qualquer um deles por conta própria.

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

Convertendo HTML para JSX

Suponha que você tenha algum HTML (perfeitamente válido):

E você quer colocá-lo em seu componente:

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

Isso ocorre porque o JSX é mais rigoroso e tem 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ê pode seguir o guia abaixo.

As Regras do JSX

1. Retorne 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>:

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

Esta tag vazia é chamada deFragmento.Fragmentos permitem que você agrupe elementos sem deixar nenhum rastro na árvore HTML do navegador.

2. Feche todas as tags

JSX exige que as tags sejam explicitamente fechadas: tags auto-fecháveis como<img>devem se tornar<img />, e tags de abertura e fechamento como<li>orangesdevem ser escritas como<li>oranges</li>.

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

3. Use camelCase paraquase tudo!

JSX é transformado em JavaScript e os atributos escritos em JSX se tornam chaves de objetos JavaScript. Em seus próprios componentes, você frequentemente desejará ler esses atributos em variáveis. Mas o JavaScript tem limitações nos nomes de variáveis. Por exemplo, seus nomes não podem conter traços ou serem palavras reservadas comoclass.

É por isso que, no React, muitos atributos HTML e SVG são escritos em camelCase. Por exemplo, em vez destroke-widthvocê usastrokeWidth. Comoclassé uma palavra reservada, no React você escreveclassNameem vez disso, nomeado após apropriedade DOM correspondente:

Você podeencontrar todos esses atributos na lista de props dos componentes DOM.Se você errar um, não se preocupe—o React imprimirá uma mensagem com uma possível correção noconsole do navegador.

Dica profissional: Use um conversor de JSX

Converter todos esses atributos em marcações existentes pode ser tedioso! Recomendamos usar umconversorpara 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á o seu resultado final:

Recapitulação

Agora você sabe por que o JSX existe e como usá-lo em componentes:

• Os componentes React agrupam a lógica de renderização junto com a marcação porque eles estão relacionados.
• JSX é semelhante ao HTML, com algumas diferenças. Você pode usar umconversorse precisar.
• As mensagens de erro geralmente apontam na direção certa para corrigir sua marcação.