Pesquisa de site

Como criar elementos React com JSX

Introdução

Neste tutorial, você aprenderá como descrever elementos com JSX. JSX é uma abstração que permite escrever sintaxe semelhante a HTML em seu código JavaScript e permitirá construir componentes React que se parecem com a marcação HTML padrão. JSX é a linguagem de modelagem dos elementos React e, portanto, é a base para qualquer marcação que o React renderizará em seu aplicativo.

Como JSX também permite escrever JavaScript em sua marcação, você poderá aproveitar as vantagens das funções e métodos JavaScript, incluindo mapeamento de array e avaliação de curto-circuito para condicionais.

Como parte do tutorial, você capturará eventos de clique em botões diretamente na marcação e capturará instâncias quando a sintaxe não corresponder exatamente ao HTML padrão, como acontece com classes CSS. No final deste tutorial, você terá um aplicativo funcional que usa uma variedade de recursos JSX para exibir uma lista de elementos que possuem um ouvinte de clique integrado. Este é um padrão comum em aplicativos React que você usará com frequência ao aprender a estrutura. Você também poderá misturar elementos HTML padrão com JavaScript para ver como o React oferece a capacidade de criar pequenos trechos de código reutilizáveis.

Pré-requisitos

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

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

  • Você também precisará de um conhecimento básico de JavaScript, que pode ser encontrado em Como codificar em JavaScript, junto com um conhecimento básico de HTML e CSS. Um bom recurso para HTML e CSS é a Mozilla Developer Network.

Passo 1 — Adicionando marcação a um elemento React

Conforme mencionado anteriormente, o React possui uma linguagem de marcação especial chamada JSX. É uma mistura de sintaxe HTML e JavaScript que se parece com isto:

<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, bem como alguns HTML padrão, como <div>. Mas há outras partes que se parecem tanto com HTML quanto com JavaScript, como e className.

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

Nesta etapa, você aprenderá a adicionar sintaxe básica semelhante a HTML a um elemento React existente. Para começar, você adicionará elementos HTML padrão em uma função JavaScript e verá o código compilado em um navegador. Você também agrupará elementos para que o React possa compilá-los com marcação mínima, deixando uma saída HTML limpa.

Para começar, faça um novo projeto. Na linha de comando, execute o seguinte script para instalar um novo projeto usando create-react-app:

npx create-react-app jsx-tutorial

Após a conclusão do projeto, mude para o diretório:

cd jsx-tutorial

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

npm start

Você obterá um servidor local em execução. Se o projeto não abriu em uma janela do navegador, você poderá encontrá-lo em http://localhost:3000/. Se você estiver executando isso a partir de um servidor remoto, o endereço será http://seu_endereço_IP:3000.

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

Você construirá um conjunto completamente novo de componentes personalizados, então precisará começar limpando alguns códigos padrão para poder ter um projeto vazio. Para começar, abra App.js em um editor de texto. Este é o componente raiz que é injetado na página. Todos os componentes começarão a partir daqui.

Em um novo terminal, vá para a pasta do projeto e abra 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 após a instrução return na função. Altere-o para retornar null. O código final ficará assim:

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 logotipo. Na janela do terminal digite o seguinte comando:

rm src/logo.svg

Você não usará esse arquivo SVG em seu aplicativo e deverá remover os arquivos não utilizados enquanto trabalha. Isso organizará melhor seu código no longo prazo.

Agora que essas partes do seu projeto foram removidas, você pode explorar as facetas do JSX. Essa linguagem de marcação é compilada pelo React e eventualmente se torna o HTML que você vê em uma página web. Sem se aprofundar muito nos detalhes internos, o React pega o JSX e cria um modelo de como será a aparência da sua página, depois cria os elementos necessários e os adiciona à página.

O que isso significa é que você pode escrever o que parece ser HTML e esperar que o HTML renderizado seja semelhante. No entanto, existem alguns problemas.

Primeiro, se você olhar a guia ou janela que executa seu servidor, verá isto:

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

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

Vamos mudar isso adicionando uma pequena quantidade de JSX. Comece substituindo null por um exemplo de 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 desaparecerá. Se você visitar seu navegador, verá a mensagem como um elemento h1.

A seguir, abaixo da tag <h1>, adicione uma tag de parágrafo que contenha a string Estou escrevendo JSX. O código ficará assim:

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 que executa seu servidor:

