Como criar elementos React com o JSX

O autor selecionou a Creative Commons para receber uma doação como parte do programa Write for DOnations.

Introdução

Neste tutorial, você aprenderá como descrever elementos com o JSX. O JSX é uma abstração que permite que você escreva uma sintaxe do tipo HTML em seu código JavaScript. Ele permitirá que você compile componentes do React que se parecem com o markup HTML padrão. O JSX é a linguagem de modelagem dos elementos React. Sendo assim, ele é a base para qualquer markup que o React irá renderizar em seu aplicativo.

Como o JSX também permite que você escreva JavaScript em seu markup, você será capaz de aproveitar as funções e métodos do JavaScript, incluindo o mapeamento de matriz e a avaliação de curto-circuito para condicionais.

Como parte do tutorial, você irá captar eventos de clique em botões diretamente no markup e capturar instâncias quando a sintaxe não corresponder exatamente ao HTML padrão, tal como com as classes CSS. No final deste tutorial, você terá um aplicativo funcional que usa uma variedade de recursos do JSX para exibir uma lista de elementos que têm um ouvinte de cliques integrado. Este é um padrão comum em aplicativos React que você usará frequentemente no aprendizado do framework. Você também será capaz de misturar elementos HTML padrão com o JavaScript para ver como o React proporciona a capacidade de criar pedaços pequenos e reutilizáveis de código.

Pré-requisitos

• Você precisará de um ambiente de desenvolvimento executando o Node.js; este tutorial foi testado na versão 10.19.0 do Node.js e versão 6.13.4 do npm. Para instalar essa versão em macOS ou Ubuntu 18.04, siga os passos descritos no artigo sobre Como instalar o Node.js e criar um ambiente de desenvolvimento local em macOS ou a seção intitulada Instalando usando um PPA, do artigo sobre Como instalar o Node.js no Ubuntu 18.04.

• Você precisará ser capaz de criar aplicativos com o Create React App. Você pode encontrar instruções para instalar um aplicativo com o Create React App em Como configurar um projeto React com o Create React App.

• Você também precisará de um conhecimento básico do JavaScript, que você pode encontrar em Como programar em JavaScript, além de com um conhecimento básico de HTML e CSS. Um boa fonte de recursos para HTML e CSS é a Rede de desenvolvedor Mozilla.

Passo 1 — Adicionando um markup a um elemento React

Como mencionado anteriormente, o React tem uma linguagem de marcação especial chamada JSX. É uma mistura da sintaxe HTML e JavaScript, que se parece com esta:

<div>
  {inventory.filter(item => item.available).map(item => (
    <Card>
        <div className="title"}>{item.name}</div>
        <div className="price">{item.price}</div>
    </Card>
    ))
  }
</div>

Você reconhecerá algumas funcionalidades do JavaScript, como .filter e .map, além de algumas do HTML padrão, como o <div>. Mas existem outras partes que se parecem com ambos o HTML e JavaScript, como o <Card> e className.

Este é o JSX, a linguagem de marcação especial que dá aos componentes React a sensação do HTML com o poder do JavaScript.

Neste passo, você aprenderá a adicionar uma sintaxe básica do tipo HTML a um elemento React existente. Para começar, você adicionará elementos HTML padrão a uma função JavaScript. Em seguida, verá o código compilado em um navegador. Você também agrupará elementos para que o React possa compilá-los com um markup mínimo, deixando HTML limpo no resultado.

Para começar, crie um novo projeto. Em sua linha de comando, execute o script a seguir para instalar um novo projeto usando o create-react-app:

npx create-react-app jsx-tutorial

Após o projeto ser finalizado, vá para o diretório:

cd jsx-tutorial

Em uma nova guia ou janela do terminal, inicie o projeto usando o script start do Create React App. O navegador irá atualizar automaticamente com as alterações. Dessa forma, deixe este script em execução durante todo o tempo em que você estiver trabalhando:

npm start

Você receberá um servidor local em execução. Se o projeto não abriu em uma janela de navegador, você pode encontrá-lo em http://localhost:3000/. Se estiver executando ele a partir de um servidor remoto, o endereço será http://your_IP_address:3000.

Seu navegador carregará com um aplicativo React incluído como parte do Create React App.

