Learn React
Describing the UI

JavaScript in JSX with Curly Braces

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.

Você aprenderá

  • Como passar strings com aspas
  • Como fazer referência a uma variável JavaScript dentro do JSX usando chaves
  • Como chamar uma função JavaScript dentro da JSX com chaves
  • Como usar um objeto JavaScript dentro da JSX com chaves

Passando strings com aspas

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

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

Neste caso, "https://i.imgur.com/7vQD0fPs.jpg" e "Gregorio Y. Zara" estão sendo passados como strings.

Mas e se você quiser especificar dinamicamente o atributo src ou alt? Você poderia usar um valor do JavaScript substituindo " e " por { e }:

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

Note a diferença entre className="avatar", que especifica um nome de classe CSS "avatar" para tornar a imagem redonda, e src={avatar}, que lê o valor da variável JavaScript chamada avatar. Isso ocorre porque as chaves permitem que você trabalhe com JavaScript diretamente em seu bloco de tags!

Usando chaves: Uma janela para o mundo do JavaScript

JSX é uma forma especial de escrever JavaScript. Isso significa que é possível usar JavaScript dentro dele - com chaves { }. O exemplo abaixo primeiro declara um nome para o cientista, name, e depois insere o nome dentro do <h1> com chaves:

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

Tente trocar o valor do name de 'Gregorio Y. Zara' para 'Hedy Lamarr'. Está vendo como o título da lista muda?

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

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

Onde usar chaves

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

  1. Como texto diretamente dentro de uma tag JSX: <h1>{nome}'s To Do List</h1> funciona, mas <{tag}>Gregorio Y. Zara's To Do List</{tag}> não.
  2. Como atributos imediatamente após o sinal =: src={avatar} vai ler a variável avatar, mas src="{avatar}" vai passar a string "{avatar}".

Uso de “chaves duplas”: CSS e outros objetos em JSX

Além de strings, números e outras expressões JavaScript, você pode até passar objetos em JSX. Os objetos também são denotados por chaves, como { name: "Hedy Lamarr", inventions: 5 }. Portanto, para passar um objeto JS em JSX, você deve envolver o objeto em outro par de chaves: person={{ name: "Hedy Lamarr", inventions: 5 }}.

Você pode ver isso com estilos CSS inline no JSX. 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:

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

Tente alterar os valores de backgroundColor e color.

Você pode ver claramente o objeto JavaScript dentro das chaves quando o escreve dessa forma:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

Da próxima vez que você vir {{ e }} em JSX, saiba que isso é nada mais do que um objeto dentro das chaves de JSX!

Pitfall

As propriedades de inline style são escritas em camelCase. Por exemplo, o HTML <ul style="background-color: black"> seria escrito como <ul style={{ backgroundColor: 'black' }}> em seu componente.

Mais diversão com objetos JavaScript e chaves

Você pode colocar várias expressões dentro de um objeto e referenciá-las em seu JSX dentro de chaves:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

Neste exemplo, o objeto JavaScript person contém uma string name e um objeto theme:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

O componente pode usar os valores de person da seguinte forma:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

JSX é uma linguagem de tags mínima, pois permite que você organize dados e lógica usando JavaScript.

Recap

Agora você sabe quase tudo sobre JSX:

  • 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 = nos atributos.
  • {{ e }} não é uma sintaxe especial: é um objeto JavaScript colocado entre chaves JSX.

Try out some challenges

Challenge 1 of 3:
Corrija o erro

Esse código é interrompido com um erro que diz Objects are not valid as a React child:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

Você consegue identificar o problema?

PreviousWriting Markup with JSXNextPassing Props to a Component

How do you like these docs?