./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ê deve 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. Coloque o código com uma tag vazia. Uma tag vazia é um elemento HTML sem palavras. Fica assim: <>.

Volte para ./src/App.js em seu editor e adicione a 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;

A tag vazia cria um único elemento, mas quando o código é compilado, ele não é adicionado à marcação final. Isso manterá seu código limpo e ao mesmo tempo fornecerá ao React um único elemento.

Nota: você também poderia ter encapsulado o código com um div em vez de tags vazias, desde que o código retornasse um elemento. Neste exemplo, uma tag vazia tem a vantagem de não adicionar marcação extra à saída analisada.

Salve o código e saia do arquivo. Seu navegador será atualizado e mostrará a página atualizada com o elemento de parágrafo. Além disso, quando o código é convertido, as tags vazias são removidas:

Agora você adicionou alguns JSX básicos ao seu componente e aprendeu como todo JSX precisa ser aninhado em um único componente. Na próxima etapa, você adicionará algum estilo ao seu componente.

Passo 2 — Adicionando estilo a um elemento com atributos

Nesta etapa, você estilizará os elementos do seu componente para aprender como os atributos HTML funcionam com JSX. Existem muitas opções de estilo no React. Alguns deles envolvem escrever CSS em Javascript, outros usam pré-processadores. Neste tutorial você trabalhará com CSS e classes CSS importadas.

Agora que você tem seu código, é hora de adicionar alguns estilos. Abra App.css em seu editor de texto:

nano src/App.css

Como você está começando com o novo JSX, o CSS atual se refere a elementos que não existem mais. Como você não precisa do CSS, você pode excluí-lo.

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

A seguir, você adicionará algum estilo para centralizar o texto. Em src/App.css, adicione o seguinte código:

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

Neste bloco de código, você criou um seletor de classe CSS chamado .container e o usou 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 JavaScript do componente:

nano src/App.js

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

Primeiro, em seu editor de texto, altere as tags vazias, <>, 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;

Neste código, você substituiu as tags vazias —<>— pelas tags div. Tags vazias são úteis para agrupar seu código sem adicionar tags extras, mas aqui você precisa usar um div porque tags vazias não aceitam nenhum atributo HTML.

Em seguida, você precisa adicionar o nome da classe. É aqui que o JSX começará a divergir do HTML. Se você quisesse adicionar uma classe a um elemento HTML normal, faria assim:

<div class="container">

Mas como 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 nenhum código JavaScript. Por exemplo, você não pode criar uma variável chamada null porque essa palavra já está reservada.

Uma das palavras reservadas é class. O React contorna essa palavra reservada alterando-a ligeiramente. Em vez de adicionar o atributo class, você adicionará o atributo className. Via de regra, se um atributo não estiver funcionando conforme o esperado, tente adicionar a versão camel case. Outro atributo um pouco diferente é o atributo for que você usaria para rótulos. Existem alguns outros casos, mas felizmente a lista é bastante curta.

Nota: No React, os atributos geralmente são chamados de props. Props são dados que você pode passar para outros componentes personalizados. Eles se parecem com atributos, exceto que não correspondem a nenhuma especificação HTML. Neste tutorial, vamos chamá-los de atributos, pois são usados principalmente como atributos HTML padrão. Isso irá distingui-los de props que não se comportam como atributos HTML, que serão abordados posteriormente nesta série.

Agora que você sabe como o atributo class é usado no React, você pode atualizar seu código para incluir os estilos. No seu editor de texto, adicione className="container" à sua tag de abertura 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á recarregada e o conteúdo será centralizado.

O atributo className é exclusivo no React. Você pode adicionar a maioria dos atributos HTML ao JSX sem qualquer alteração. Por exemplo, volte ao seu editor de texto e adicione um id de greeting ao seu elemento <h1>. Será semelhante ao 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 recarregue o navegador. Será a mesma coisa.

Até agora, JSX parece uma marcação padrão, mas a vantagem do JSX é que, embora pareça HTML, ele tem 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.

No seu editor de texto, adicione as seguintes linhas destacadas 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" e, em seguida, referenciou a variável em < atributoid da sua tag <h1>.

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

Até agora você trabalhou com alguns elementos por conta própria, mas também pode usar 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. Esses emojis serão agrupados com um elemento <button>. Ao clicar no emoji, você obterá o nome abreviado do CLDR.