Você irá desenvolver um conjunto completamente novo de componentes personalizados. Assim, será necessário começar removendo um pouco de código boilerplate para que você possa ter um projeto vazio. Para iniciar, abra o App.js em um editor de texto. Esse é o componente raiz que é injetado na página. Todos os componentes iniciarão a partir daqui.

Em um novo terminal, vá para a pasta do projeto e abra o src/App.js com o seguinte comando:

nano src/App.js

Você verá um arquivo como este:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Agora, exclua a linha import logo from './logo.svg e tudo o que vem depois da instrução de retorno na função. Altere-a para retornar null (nulo). O código final ficará parecido com este:

import React from 'react';
import './App.css';

function App() {
  return null;
}

export default App;

Salve e saia do editor de texto.

Por fim, exclua o logo. Na janela do terminal, digite o seguinte comando:

rm src/logo.svg

Você não usará este arquivo SVG em seu aplicativo e é aconselhável remover arquivos não utilizados durante o trabalho. Dessa forma, seu código ficará mais organizado a longo prazo.

Agora que essas partes do seu projeto foram removidas, continue para explorar as facetas do JSX. Essa linguagem de marcação é compilada pelo React e eventualmente torna-se o HTML que você vê em uma página Web. Sem aprofundar-nos no sistema interno, o React recebe o JSX e cria um modelo de como será sua página. Em seguida, cria os elementos necessários e adiciona-os à página.

Isso significa que você pode escrever algo que se parece com HTML e esperar que o HTML renderizado seja parecido com isso. No entanto, há alguns pontos a se considerar.

Primeiro, se você olhar para a guia ou janela executando seu servidor, verá isso:

Output
...
./src/App.js
  Line 1:8:  'React' is defined but never used  no-unused-vars
...

Esse é o linter dizendo que você não está usando o código React importado. Ao adicionar a linha import React from 'react' no seu código, você está importando o código JavaScript que converte o JSX em código React. Se não houver JSX, não há necessidade de importação.

Vamos alterar isso adicionando uma pequena quantidade de JSX. Comece substituindo null por um exemplo Hello, World:

import React from 'react';
import './App.css';

function App() {
  return <h1>Hello, World</h1>;
}

export default App;

Salve o arquivo. Se você olhar para o terminal com o servidor em execução, a mensagem de aviso não estará mais lá. Se você visitar seu navegador, verá a mensagem como um elemento h1.

Em seguida, abaixo do sinalizador <h1>, adicione um parágrafo que contém a string I am writing JSX (Eu estou escrevendo JSX). O código ficará parecido com este:

import React from 'react';
import './App.css';

function App() {
  return(
    <h1>Hello, World</h1>
    <p>I am writing JSX</p>
  )
}

export default App;

Como o JSX abrange várias linhas, você precisará colocar a expressão entre parênteses.

Salve o arquivo. Ao fazer isso, você verá um erro no terminal executando seu servidor:

Output
./src/App.js
  Line 7:5:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

   5 |   return(
   6 |     <h1>Hello, World</h1>
>  7 |     <p>I am writing JSX</p>
     |     ^
   8 |   )
   9 | }
  10 |

Ao retornar JSX de uma função ou instrução, você precisa retornar um único elemento. Esse elemento pode ter filhos aninhados, mas deve haver um único elemento de nível superior. Neste caso, você está retornando dois elementos.

A correção é uma pequena alteração no código. Cerque o código com um sinalizador vazio. Um sinalizador vazio é um elemento HTML sem palavras. Ele se parece com isto: <></>.

Volte para ./src/App.js em seu editor e adicione uma tag vazia:

import React from 'react';
import './App.css';

function App() {
  return(
    <>
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </>
  )
}

export default App;

O sinalizador vazio cria um único elemento, mas quando o código é compilado, ele não é adicionado ao markup final. Isso manterá seu código limpo, ao mesmo tempo em que dá ao React um único elemento.

Salve o código e saia do arquivo. Seu navegador irá atualizar e exibir a página atualizada com o elemento de parágrafo. Além disso, quando o código é convertido, os sinalizadores vazios são removidos:

Você adicionou um pouco de JSX básico ao seu componente e aprendeu como todo JSX precisa ser aninhado em um único componente. No próximo passo, você adicionará estilo ao seu componente.

Passo 2 — Adicionando estilo a um elemento com atributos

