One place for hosting & domains

      elementos

      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

      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:

      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:

      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.

      Projeto modelo do React

      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:

      Você verá um arquivo como este:

      jsx-tutorial/src/App.js

      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:

      jsx-tutorial/src/App.js

      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:

      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:

      jsx-tutorial/src/App.js

      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.

      Tela do navegador mostrando "Hello, World"

      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:

      jsx-tutorial/src/App.js

      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:

      jsx-tutorial/src/App.js

      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.

      Nota: você também poderia ter cercado o código com um div ao invés de sinalizadores vazios, contanto que o código retorne um elemento. Neste exemplo, um sinalizador vazio tem a vantagem de não adicionar markups extras ao resultado analisado.

      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:

      Navegador mostrando markup e ferramentas de desenvolvedor mostrando markup sem sinalizadores vazios

      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.

      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.

      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:

      jsx-tutorial/src/App.css

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

      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>.

      jsx-tutorial/src/App.js

      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.

      Nota: no React, atributos são frequentemente chamados de props. Os props são pedaços de dados que você passa para outros componentes personalizados. Eles parecem ser iguais aos atributos, exceto por não corresponderem a nenhuma especificação do HTML. Neste tutorial, os chamaremos de atributos, pois eles são usados principalmente como atributos HTML padrão. Isso os distingue dos props que não se comportam como atributos HTML. Estes serão abordados mais adiante nesta série.

      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:

      jsx-tutorial/src/App.js

      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.

      Elementos HTML centralizados em um navegador.

      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:

      jsx-tutorial/src/App.js

      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:

      jsx-tutorial/src/App.js

      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.

      Página com sinalizador id destacado nas ferramentas de desenvolvedor

      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.

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

      jsx-tutorial/src/App.js

      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:

      Navegador com emojis em lista

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

      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:

      jsx-tutorial/src/App.css

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

      Lista com estilo padrão removido

      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:

      jsx-tutorial/src/App.js

      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.

      Alerta para lança-confete

      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:

      jsx-tutorial/src/App.js

      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:

      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:

      jsx-tutorial/src/App.js

      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:

      jsx-tutorial/src/App.js

      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.

      Navegador com ferramentas de desenvolvedor mostrando o HTML atualizado sem o objeto chave

      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.

      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:

      jsx-tutorial/src/App.js

      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.

      Navegador com ferramentas de desenvolvedor não mostrando nenhum elemento de parágrafo

      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.



      Source link

      Cómo crear elementos de React con JSX


      El autor seleccionó Creative Commons para recibir una donación como parte del programa Write for DOnations.

      Introducción

      En este tutorial, aprenderá a describir elementos con JSX. JSX es una abstracción que le permite escribir sintaxis HTML en su código de JavaScript y le permitirá crear componentes de React similares al marcado HTML estándar. JSX es el lenguaje de creación de plantillas de los elementos de React y, por tanto, es la base para cualquier marcado que React procese en su aplicación.

      Como JSX le permite también escribir JavaScript en su marcado, podrá aprovechar las funciones y métodos de JavaScript, incluyendo asignaciones de matrices y evaluación de cortocircuitos para condicionales.

      Como parte del tutorial, aprenderá a capturar eventos de clic en los botones directamente en el marcado y actualizar instancias cuando la sintaxis no coincida exactamente con el HTML estándar, como por ejemplo con clases CSS. Tras este tutorial, tendrá una aplicación funcional que usa varias funciones de JSX para ver una lista de elementos de escucha de clics incorporado. Es un patrón común en aplicaciones de React que usará a menudo a medida que se familiariza con el marco. También podrá mezclar elementos HTML estándar con JavaScript para ver cómo React le permite crear pequeños conjuntos de código reutilizables.

      Requisitos previos

      Paso 1: Agregar marcado a un elemento de React

      Como ya se dijo, React tiene un lenguaje de marcado especial llamado JSX. Es una mezcla de HTML y de sintaxis de JavaScript que tiene un aspecto similar a este:

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

      Reconocerá algunas funcionalidades de JavaScript como .filter y .map, así como HTML estándar como <div>. Pero hay otras partes que se parecen a HTML y JavaScript, como <Card> y className.

      Es JSX, el lenguaje de marcado especial que proporciona un aspecto de HTML a los componentes de React con el poder de JavaScript.

      En este paso, aprenderá a añadir sintaxis básica de HTML a un elemento de React existente. Para comenzar, añadirá elementos HTML estándar a una función de JavaScript y verá el código compilado en un navegador. Agrupe también elementos para que React pueda compilarlos con un marcado mínimo obteniendo un resultado HTML limpio.

      Para comenzar, cree un nuevo proyecto. En su línea de comandos, ejecute la siguiente secuencia de comandos para instalar un proyecto nuevo usando create-react-app:

      • npx create-react-app jsx-tutorial

      Tras finalizar el proyecto, cambie al directorio:

      En una nueva pestaña o ventana de terminal, inicie el proyecto usando la secuencia de comandos de inicio de Create React App. El navegador actualizará los cambios automáticamente, así que deje que esta secuencia de comandos se ejecute mientras usted trabaja:

      Obtendrá un servidor local activo. Si el proyecto no se abrió en una ventana de navegador, puede encontrarlo en http://localhost:3000/. Si lo ejecuta desde un servidor remoto, la dirección será http://your_IP_address:3000.

      Su navegador cargará una aplicación React incluida como parte de Create React App.

      Proyecto de plantilla de React

      Creará un conjunto completamente nuevo de componentes personalizados, por lo que deberá comenzar eliminando un código de texto estándar para poder tener un proyecto vacío. Empiece abriendo App.js en un editor de texto. Es el componente root que se inserta en la página. Todos los componentes empezarán desde aquí.

      En un nuevo terminal, vaya a la carpeta del proyecto y abra src/App.js con el siguiente comando:

      Verá un archivo como este:

      jsx-tutorial/src/App.js

      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;
      

      Ahora, elimine el logo de importación de línea desde './logo.svg y todo lo siguiente a la instrucción de return en la función. Cámbielo para que se vuelva null. El código final tendrá el siguiente aspecto:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return null;
      }
      
      export default App;
      

      Guarde y salga del editor de texto.

      Por último, elimine el logo. En la ventana del terminal escriba el siguiente comando:

      No usará este archivo SVG en su aplicación y debería eliminar los archivos que no se usan según va trabajando. Organizará mejor su código a largo plazo.

      Una vez eliminadas estas partes de su proyecto, puede continuar estudiando las facetas de JSX. React compila este lenguaje de marcado y, finalmente, convierte el HTML que ve en una página web. Sin extenderse mucho en los pormenores, React toma el JSX y crea un modelo del aspecto que tendrá su página y, a continuación, crea los elementos necesarios y los añade a la página.

      Eso significa que puede escribir lo que se parece a HTML y esperar que el HTML emitido sea similar. Sin embargo, hay algunas trampas.

      Primero, si mira la pestaña o la ventana en la que se está ejecutando su servidor, verá esto:

      Output

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

      Es el linter que le indica que no usa el código de React importado. Al añadir la línea import React de 'react' a su código, importa el código de JavaScript que convierte JSX en un código React. Si no hay JSX, no necesita importar.

      Podemos cambiarlo añadiendo una pequeña cantidad de JSX. Comience sustituyendo null con Hello, World, por ejemplo:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return <h1>Hello, World</h1>;
      }
      
      export default App;
      

      Guarde el archivo. Si ve el terminal con el servidor en ejecución, desaparecerá el mensaje de advertencia. Si entra en su navegador, verá el mensaje como un elemento h1.

      Pantalla de navegador que muestra “Hello, World”

      A continuación, debajo de la etiqueta <h1>, añada una etiqueta de párrafo que contiene la cadena I am writing JSX. El código tendrá el siguiente aspecto:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <h1>Hello, World</h1>
          <p>I am writing JSX</p>
        )
      }
      
      export default App;
      

      Ya que JSX abarca varias líneas, deberá escribir la expresión entre paréntesis.

      Guarde el archivo. Al hacerlo, verá un error en el terminal que ejecuta su 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 |

      Cuando devuelve JSX de una función o instrucción, debe devolver un único elemento. Es posible que ese elemento tenga partes anidadas, pero debe haber un único elemento de nivel superior. En este caso, devuelve dos elementos.

      El ajuste es un cambio de código pequeño. Rodee el código con una etiqueta vacía. Una etiqueta vacía es un elemento HTML sin palabras. Tiene el siguiente aspecto: <></>.

      Vuelva a ./src/App.js en su editor y añada la etiqueta vacía:

      jsx-tutorial/src/App.js

      import React from 'react';
      import './App.css';
      
      function App() {
        return(
          <>
            <h1>Hello, World</h1>
            <p>I am writing JSX</p>
          </>
        )
      }
      
      export default App;
      

      La etiqueta vacía crea un único elemento, pero no se añade al marcado final cuando se compila el código. Esto mantendrá su código limpio y le da a React un único elemento.

      Nota: También podría haber encapsulado el código con un div, en vez de etiquetas vacías, siempre que el código devuelva un elemento. En este ejemplo, una etiqueta vacía tiene la ventaja de no añadir marcado adicional al resultado analizado.

      Guarde el código y salga del archivo. Su navegador se actualizará y mostrará la página actualizada con el elemento de párrafo. Además, cuando se convierte el código, las etiquetas vacías se eliminarán:

      Navegador que muestra marcado y devtools sin etiquetas vacías

      Ya agregó un conjunto de JSX básico a su componente y aprendió cómo deben anidarse todos los JSX en un único componente. En el siguiente paso, añadirá un estilo a su componente.

      Paso 2: Agregar estilos a un elemento con atributos

      En este paso, dará estilo a los elementos de su componente para saber cómo funcionan los atributos HTML con JSX. Existen muchas opciones de estilo en React. Algunas de ellas incluyen escribir CSS en Javascript y otras usan preprocesadores. En este tutorial, trabajará con clases de CSS y CSS importadas.

      Ahora que tiene su código, debe añadir un estilo. Abra App.css en su editor de texto:

      Ya que empieza con un JSX nuevo, la CSS actual se refiere a los elementos que ya no existen. Como no necesita CSS, puede eliminarla.

      Después de eliminar el código, tendrá un archivo vacío.

      A continuación, añada un estilo al centro del texto. En src/App.css, añada el siguiente código:

      jsx-tutorial/src/App.css

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

      En este bloque de código, creó un selector de clase CSS llamado .container y lo utilizó para centrar el contenido usando display:flex.

      Guarde el archivo y salga. El navegador se actualizará, pero no cambiará nada. Antes de poder ver el cambio, deberá añadir la clase CSS a su componente React. Abra el código de JavaScript del componente:

      El código CSS ya se importó con la línea import'. /App.css'. Esto significa que webpack extraerá el código para crear una hoja de estilo final, pero deberá añadir las clases para aplicar CSS a sus elementos.

      En primer lugar, en su editor de texto, cambie las etiquetas vacías <>, a <div>.

      jsx-tutorial/src/App.js

      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;
      

      En este código, sustituyó las etiquetas vacías, <>, por etiquetas div. Las etiquetas vacías son útiles para agrupar su código sin añadir otras adicionales, pero aquí necesita usar un div porque las etiquetas vacías no aceptan atributos HTML.

      A continuación, deberá añadir el nombre de clase. Es donde JSX comenzará a diferir de HTML. Si desea añadir una clase a un elemento HTML habitual, debería hacerlo como se indica a continuación:

      <div class="container">
      

      Pero, dado que JSX es JavaScript, tiene algunas limitaciones. Una de las limitaciones es que JavaScript tiene palabras clave reservadas. Eso significa que no puede usar determinadas palabras en ningún código de JavaScript. Por ejemplo, no puede crear una variable llamada null porque esa palabra ya está reservada.

      Una de las palabras reservadas es class. React trata esta palabra reservada cambiándola ligeramente. En vez de añadir el atributo class, añadirá el atributo className. Como regla general, si un atributo no funciona como se espera, intente añadir la versión con capitalización Camel. Otro atributo ligeramente diferente es el atributo for que podría usar para las etiquetas. Hay otros casos, pero afortunadamente la lista es bastante corta.

      Nota: En React, los atributos a menudo se denominan_ propiedade_s. Las propiedades son datos que puede pasar a otros componentes personalizados. Se parecen a los atributos excepto que no coinciden con especificaciones de HTML. En este tutorial, las llamaremos atributos, ya que se utilizan principalmente como atributos HTML estándar. Esto servirá para distinguirlas de las propiedades que no se comportan como atributos HTML, que se explicarán más adelante en esta serie.

      Ahora que ya sabe cómo se usa el atributo class en React, puede actualizar su código para incluir los estilos. En su editor de texto, añada className="container" a su etiqueta de apertura div:

      jsx-tutorial/src/App.js

      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;
      

      Guarde el archivo. Al hacerlo, se volverá a cargar la página y el contenido se centrará.

      Elementos html centrados en un navegador

      El atributo className es único en React. Puede añadir la mayoría de atributos HTML a JSX sin ningún cambio. Como ejemplo, vuelva a su editor de texto y añada un id de saludo a su elemento <h1>. Tendrá el aspecto de HTML estándar:

      jsx-tutorial/src/App.js

      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;
      

      Guarde la página y vuelva a cargar el navegador. Será igual.

      Hasta ahora, JSX tiene el aspecto de marcado estándar, pero su ventaja es que, aunque se parece a HTML, tiene el poder de JavaScript. Eso significa que puede asignar variables y referenciarlas en sus atributos. Para referenciar un atributo, encapsúlelo entre llaves {}, en vez de comillas.

      En su editor de texto, añada las siguientes líneas resaltadas para hacer referencia a un atributo:

      jsx-tutorial/src/App.js

      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;
      

      En este código, creó una variable sobre la instrucción return denominada saludo con el valor de "greeting", y referenció luego la variable en el atributo id de su etiqueta <h1>.

      Guarde el archivo y ciérrelo. La página será la misma, pero con una etiqueta id.

      Página con una etiqueta id resaltada en las herramientas de desarrollador

      Hasta ahora, trabajó con algunos elementos propios, pero también puede usar JSX para añadir muchos elementos HTML y anidarlos para crear páginas complejas.

      Para mostrárselo, creará una página con una lista de emojis. Estos emojis se encapsularán con un elemento <button>. Cuando haga clic en el emoji, obtendrá su CLDR Short Name.

      Para comenzar, deberá añadir algunos elementos más a la página. Abra src/App.js en su editor de texto. Manténgalo abierto durante este paso.

      Primero, añada una lista de emojis añadiendo las siguientes líneas resaltadas:

      jsx-tutorial/src/App.js

      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;
      

      Así crea una etiqueta <ul> que contenga una lista de emojis. Cada emoji está en un elemento <li> distinto y está rodeado de un elemento <button>. En el siguiente paso, añadirá un evento a este botón.

      También rodeó el emoji con una etiqueta <span> que tiene algunos atributos más. Cada span tiene el atributo role configurado en el rol img. Esto indicará al software de accesibilidad que el elemento está actuando como una imagen. Además, cada <span> también tiene un atributo aria-label y un id con el nombre del emoji. aria-label le indicará a los visitantes con lectores de pantalla qué se muestra. Usará el id al escribir eventos en el siguiente paso.

      Al escribir código de esta forma, usa elementos semánticos que ayudan a que la página sea accesible y fácil de analizar para los lectores de pantalla.

      Guarde el archivo y ciérrelo. Su navegador se actualizará, y verá lo siguiente:

      Navegador con emojis como lista

      Ahora añada un poco de estilo. Abra el código CSS en su editor de texto:

      Añada el siguiente código resaltado para eliminar el fondo y margen predeterminados de los botones además de aumentar el tamaño de fuente:

      jsx-tutorial/src/App.css

      .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;
      }
      

      En este código, usó font-size, border y otros parámetros para ajustar el aspecto de sus botones y cambiar la fuente. También eliminó los estilos de la lista y añadió display:flex al elemento <ul> para que sea horizontal.

      Guarde y cierre el archivo CSS. Su navegador se actualizará, y verá lo siguiente:

      Lista con los estilos predeterminados eliminados

      Ya ha trabajado con varios elementos de JSX que se parecen a un HTML normal. Ha agregado clases, ids y etiquetas aria, y ha trabajado con datos como cadenas y variables. Pero React también usa atributos para definir cómo deben responder sus elementos a los eventos de usuario. En el siguiente paso, comenzará a hacer que la página sea interactiva añadiendo eventos al botón.

      Paso 3: Agregar eventos a elementos

      En este paso, añadirá eventos a elementos usando atributos especiales y capturará un evento de clic en un elemento de botón. Aprenderá cómo capturar información del evento para enviar otra acción o usar otra información en el ámbito del archivo.

      Ahora que tiene una página básica con información, debe añadirle algunos eventos. Hay muchos gestores de eventos que puede añadir a elementos HTML. React le proporciona acceso a todos estos. Como su código de JavaScript está unido a su marcado, puede añadir rápidamente los eventos y mantener su código bien organizado.

      Para comenzar, añada el gestor de eventos onclick. Esto le permite añadir un código de JavaScript directamente a su elemento, en vez de añadir una escucha de eventos:

      jsx-tutorial/src/App.js

      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 se trata de JSX, usó la capitalización Camel para onclick, lo que significa que la añadió como onClick. Este atributo onClick usa una función anónima para obtener información sobre el elemento sobre el que se hizo clic.

      Añadió una función de flecha anónima que obtendrá el evento del botón pulsado, y el evento tendrá un destino que es el elemento <span>. La información que necesita está en el atributo id al que puede acceder con event.target.id. Puede activar la alerta con la función alert().

      Guarde el archivo. En su navegador, haga clic en uno de los emojis y obtendrá una alerta con el nombre.

      Alerta para serpentina

      Puede reducir una duplicación declarando la función una vez y pasándola a cada acción onClick. Como la función solo se basa en entradas y resultados, puede declararla fuera de la función de componente principal. En otras palabras, la función no necesita acceso al ámbito del componente. La ventaja de mantenerlos separados es que su función de componente es ligeramente más corta, y podría mover la función a un archivo separado después si quisiera.

      En su editor de texto, cree una función denominada displayEmojiName que toma el evento e invoca la función alert() con un id. Luego, pase la función a cada atributo onClick:

      jsx-tutorial/src/App.js

      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;
      

      Guarde el archivo. En su navegador, haga clic en un emoji y verá la misma alerta.

      En este paso, añadió eventos a cada elemento. También aprendió cómo JSX usa nombres ligeramente diferentes para los eventos de elementos y empezó a escribir código reutilizable tomando la función y volviendo a usarla en varios elementos. En el siguiente paso, escribirá una función reutilizable que devuelve elementos de JSX, en vez de escribir cada elemento a mano. Esto reducirá aún más la duplicación.

      Paso 4: Asignar datos para crear elementos

      En este paso, aprenderá a usar JSX como marcado simple. Aprenderá a combinarlo con JavaScript para crear un marcado dinámico que reduzca el código y mejore la legibilidad. Volverá a factorizar su código en una matriz que enlazará para crear elementos HTML.

      JSX no lo limita a una sintaxis HTML. También le permite usar JavaScript directamente en su marcado. Ya lo probó antes al pasar funciones a atributos. También utilizó variables para volver a usar datos. Ahora, es momento de crear JSX directamente desde los datos usando el código de JavaScript estándar.

      En su editor de texto, deberá crear una matriz de datos de emoji en el archivo src/App.js. Vuelva a abrir el archivo si lo cerró:

      Añada una matriz que contendrá objetos que tienen el emoji y el nombre del emoji. Tenga en cuenta que los emojis deben ir entre comillas. Cree esta matriz sobre la función App:

      jsx-tutorial/src/App.js

      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;
      

      Ahora que tiene los datos, puede enlazarlos. Para usar JavaScript dentro de JSX, deberá rodearla con llaves: {}. Es el mismo proceso que cuando añadió funciones a atributos.

      Para crear componentes de React, deberá convertir los datos a elementos JSX. Para ello, asignará los datos y devolverá un elemento JSX. Hay algunas cosas que deberá tener en cuenta al escribir el código.

      En primer lugar, un grupo de elementos debe estar rodeado de un contenedor <div>. En segundo lugar, cada elemento necesita una propiedad especial denominada clave. La clave debe ser un único dato que use React para rastrear los elementos y poder saber así cuando actualizar el componente. La clave se eliminará del HTML compilado, dado que es solo para fines internos. Siempre que trabaje con bucles, deberá añadir una cadena sencilla como clave.

      Le mostramos un ejemplo sencillo que asigna una lista de nombres a un contenedor <div>:

      ...
      const names = [
          "Atul Gawande",
          "Stan Sakai",
          "Barry Lopez"
      ];
      
      return(
          <div>
              {names.map(name => <div key={name}>{name}</div>)}
          </div>
      )
      ...
      

      El HTML resultante tendrá el siguiente aspecto:

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

      Convertir la lista de emojis será similar. El <ul> será el contenedor. Asignará datos y devolverá un <li> con una clave del nombre del emoji. Sustituya los datos con codificación fija en las etiquetas <button> y <span> con información del bucle.

      En su editor de texto, añada lo siguiente:

      jsx-tutorial/src/App.js

      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;
      

      En su código, asignó sobre la matriz de emojis en la etiqueta <ul> y obtuvo un <li>. En cada <li>, usó el nombre del emoji como propiedad de clave. El botón tendrá la misma función de siempre. En el elemento <span>, sustituya aria-label e id por name. El contenido de la etiqueta <span> debería ser el emoji.

      Guarde el archivo. Su ventana se actualizará y verá los datos. Verá que no está la clave en el HTML generado.

      Navegador con herramientas de desarrollador que muestran HTML actualizada sin propiedades de clave

      La combinación de JSX con JavaScript estándar le proporciona muchas herramientas para crear contenido dinámico, y puede usar cualquier tipo de JavaScript estándar que quiera. En este paso, sustituyó JSX con codificación fija por una matriz y un bucle para crear HTML de manera dinámica. En el siguiente paso, mostrará información de forma condicional usando cortocircuitos.

      Paso 5: Mostrar condicionalmente elementos con cortocircuitos

      En este paso, usará los cortocircuitos para mostrar condicionalmente determinados elementos HTML. Esto le permitirá crear componentes que pueden ocultar o mostrar HTML basándose en información adicional, dando flexibilidad a sus componentes para gestionar múltiples situaciones.

      Hay momentos en los que necesitará que un componente muestre información en algunos casos y no en otros. Por ejemplo, puede querer mostrar solo un mensaje de alerta para el usuario si ciertos casos son verdaderos o mostrar alguna información de cuenta para un administrador que no querría que un usuario normal viese.

      Para ello, usará un cortocircuito. Esto significa que usará una condicional y, si la primera parte es verdadera, devolverá la información en la segunda parte.

      Le mostramos un ejemplo. Si quisiera que solo apareciera un botón si el usuario inició sesión, rodearía el elemento con llaves y añadiría antes la condición.

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

      En este ejemplo, utiliza el operador &&, que devuelve el último valor si todo es verdadero. De lo contrario, devuelve false, que le indicará a React que no devuelva ningún marcado adicional. Si isLoggedIn es verdadero, React mostrará el botón. Si isLoggedIn es falso, no mostrará el botón.

      Para probarlo, añada las siguientes líneas resaltadas:

      jsx-tutorial/src/App.js

      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;
      

      En su editor de texto, creó una variable denominada displayAction con un valor de false. A continuación, rodeó la etiqueta <p> con llaves. Al comienzo de las llaves, añadió displayAction && para crear la condicional.

      Guarde el archivo, y verá que el elemento desaparece en su navegador. Y, lo importante, tampoco aparecerá en el HTML generado. Esto no es lo mismo que ocultar un elemento con CSS. No existirá en el marcado final.

      Navegador con herramientas de desarrollador que no muestran un elemento de párrafo

      Ahora, el valor de displayAction presenta codificación fija, pero también puede almacenar ese valor como estado o aprobarlo como propiedad desde un componente principal.

      En este paso, aprendió a mostrar condicionalmente elementos. Esto le permite crear componentes que se personalizan basándose en otra información.

      Conclusión

      En este momento, creó una aplicación personalizada con JSX. Aprendió a añadir elementos de tipo HTML a su componente, añadir estilos a estos elementos, pasar atributos para crear marcado semántico y accesible, y añadir eventos a los componentes. A continuación, mezcló JavaScript en su JSX para reducir código duplicado y mostrar y ocultar elementos condicionalmente.

      Es la base que necesita para crear componentes futuros. Usando una combinación de JavaScript y HTML, puede crear componentes dinámicos que sean flexibles y permitir que su aplicación crezca y cambie.

      Si desea obtener más información sobre React, consulte nuestra página sobre React.



      Source link