Para começar, você precisará adicionar mais alguns elementos à página. Abra src/App.js em seu editor de texto. Mantenha-o aberto durante esta etapa.

nano src/App.js

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

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 uma tag <ul> para armazenar uma lista de emojis. Cada emoji está em um elemento <li> separado e é cercado por um elemento <button>. Na próxima etapa, você adicionará um evento a este botão.

Você também cercou o emoji com uma tag <span> que possui mais alguns atributos. Cada span tem o atributo role definido como a função img. Isso sinalizará ao software de acessibilidade que o elemento está agindo como uma imagem. Além disso, cada <span> também possui um atributo aria-label e um id com o nome do emoji. O aria-label informará aos visitantes com leitores de tela o que é exibido. Você usará o id ao escrever eventos na próxima etapa.

Ao escrever código dessa forma, 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á isto:

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

nano src/App.css

Adicione o seguinte código destacado para remover o plano de fundo e a borda padrão dos botões enquanto aumenta o tamanho da fonte:

.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 font-size, border e outros parâmetros para ajustar a aparência dos seus botões e alterar a fonte. Você também removeu os estilos de lista e adicionou display: flex ao elemento <ul> para torná-lo horizontal.

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

Você já trabalhou com vários elementos JSX que se parecem com HTML normal. Você adicionou classes, ids e tags ária e trabalhou com dados como strings e variáveis. Mas o React também usa atributos para definir como seus elementos devem responder aos eventos do usuário. Na próxima etapa, você começará a tornar a página interativa adicionando eventos ao botão.

Passo 3 — Adicionando Eventos aos Elementos

Nesta etapa, você adicionará eventos a elementos usando atributos especiais e capturará um evento de clique em um elemento de botão. Você aprenderá como capturar informações do evento para despachar outra ação ou usar outras informações no escopo do arquivo.

Agora que você tem uma página básica com informações, é hora de adicionar alguns eventos a ela. Existem muitos manipuladores de eventos que você pode adicionar aos elementos HTML. React dá acesso a tudo isso. Como seu código JavaScript está acoplado à sua marcação, você pode adicionar eventos rapidamente enquanto mantém seu código bem organizado.

Para começar, adicione o manipulador de eventos onclick. Isso permite adicionar algum código JavaScript diretamente ao seu elemento, em vez de anexar um ouvinte de evento:

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 é JSX, você camelCased onclick, o que significa que você o adicionou como onClick. Este atributo onClick usa uma função anônima para recuperar informações sobre o item que foi clicado.

Você adicionou uma função de seta anônima que obterá o evento do botão clicado, e o evento terá um destino que é o elemento <span>. A informação que você precisa está no atributo id, que você pode acessar com event.target.id. Você pode acionar o alerta com a função alert().

Salve o arquivo. No seu navegador, clique em um dos emojis e receberá um alerta com o nome.

Você pode reduzir uma duplicação declarando a função uma vez e passando-a para cada ação onClick. Como a função não depende de nada além de entradas e saídas, você pode declará-la fora da função do componente principal. Em outras palavras, a função não precisa acessar o escopo do componente. A vantagem de mantê-los separados é que a função do componente é um pouco mais curta e você pode mover a função para um arquivo separado posteriormente, se desejar.

No seu editor de texto, crie uma função chamada displayEmojiName que pega o 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. No seu navegador, clique em um emoji e você verá o mesmo alerta.

Nesta etapa, você adicionou eventos a cada elemento. Você também viu como JSX usa nomes ligeiramente diferentes para eventos de elemento e começou a escrever código reutilizável pegando a função e reutilizando-a em vários elementos. Na próxima etapa, você escreverá uma função reutilizável que retorne elementos JSX em vez de escrever cada elemento manualmente. Isto reduzirá ainda mais a duplicação.

Passo 4 — Mapeando dados para criar elementos

Nesta etapa, você irá além do uso de JSX como marcação simples. Você aprenderá a combiná-lo com JavaScript para criar marcação dinâmica que reduz o código e melhora a legibilidade. Você refatorará seu código em um array que fará um loop para criar elementos HTML.

JSX não limita você a uma sintaxe semelhante a HTML. Também oferece a capacidade de usar JavaScript diretamente em sua marcação. Você já tentou isso um pouco passando funções para atributos. Você também usou variáveis para reutilizar dados. Agora é hora de criar JSX diretamente dos dados usando código JavaScript padrão.

