Scribd
Carregar
12 visualizações

JavaScript em JSX com chaves

Enviado por

jose.silva690000
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
12 visualizações

JavaScript em JSX com chaves

Enviado por

jose.silva690000
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 18

JavaScript em JSX com chaves

A sintaxe JSX permite que você escreva tags similares ao HTML dentro de um
arquivo JavaScript, mantendo a lógica de renderização e o conteúdo no
mesmo local.

Às vezes, você pode querer adicionar um pouco de lógica JavaScript ou


referenciar uma propriedade dinâmica dentro deste bloco de tags.

Nessa situação, você pode usar chaves em seu JSX para abrir uma janela para
o JavaScript.
JavaScript em JSX com chaves

Como passar strings com aspas


Quando você quiser passar um atributo
de string para a JSX, coloque-o entre
aspas simples ou duplas:

Neste caso, "https://i.imgur.com/7vQD0fPs.jpg" e


"Gregorio Y. Zara" estão sendo passados como strings.
JavaScript em JSX com chaves

Especificar dinamicamente o atributo

src ou alt? Você poderia usar um


valor do JavaScript substituindo "
e " por { e }:
JavaScript em JSX com chaves

Qualquer expressão JavaScript funcionará entre chaves, incluindo chamadas de função como
formatDate():
Onde usar chaves

Você só pode usar chaves de duas maneiras dentro da JSX:


✓ Como texto diretamente dentro de uma tag JSX: <h1>{nome}'s To Do List</h1>
funciona.
✓ Como atributos imediatamente após o sinal =: src={avatar} lerá a variável avatar,
mas src="{avatar}" passará a string "{avatar}".
Uso de “chaves duplas”: CSS e outros objetos em JSX

Para passar um objeto JS em JSX, você deve envolver o objeto em outro par de
chaves: person={{ name: "Hedy Lamarr", inventions: 5 }}.

O React não exige que você use estilos inline (as classes CSS funcionam muito
bem na maioria dos casos). Mas quando você precisa de um estilo inline, você
passa um objeto para o atributo style
Expressões dentro de um objeto

Você pode colocar várias expressões dentro de um objeto e referenciá-las em seu JSX dentro
de chaves:
o objeto JavaScript person contém uma
string name e um objeto theme
Recapitulando

✓ Os atributos JSX entre aspas são passados como strings.


✓ As chaves permitem que você inclua a lógica e as variáveis do JavaScript em
seu bloco de tags.
✓ Elas funcionam dentro do conteúdo da tag JSX ou imediatamente após = em
atributos.
✓ {{ e }} não é uma sintaxe especial: é um objeto JavaScript colocado entre
chaves JSX.
Renderizando Listas

✓ Como renderizar componentes a partir de um array usando map() do JavaScript


✓ Como renderizar apenas componentes específicos usando filter() do JavaScript
✓ Quando e por que usar as keys do React
Renderizando dados de arrays

Você pode armazenar esses dados em objetos ou arrays JavaScript e usar


métodos como map() e filter() para renderizar listas de componente
Mover os dados para um array
Filtrando arrays de itens
Vamos supor que você queira exibir somente as pessoas cuja profissão seja 'chemist'. Neste caso, voce pode
usar o método filter() do JavaScript para retornar apenas essas pessoas. Este método recebe um array de itens,
os quais são submetidos a um “teste” (uma função que retorna true ou false), e retorna um novo array contendo
apenas aqueles itens os quais passaram no teste (retornaram true).
Filtrando somente ‘chemist’
Você quer apenas os
itens onde profession
seja 'chemist'. A função
“teste” para isto ficaria
assim (person) =>
person.profession ===
'chemist'
Filtrando somente ‘chemist’
Mantendo itens em ordem com key

Em vez de gerar keys em tempo real, você deve incluí-las em seus


dados
Mantendo itens em ordem com key
Informações gerais Keys
Recapitulando

✓ Como mover dados para fora de componentes e para dentro de estruturas como arrays ou objetos.
✓ Como gerar conjuntos de componentes similares com o map() do JavaScript.
✓ Como criar arrays de itens filtrados com o filter() do JavaScript.
✓ Porquê e como definir key em cada componente dentre uma coleção para que o React possa
acompanhar cada um deles mesmo se sua posição ou dados mudem.

Você também pode gostar