Neste passo, você irá estilizar os elementos em seu componente para aprender como os atributos HTML funcionam com o JSX. Há muitas opções de estilo no React. Algumas delas envolvem escrever CSS em Javascript, já outras, usam os pré-processadores. Neste tutorial, você trabalhará com CSS importado e classes de CSS.

Agora que você tem seu código, é hora de adicionar o estilo. Abra o App.css no seu editor de texto.

nano src/App.css

Como você está iniciando com um JSX novo, o CSS atual faz referência a elementos que não existem mais. Como você não precisa do CSS, você pode exclui-lo.

Após excluir o código, você terá um arquivo vazio.

Em seguida, você adicionará um estilo para centralizar o texto. Em src/App.css, adicione o código a seguir:

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

Nesse bloco de código, você criou um seletor de classe CSS chamado .container e usou ele para centralizar o conteúdo usando display: flex.

Salve o arquivo e saia. O navegador será atualizado, mas nada mudará. Antes de ver a mudança, você precisa adicionar a classe CSS ao seu componente React. Abra o código do componente JavaScript:

nano src/App.js

O código CSS já foi importado com a linha import '. /App.css. Isso significa que o webpack irá extrair o código para criar a folha de estilos final. No entanto, para aplicar o CSS aos seus elementos, você precisa adicionar as classes.

Primeiro, em seu editor de texto, mude os sinalizadores vazios, <>, para <div>.

import React from 'react';
import './App.css';

function App() {
  return(
    <div>
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

Nesse código, você substituiu as tags vazias — <> — por sinalizadores div. Os sinalizadores vazios são úteis para agrupar seu código sem adicionar sinalizadores extras, mas aqui você precisa usar um div, pois sinalizadores vazios não aceitam atributos HTML.

Em seguida, você precisa adicionar o nome da classe. É aqui que o JSX começará a se diferenciar do HTML. Se você quisesse adicionar uma classe a um elemento HTML usual, você faria isso da seguinte maneira:

<div class="container">

Mas, como o JSX é JavaScript, ele tem algumas limitações. Uma das limitações é que o JavaScript possui palavras-chave reservadas. Isso significa que você não pode usar certas palavras em qualquer código JavaScript. Por exemplo, você não pode criar uma variável chamada null, pois essa palavra já está reservada.

Uma das palavras reservadas é a class. O React contorna a limitação dessa palavra reservada modificando-a ligeiramente. Ao invés de adicionar o atributo class, você adicionará o atributo className. Via de regra, se um atributo não estiver funcionando como esperado, tente adicionar a versão com minúsculas concatenadas. Outro atributo que é ligeiramente diferente é o atributo for que você usaria para rótulos. Existem alguns outros casos, mas, felizmente, a lista é relativamente curta.

Agora que sabe como o atributo class é usado no React, atualize o código para incluir os estilos. Em seu editor de texto, adicione className="container" ao seu sinalizador inicial div:

import React from 'react';
import './App.css';

function App() {
  return(
    <div className="container">
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

Salve o arquivo. Ao fazer isso, a página será atualizada e o conteúdo será centralizado.

.

O atributo className é único no React. Você pode adicionar a maioria dos atributos HTML ao JSX sem alterações. Para demonstrar um exemplo, volte para seu editor de texto e adicione um id de greeting ao seu elemento <h1>. Ele se parecerá com HTML padrão:

import React from 'react';
import './App.css';

function App() {
  return(
    <div className="container">
      <h1 id="greeting">Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

Salve a página e atualize o navegador. Ele será o mesmo.

Até agora, o JSX se parece com um markup padrão. A vantagem do JSX é que, embora se pareça com HTML, ele possui o poder do JavaScript. Isso significa que você pode atribuir variáveis e referenciá-las em seus atributos. Para fazer referência a um atributo, coloque-o entre chaves — {} — em vez de aspas.

Em seu editor de texto, adicione as linhas destacadas a seguir para fazer referência a um atributo:

import React from 'react';
import './App.css';

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
     <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

Neste código, você criou uma variável acima da instrução return chamada greeting com o valor de "greeting". Em seguida, referenciou a variável no atributo id do seu sinalizador <h1>.

Salve e saia do arquivo. A página será a mesma, mas com um sinalizador id.

Até agora, você trabalhou com alguns elementos isoladamente, mas você também pode usar o JSX para adicionar muitos elementos HTML e aninhá-los para criar páginas complexas.

Para demonstrar isso, você criará uma página com uma lista de emojis. Estes emoji serão envolvidos com um elemento <button>. Ao clicar em um emoji, você receberá seu Nome simplificado em CLDR.

Para começar, você precisará adicionar alguns elementos adicionais à página. Abra o src/App.css em seu editor de texto. Mantenha-o aberto durante este passo.

nano src/App.js

Primeiro, adicione uma lista de emojis, adicionando as linhas destacadas a seguir:

import React from 'react';
import './App.css';

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
            <button>
              <span role="img" aria-label="grinning face" id="grinning face">😀</span>
            </button>
        </li>
        <li>
          <button>
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
          <button>
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

Aqui, você criou um sinalizador <ul> para conter uma lista de emojis. Cada emoji está em um elemento <li> separado e está envolvido por um elemento <button>. No próximo passo, você adicionará um evento a este botão.

Você também envolveu o emoji com um sinalizador <span> que possui alguns atributos adicionais. Cada span tem o atributo role (função) definido na função img. Isso sinalizará para softwares de acessibilidade que o elemento está agindo como uma imagem. Além disso, cada <span> possui também um atributo aria-label (sinalizador aria) e um atributo id com o nome do emoji. O aria-label dirá aos visitantes com leitores de tela o que está sendo exibido. Você usará o id ao escrever eventos no próximo passo.

Ao escrever um código desta maneira, você está usando elementos semânticos, que ajudarão a manter a página acessível e fácil de analisar para leitores de tela.

Salve e saia do arquivo. Seu navegador será atualizado e você verá isso:

Agora, adicione um pouco de estilo. Abra o código CSS em seu editor de texto:

nano src/App.css

Para remover o plano de fundo padrão e a borda dos botões, ao mesmo tempo em que aumenta o tamanho da fonte, adicione o código em destaque a seguir:

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

button {
    font-size: 2em;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}

ul {
    display: flex;
    padding: 0;
}

li {
    margin: 0 20px;
    list-style: none;
    padding: 0;
}

Neste código, você usou o font-size (tamanho de fonte), border (borda), e outros parâmetros para ajustar o visual de seus botões e alterar o tipo de fonte. Você também removeu os estilos de lista e adicionou o display: flex ao elemento <ul> para torná-lo horizontal.

Salve e feche o arquivo CSS. Seu navegador será atualizado e você verá isso:

Agora, você trabalhou com diversos elementos JSX que se parecem com HTML regular. Você adicionou classes, ids e sinalizadores aria, além de ter trabalhado dados como strings e variáveis. Apesar disso, o React também usa atributos para definir como os seus elementos devem responder aos eventos de usuário. No próximo passo, você começará a tornar a página interativa, adicionando eventos ao botão.

Passo 3 — Adicionando eventos a elementos

Neste passo, você irá adicionar eventos a elementos usando atributos especiais, além de capturar um evento de clique em um elemento de botão. Você aprenderá como capturar informações do evento para expedir outra ação, ou usar outras informações no âmbito do arquivo.

Agora que você tem uma página básica com informações, é hora de adicionar alguns eventos a ela. Há muitos manipuladores de eventos que você pode adicionar a elementos HTML. O React dá acesso a todos eles. Como seu código JavaScript está associado ao markup, adicione rapidamente os eventos enquanto mantém o código bem organizado.

Para começar, adicione o manipulador de eventos onclick. Ele permite que você adicione código JavaScript diretamente ao seu elemento, em vez de anexar um ouvinte de eventos:

import React from 'react';
import './App.css';

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
          <button
            onClick={event => alert(event.target.id)}
          >
            <span role="img" aria-label="grinning face" id="grinning face">😀</span>
          </button>
        </li>
        <li>
          <button
            onClick={event => alert(event.target.id)}
          >
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
            <button
              onClick={event => alert(event.target.id)}
            >
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

Como este é o JSX, você deve ter aplicado a regra das minúsculas concatenadas em onclick, o que significa que você adicionou ele como onClick. Este atributo onClick utiliza uma função anônima para recuperar informações sobre o item que foi clicado.

Você adicionou uma função de flecha anônima que receberá o evento a partir do botão clicado, e o evento terá como destino o elemento <span>. As informações que você precisa estão no atributo id, que você pode acessar com o event.target.id. Você pode disparar o alerta com a função alert().

Salve o arquivo. Em seu navegador, clique em um dos emojis, e você verá um alerta com o nome.

Você pode reduzir uma duplicação, declarando a função uma vez e passando ela para cada ação onClick. Como a função não depende de nada que não sejam entradas ou saídas, você pode declará-la fora da função do componente principal. Em outras palavras, a função não precisa acessar o âmbito de aplicação do componente. A vantagem de mantê-las separadas é que sua função do componente fica ligeiramente menor, e você pode mover a função para um arquivo separado mais tarde, caso quiser.

Em seu editor de texto, crie uma função chamada displayEmojiName, que recebe um evento e chama a função alert() com um id. Em seguida, passe a função para cada atributo onClick:

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
          <button
            onClick={displayEmojiName}
          >
            <span role="img" aria-label="grinning face" id="grinning face">😀</span>
          </button>
        </li>
        <li>
          <button
            onClick={displayEmojiName}
          >
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
            <button
              onClick={displayEmojiName}
            >
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

Salve o arquivo. Em seu navegador, clique em um emoji e você verá o mesmo alerta.

Neste passo, você adicionou eventos a cada elemento. Você também viu como o JSX utiliza nomes ligeiramente diferentes para eventos de elemento. Além disso, começou a escrever um código reutilizável pegando a função e a reutilizando em vários elementos. No próximo passo, você irá escrever uma função reutilizável que retorna elementos JSX, ao invés de escrever cada elemento manualmente. Isso reduzirá ainda mais a duplicação de dados.

Passo 4 — Mapeando dados para criar elementos

Neste passo, você irá além do uso do JSX como markup simples. Você aprenderá a combiná-lo com JavaScript para criar um markup dinâmico, que reduz o tamanho do código e melhora a legibilidade. Você irá refatorar seu código em uma matriz sobre a qual aplicará um loop para criar elementos HTML.

O JSX não limita você a uma sintaxe do tipo HTML. Ele também dá a você a capacidade de usar o JavaScript diretamente em seu markup. Você já experimentou um pouco isso passando funções para atributos. Além disso, você usou variáveis para reutilizar dados. Agora, é hora de criar JSX diretamente dos dados usando o código JavaScript padrão.

Em seu editor de texto, você precisará criar uma matriz dos dados dos emojis no arquivo src/App.js. Abra o arquivo novamente caso tenha fechado ele:

nano src/App.js

Adicione uma matriz que irá conter objetos que possuem o emoji e o nome do emoji. Note que os emojis precisam ser cercados por aspas. Crie esta matriz acima da função App:

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);
const emojis = [
  {
    emoji: "😀",
    name: "grinning face"
  },
  {
    emoji: "🎉",
    name: "party popper"
  },
  {
    emoji: "💃",
    name: "woman dancing"
  }
];

function App() {
...
}

export default App;

Agora que você tem os dados, pode aplicar um loop sobre eles. Para usar o JavaScript dentro do JSX, você precisa colocá-lo entre chaves: {}. O processo é semelhante a quando você adicionou funções a atributos.

Para criar componentes React, você precisará converter os dados em elementos JSX. Para fazer isso, você irá mapear os dados e retornar um elemento JSX. Há algumas coisas que você precisará ter em mente enquanto escreve o código.

Primeiramente, um grupo de itens precisa ser cercado por um contêiner <div>. Em segundo lugar, cada item precisa de uma propriedade especial chamada key (chave). A key precisa ser um pedaço de dados especial que o React pode usar para acompanhar os elementos. Dessa forma, ele consegue saber quando atualizar o componente. A chave será retirada do HTML compilado, já que ela é usada apenas para fins internos. Sempre que estiver trabalhando com loops, você precisará adicionar uma string simples como uma chave.

Aqui está um exemplo simplificado que mapeia uma lista de nomes em um <div>:

...
const names = [
    "Atul Gawande",
    "Stan Sakai",
    "Barry Lopez"
];

return(
    <div>
        {names.map(name => <div key={name}>{name}</div>)}
    </div>
)
...

O HTML resultante se pareceria com este:

...
<div>
    <div>Atul Gawande</div>
    <div>Stan Sakai</div>
    <div>Barry Lopez</div>
</div>
...

Converter a lista de emojis acontecerá de forma similar. O <ul> será contêiner. Você irá mapear dados e retornar um <li> com uma chave do nome curto do emoji. Você irá substituir os dados codificados nos sinalizadores <button> e <span> por informações do loop.

Em seu editor de texto, adicione o seguinte:

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);
const emojis = [
  {
    emoji: '😀',
    name: "test grinning face"
  },
  {
    emoji: '🎉',
    name: "party popper"
  },
  {
    emoji: '💃',
    name: "woman dancing"
  }
];

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        {
          emojis.map(emoji => (
            <li key={emoji.name}>
              <button
                onClick={displayEmojiName}
              >
                <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
              </button>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default App;

No código, você mapeou a matriz de emojis no sinalizador <ul> e retornou um <li>. Em cada <li>, você usou o nome do emoji como o objeto key. O botão terá a mesma função que o normal. No elemento <span>, substitua o aria-label e id pelo name. O conteúdo do sinalizador <span> deve ser o emoji.

Salve o arquivo. Sua janela será atualizada e você verá os dados. Note que a chave não está presente no HTML gerado.

Combinar o JSX com o JavaScript padrão dá a você várias ferramentas para criar conteúdo de maneira dinâmica. Além disso, você pode usar qualquer JavaScript padrão que quiser. Neste passo, você substituiu o JSX codificado por uma matriz e um loop para criar o HTML de maneira dinâmica. No próximo passo, você exibirá as informações condicionalmente usando o curto-circuito.

Passo 5 — Exibindo elementos condicionamente com o curto-circuito

Neste passo, você usará o curto-circuito para exibir condicionalmente certos elementos HTML. Isso permitirá que você crie componentes que possam esconder ou exibir HTML com base em informações adicionais. Isso dá flexibilidade aos seus componentes para lidarem com situações diversas.

Há vezes em que você precisará de um componente para exibir informações em alguns casos e não em outros. Por exemplo, você pode querer exibir apenas uma mensagem de alerta para o usuário se certos casos forem verdadeiros. Em outros casos, pode querer exibir algumas informações de conta para um administrador que você não quer que um usuário normal veja.

Para fazer isso, você usará o curto-circuito. Isso significa que você usará uma condicional. Se a primeira parte for verdade, ela retornará as informações na segunda parte.

Aqui está um exemplo. Se quisesse exibir um botão apenas se o usuário estivesse logado, você colocaria o elemento entre chaves e adicionaria a condição antes.

{isLoggedIn && <button>Log Out</button>}

Neste exemplo, você está usando o operador &&, que retorna o último valor se tudo for verdade. Caso contrário, ele retorna false (falso), que dirá ao React para não retornar nenhum markup adicional. Se isLoggedIn for verdadeiro, o React exibirá o botão. Se isLoggedIn for falso, ele não mostrará o botão.

Para testar isso, adicione as linhas destacadas a seguir:

import React from 'react';
import './App.css';

...

function App() {
  const greeting = "greeting";
  const displayAction = false;
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      {displayAction && <p>I am writing JSX</p>}
      <ul>
...
      </ul>
    </div>
  )
}

export default App;

Em seu editor de texto, você criou uma variável chamada displayAction com um valor de false. Em seguida, você colocou o sinalizador <p> entre chaves. No início das chaves, você adicionou displayAction && para criar a condicional.

Salve o arquivo e você verá o elemento sumindo em seu navegador. Ainda mais importante, ele não aparecerá no HTML gerado. Isso não é a mesma coisa que esconder um elemento com o CSS. Ele não existirá em lugar algum no markup final.

Agora, o valor de displayAction está codificado. No entanto, você também pode armazenar esse valor como um estado ou passá-lo como um objeto de um componente pai.

Neste passo, você aprendeu como exibir elementos condicionalmente. Isso dá a você a capacidade de criar componentes que são personalizáveis com base em outras informações.

Conclusão

Até aqui, você criou um aplicativo personalizado com o JSX. Você aprendeu como adicionar elementos semelhantes a HTML ao seu componente, adicionar estilo a esses elementos, passar atributos para criar um markup semântico e acessível e adicionar eventos aos componentes. Em seguida, você misturou o JavaScript em seu JSX para reduzir o código duplicado e exibir e esconder elementos condicionalmente.

Esta é a base que você precisa para criar componentes no futuro. Utilizando uma combinação de JavaScript e HTML, você pode desenvolver componentes dinâmicos que são flexíveis e permitem que seu aplicativo cresça e mude.

Se quiser aprender mais sobre o React, confira nossa página do tópico do React.