Em seu editor de texto, você precisará criar uma matriz de dados de emoji no arquivo src/App.js. Reabra o arquivo se você o fechou:

nano src/App.js

Adicione uma matriz que conterá objetos que possuem o emoji e o nome do emoji. Observe que os emojis precisam estar entre aspas. Crie este array 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, você pode fazer um loop sobre eles. Para usar JavaScript dentro do JSX, você precisa colocá-lo entre chaves: {}. É o mesmo que quando você adicionou funções aos atributos.

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

Primeiro, um grupo de itens precisa ser cercado por um contêiner <div>. Segundo, cada item precisa de uma propriedade especial chamada key. A key precisa ser um dado único que o React possa usar para rastrear os elementos e saber quando atualizar o componente. A chave será retirada do HTML compilado, pois é apenas para fins internos. Sempre que estiver trabalhando com loops, você precisará adicionar uma string simples como chave.

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

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

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

O HTML resultante ficaria assim:

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

A conversão da lista de emojis será semelhante. O <ul> será o contêiner. Você mapeará os dados e retornará um <li> com uma chave do nome abreviado do emoji. Você substituirá os dados codificados nas tags <button> e <span> pelas informações do loop.

No 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 emojis na tag <ul> e retornou um <li>. Em cada <li> você usou o nome do emoji como suporte key. O botão terá a mesma função normal. No elemento <span>, substitua aria-label e id pelo name. O conteúdo da tag <span> deve ser o emoji.

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

Combinar JSX com JavaScript padrão oferece muitas ferramentas para criar conteúdo dinamicamente, e você pode usar qualquer JavaScript padrão que desejar. Nesta etapa, você substituiu o JSX codificado por um array e um loop para criar HTML dinamicamente. Na próxima etapa, você mostrará informações condicionalmente usando curto-circuito.

Passo 5 — Mostrando Condicionalmente Elementos com Curto-Circuito

Nesta etapa, você usará curto-circuito para mostrar condicionalmente certos elementos HTML. Isso permitirá que você crie componentes que podem ocultar ou mostrar HTML com base em informações adicionais, dando flexibilidade aos seus componentes para lidar com diversas situações.

Há momentos em que você precisará de um componente para mostrar informações em alguns casos e em outros não. Por exemplo, você pode querer mostrar apenas uma mensagem de alerta para o usuário se determinados casos forem verdadeiros, ou pode querer exibir algumas informações da conta de um administrador que você não gostaria que um usuário normal visse.

Para fazer isso, você usará circuitos curtos. Isso significa que você usará uma condicional e, se a primeira parte for verdadeira, retornará a informação da segunda parte.

Aqui está um exemplo. Se você quisesse mostrar um botão apenas se o usuário estivesse logado, você cercaria o elemento com 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 retornará false, o que dirá ao React para não retornar nenhuma marcação adicional. Se isLoggedIn for verdadeiro, o React exibirá o botão. Se isLoggedIn for falso, o botão não será exibido.

Para experimentar, adicione as seguintes linhas destacadas:

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 false. Em seguida, você colocou a tag <p> entre chaves. No início das chaves, você adicionou displayAction && para criar a condicional.

Salve o arquivo e você verá o elemento desaparecer do seu navegador. Crucialmente, também não aparecerá no HTML gerado. Isso não é o mesmo que ocultar um elemento com CSS. Não existirá na marcação final.

No momento, o valor de displayAction está embutido em código, mas você também pode armazenar esse valor como um estado ou passá-lo como um suporte de um componente pai.

Nesta etapa, você aprendeu como mostrar elementos condicionalmente. Isso lhe dá a capacidade de criar componentes personalizáveis com base em outras informações.

Conclusão

Neste ponto, você criou um aplicativo personalizado com JSX. Você aprendeu como adicionar elementos semelhantes a HTML ao seu componente, adicionar estilo a esses elementos, passar atributos para criar marcações semânticas e acessíveis e adicionar eventos aos componentes. Em seguida, você misturou JavaScript em seu JSX para reduzir código duplicado e mostrar e ocultar elementos condicionalmente.

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

Se você quiser saber mais sobre o React, confira nossa página de tópicos do React.

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

Artigos relacionados: