One place for hosting & domains

      Como criar um servidor de Minecraft no Ubuntu 18.04


      O autor selecionou a Tech Education Fund para receber uma doação como parte do programa Write for DOnations.

      Introdução

      O Minecraft é um jogo de videogame no estilo sandbox muito conhecido. Lançado originalmente no ano de 2009, o jogo permite que os jogadores construam, explorem, criem e sobrevivam em um mundo gerado em 3D constituído por blocos. No final de 2019 ele era o segundo jogo de videogame mais vendido de todos os tempos. Neste tutorial, você criará seu próprio servidor do Minecraft para que você e seus amigos possam jogar juntos. Você instalará especificamente os pacotes de softwares necessários para executar o Minecraft, configurará o servidor para ser executado e, sem seguida, implantará o jogo.

      De maneira alternativa, explore o Minecraft com um clique da DigitalOcean: servidor edição Java como outro caminho de instalação.

      Este tutorial utiliza a versão Java do Minecraft. Se você comprou sua versão do Minecraft na App Store da Microsoft, você não poderá se conectar a este servidor. A maioria das versões do Minecraft compradas em consoles de jogos, como o PlayStation 4, Xbox One ou Nintendo Switch também são versões do Minecraft da Microsoft. Esses consoles também não conseguirão se conectar ao servidor criado neste tutorial. Você pode conseguir sua versão Java do Minecraft aqui.

      Pré-requisitos

      Para seguir este guia, você vai precisar do seguinte:

      • Um servidor com uma instalação recente do Ubuntu 18.04, um non-root user com privilégios sudo e o SSH habilitado. Você pode seguir este guia para inicializar seu servidor e completar esses passos. O Minecraft tem muitos recursos. Desse modo, lembre-se disso ao selecionar o tamanho do servidor. Se estiver usando a DigitalOcean e precisar de mais recursos, é possível redimensionar seu Droplet para adicionar mais CPUs e memória RAM.

      • Uma cópia do Minecraft Edição Java instalado em uma máquina local Mac, Windows ou Linux.

      Passo 1 — Instalando os pacotes de softwares necessários

      Com seu servidor inicializado, o primeiro passo será instalar o Java, pois você precisará dele para executar o Minecraft.

      Atualize o índice do pacote para o gerenciador de pacotes do APT:

      Em seguida, instale a versão 8 do Java OpenJDK, especificamente o JRE sem periféricos. Esta é uma versão mínima do Java, que remove o suporte para aplicativos GUI. Ela é ideal para executar aplicativos Java em um servidor:

      • sudo apt install openjdk-8-jre-headless

      Também é necessário usar um software chamado screen para criar sessões de servidor removível. O screen permite que você crie uma sessão de terminal e se desanexe dela, deixando o processo iniciado e em execução. Isso é muito importante, pois se você iniciar o servidor e fechar o terminal, isso encerrará a sessão e interromperá o servidor. Instale o screen:

      Com o Java instalado, você baixará o servidor do Minecraft no site oficial.

      Passo 2 — Fazendo o download da versão mais recente do Minecraft

      Agora, é necessário baixar a versão atual do servidor do Minecraft. Faça isso indo até site do Minecraft e copiando o link que diz Download minecraft_server.​​​ X.X.X.jar, onde o X é a versão mais recente do servidor.

      Agora, é possível usar o wget e o link copiado para baixar o servidor:

      • wget https://launcher.mojang.com/v1/objects/bb2b6b1aefcd70dfd1892149ac3a215f6c636b07/server.jar

      Se você deseja atualizar seu servidor do Minecraft, ou, caso queira executar diferentes versões do Minecraft, renomeie o server.jar baixado para minecraft_server_1.15.2.jar, correspondendo os números da versão destacados à versão que você acabou de baixar:

      • mv server.jar minecraft_server_1.15.2.jar

      Se quiser baixar uma versão mais antiga do Minecraft, encontre-os arquivados em mcversions.net. No entanto, este tutorial se concentrará na versão mais recente. Com o download em mãos, vamos começar a configurar seu servidor do Minecraft.

      Passo 3 — Configurando e executando o servidor do Minecraft

      Agora que você tem o jar do Minecraft baixado, está tudo pronto para executá-lo.

      Primeiro, inicie uma sessão screen executando o comando screen:

      Assim que você tiver lido a faixa que apareceu, pressione SPACE. O screen exibirá uma sessão de terminal normalmente. Essa sessão estará desanexada, o que significa que você conseguirá iniciar um comando aqui e deixá-lo em execução.

      Agora, você pode executar sua configuração inicial. Não se preocupe se o comando a seguir mostrar um erro. O Minecraft criou sua instalação desta maneira para que os usuários tenham que primeiro aceitar o acordo de licenciamento da empresa. Você fará isso a seguir:

      • java -Xms1024M -Xmx1024M -jar minecraft_server_1.15.2.jar nogui

      Antes de examinar o resultado deste comando, vamos dar uma olhada mais detalhada em todos esses argumentos da linha de comando que estão ajustando seu servidor:

      • Xms1024M: configura o servidor para ele ser executado com 1024MB ou 1GB de memória RAM. Você pode aumentar esse limite se quiser que seu servidor seja executado com mais memória RAM. Tanto o M para megabytes quanto o G para gigabytes são opções compatíveis. Por exemplo: o Xms2G iniciará o servidor com 2 gigabytes de RAM.

      • Xmx1024M: configura o servidor para usar no máximo 1024M de memória RAM. Você pode aumentar esse limite se quiser que seu servidor seja executado em um tamanho maior, permitir mais jogadores ou se você sentir que o servidor está lento.

      • jar: este sinalizador especifica qual arquivo jar do servidor será executado.

      • nogui: diz ao servidor para não iniciar uma GUI, pois este é um servidor e você não possui uma interface gráfica de usuário.

      A primeira vez que você executar este comando (que normalmente inicia seu servidor) ele gerará, em vez disso, o seguinte erro:

      Output

      [22:05:31] [22:05:31] [main/ERROR]: Failed to load properties from file: server.properties [22:05:31] [main/WARN]: Failed to load eula.txt [22:05:31] [main/INFO]: You need to agree to the EULA in order to run the server. Go to eula.txt for more info.

      Esses erros foram gerados porque o servidor não encontrou dois arquivos necessários para sua execução: o EULA (Contrato de Licença de Usuário Final), encontrado em eula.txt e o arquivo de configuração server.properties. Felizmente, como o servidor não encontrou esses arquivos, ele os criou em seu diretório de trabalho atual.

      Primeiro, abra o eula.txt no nano ou em seu editor de texto favorito:

      Dentro deste arquivo você verá um link para o EULA do Minecraft. Copie a URL:

      ~/eula.txt

      #By changing the setting below to TRUE you are indicating your agreement to our EULA (https://account.mojang.com/documents/minecraft_eula).
      #Tue Mar 24 22:05:31 UTC 2020
      eula=false
      

      Abra a URL em seu navegador Web e leia o acordo. Em seguida, volte para seu editor de texto e encontra a última linha no eula.txt. Lá, altere o eula=false para eula=true. Agora salve e feche o arquivo.

      Após aceitar o EULA, é hora de configurar o servidor para suas especificações.

      Em seu diretório de trabalho atual, você também encontrará o arquivo recém-criado chamado server.properties. Este arquivo contém todas as opções de configuração para seu servidor do Minecraft. Você pode encontrar uma lista detalhada de todas as propriedades do servidor no Wiki oficial do Minecraft. Antes de iniciar o servidor, você modificará este arquivo com as configurações preferidas. Este tutorial abordará as propriedades fundamentais:

      Seu arquivo aparecerá assim:

      ~/server.properties

      #Minecraft server properties
      #Thu Apr 30 23:42:29 UTC 2020
      spawn-protection=16
      max-tick-time=60000
      query.port=25565
      generator-settings=
      force-gamemode=false
      allow-nether=true
      enforce-whitelist=false
      gamemode=survival
      broadcast-console-to-ops=true
      enable-query=false
      player-idle-timeout=0
      difficulty=easy
      spawn-monsters=true
      broadcast-rcon-to-ops=true
      op-permission-level=4
      pvp=true
      snooper-enabled=true
      level-type=default
      hardcore=false
      enable-command-block=false
      max-players=20
      network-compression-threshold=256
      resource-pack-sha1=
      max-world-size=29999984
      function-permission-level=2
      rcon.port=25575
      server-port=25565
      server-ip=
      spawn-npcs=true
      allow-flight=false
      level-name=world
      view-distance=10
      resource-pack=
      spawn-animals=true
      white-list=false
      rcon.password=
      generate-structures=true
      online-mode=true
      max-build-height=256
      level-seed=
      prevent-proxy-connections=false
      use-native-transport=true
      motd=A Minecraft Server
      enable-rcon=false
      

      Vamos dar uma olhada em algumas das propriedades mais importantes nesta lista:

      • difficulty​​​ (padrão easy): define a dificuldade do jogo (por exemplo, quanto dano é causado e como os elementos afetam o jogador). As opções são peaceful, easy, normal e hard.

      • gamemode (padrão survival): define o modo de jogo. As opções são survival, creative, adventure e spectator.

      • level-name (padrão world): define o nome do servidor que aparecerá no cliente. Caracteres como o apóstrofo, podem precisar de caracteres de escape com uma barra invertida.

      • motd (padrão A Minecraft Server): a mensagem que é mostrada na lista de servidores do cliente do Minecraft.

      • pvp (padrão true): permite que os jogadores possam entrar em combates de jogador contra jogador. Se definido para true, os jogadores poderão entrar em combate e causar dano uns aos outros.

      Assim que você tiver as opções desejadas definidas, salve e feche o arquivo.

      Agora que você alterou o EULA para true e concluiu suas configurações, inicie seu servidor.

      Como da última vez, vamos iniciar o servidor com 1024 MB de memória RAM. Vamos conceder (apenas desta vez) ao Minecraft a capacidade de utilizar até 4 GB de RAM se ele precisar. Lembre-se de que é possível ajustar esse número para se adequar às limitações do servidor ou necessidades do usuário:

      • java -Xms1024M -Xmx4G -jar minecraft_server_1.15.2.jar nogui

      Aguarde a inicialização. Em breve, seu servidor do Minecraft começará a gerar um resultado como este:

      Output

      [21:08:14] [Server thread/INFO]: Starting minecraft server version 1.15.2 [21:08:14] [Server thread/INFO]: Loading properties [21:08:14] [Server thread/INFO]: Default game type: SURVIVAL [21:08:14] [Server thread/INFO]: Generating keypair [21:08:15] [Server thread/INFO]: Starting minecraft server on *:25565

      Assim que o servidor estiver funcionando, você verá o seguinte resultado:

      Output

      [21:15:37] [Server thread/INFO]: Done (30.762s)! For help, type "help"

      Seu servidor está funcionando e você foi levado ao painel de controle do administrador do servidor. Agora, digite help:

      Uma saída como esta aparecerá:

      Output

      [21:15:37] [Server thread/INFO]: /advancement (grant|revoke) [21:15:37] [Server thread/INFO]: /ban <targets> [<reason>] [21:15:37] [Server thread/INFO]: /ban-ip <target> [<reason>] [21:15:37] [Server thread/INFO]: /banlist [ips|players] ...

      A partir deste terminal, execute comandos doe administrador e controle o servidor do Minecraft. Agora, vamos utilizar o screen para manter seu novo servidor funcionando, mesmo após você fazer o logout. Em seguida, conecte-se ao cliente do Minecraft e inicie um novo jogo.

      Passo 4 — Mantendo o servidor em funcionamento

      Com o servidor pronto, precisamos deixá-lo em execução mesmo após você se desconectar da sessão SSH. Como você utilizou o screen anteriormente, saia desta sessão pressionando Ctrl + A + D. Agora você está de volta ao shell original.

      Execute este comando para ver todas as sessões do screen:

      Você receberá um resultado com a ID de sua sessão, que você precisará para retomá-la.

      Output

      There is a screen on: 26653.pts-0.minecraft (03/25/20 21:18:31) (Detached) 1 Socket in /run/screen/S-root.

      Para retomar sua sessão, passe o sinalizador -r para o comando screen e, em seguida, digite a ID dela.

      Quando tudo estiver pronto para sair do servidor, certifique-se de desanexar-se da sessão com o Crtl + A + D e, em seguida, faça o logout.

      Passo 5 — Conectando-se ao seu servidor a partir do cliente do Minecraft

      Agora que o servidor está funcionando, vamos nos conectar a ele por meio do cliente do Minecraft. Em seguida, comece a jogar.

      Execute sua cópia do Minecraft edição Java e selecione Multijogador no menu.

      Selecione multijogador no menu

      Em seguida, será necessário adicionar um servidor para se conectar. Clique no botão Adicionar servidor.

      Clique no botão Adicionar servidor

      Na tela Editar informações de servidor que aparece, dê um nome ao seu servidor e digite o endereço IP dele. Este é o mesmo endereço IP que você usou para se conectar via SSH.

      Dê um nome ao seu servidor e digite o endereço IP

      Assim que inserir o nome do servidor e o endereço IP, você será levado de volta à tela de multijogador, onde seu servidor estará listado.

      Selecione seu servidor e clique em entrar no servidor

      A partir de agora, seu servidor aparecerá nesta lista. Selecione-o e clique em Entrar no servidor.

      Aproveite o jogo!

      Você está em seu servidor e tem tudo pronto para jogar!

      Conclusão

      Você tem agora um servidor do Minecraft funcionando no Ubuntu 18.04 para você e seus amigos jogarem. Divirta-se explorando, criando e sobrevivendo em um mundo novo em 3D. Lembre-se: tome cuidado com os griefers.



      Source link

      Como criar um servidor Web em Node.js com o módulo HTTP


      O autor selecionou a COVID-19 Relief Fund​​​​​ para receber uma doação como parte do programa Write for DOnations.

      Introdução

      Ao visualizar uma página em seu navegador, você está fazendo uma solicitação a outro computador na Internet, que em resposta, fornece a você a página Web. O computador ao qual você está se comunicando pela Internet é um servidor Web. Um servidor Web recebe solicitações HTTP de um cliente, como seu navegador, e fornece uma resposta HTTP, como uma página HTML ou um JSON de uma API.

      Para que um servidor retorne uma página da Web, vários softwares são envolvidos no processo. Normalmente, estes softwares se enquadram em duas categorias: o front-end e o back-end. O código de front-end lida com a forma como o conteúdo é apresentado, como a cor de uma barra de navegação e o estilo do texto. O código de back-end lida com a forma como os dados são trocados, processados e armazenados. O código que cuida das solicitações de rede do seu navegador, ou que se comunica com o banco de dados é gerenciado, principalmente, pelo código de back-end.

      O Node.js permite que os desenvolvedores utilizem o JavaScript para escrever o código de back-end, embora ele seja tradicionalmente usado no navegador para escrever o código de front-end. Ter o front-end e o back-end juntos reduz o esforço necessário para criar um servidor Web. Esse é o principal motivo pelo qual o Node.js é a escolha mais popular para escrever códigos de back-end.

      Neste tutorial, você aprenderá como desenvolver servidores Web usando o módulo http que está incluído no Node.js. Você desenvolverá servidores Web que podem retornar dados em JSON, arquivos CSV e páginas Web em HTML.

      Pré-requisitos

      • Verifique se o Node.js está instalado em sua máquina de desenvolvimento. Este tutorial utiliza a versão 10.19.0 do Node.js. Para instalar essa versão em macOS ou Ubuntu 18.04, siga os passos descritos no artigo sobre Como instalar o Node.js e criar um ambiente de desenvolvimento local em macOS ou a seção intitulada Instalando usando um PPA, do artigo sobre Como instalar o Node.js no Ubuntu 18.04.
      • A plataforma Node.js pode ser usada para criar servidores Web prontos para uso. Antes de começar, você precisa estar familiarizado com os princípios básicos do Node.js. Para isso, revise nosso guia sobre Como escrever e executar seu primeiro programa em Node.js.
      • Também usamos a programação assíncrona em uma de nossas seções. Se você não estiver familiarizado com a programação assíncrona em Node.js ou com o uso do módulo fs para interagir com arquivos, você pode aprender mais sobre estes assuntos no nosso artigo Como escrever um código assíncrono em Node.js.

      Passo 1 — Criando um servidor HTTP básico

      Começaremos criando um servidor que retorna um texto sem formatação ao usuário. O processo abordará os conceitos fundamentais necessários para configurar um servidor, que fornecerão a base necessária para retornar os formatos de dados mais complexos, como o JSON.

      Primeiro, precisamos configurar um ambiente de programação acessível para fazer nossos exercícios, bem como os outros execícios no artigo. No terminal, crie uma pasta chamada first-servers:

      Então, acesse aquela pasta:

      Agora, crie o arquivo para guardar o código:

      Abra o arquivo em um editor de texto. Utilizaremos o nano, pois ele está disponível no terminal:

      Começaremos carregando o módulo http, que é padrão em todas as instalações do Node.js. Adicione a linha seguinte ao hello.js:

      first-servers/hello.js

      const http = require("http");
      

      O módulo http contém a função de criar o servidor, que veremos depois. Se quiser aprender mais a respeito de módulos em Node.js, consulte nosso artigo Como criar um módulo Node.js.

      Nosso próximo passo será definir duas constantes, o host e a porta em que nosso servidor se associará:

      first-servers/hello.js

      ...
      const host = 'localhost';
      const port = 8000;
      

      Como mencionado anteriormente, os servidores Web aceitam solicitações de navegadores e de outros clientes. Podemos interagir com um servidor Web ao digitar um nome de domínio, que é traduzido para um endereço IP por um servidor DNS. Um endereço IP é uma sequência única de números que identificam uma máquina em uma rede, como a Internet. Para obter mais informações sobre conceitos de nome de domínio, consulte nosso artigo de Introdução à terminologia, componentes e conceitos do DNS.

      O valor localhost é um endereço privado especial que os computadores utilizam para se referir a eles mesmos. Normalmente, ele é equivalente ao endereço IP interno 127.0.0.1 e está disponível apenas para o computador local, ou seja, não está disponível para nenhuma rede local da qual participamos ou para a Internet.

      A porta é um número que os servidores usam como um ponto de extremidade ou uma “passagem” para nosso endereço IP. Em nosso exemplo, utilizaremos a porta 8000 para nosso servidor Web. As portas 8080 e 8000 são normalmente usadas como as portas padrão em processos de desenvolvimento e, na maioria dos casos, os desenvolvedores utilizarão essas portas em vez de outras disponíveis para servidores HTTP.

      Ao vincularmos nosso servidor a este host e porta, conseguiremos acessar nosso servidor ao visitarmos http://localhost:8000 em um navegador local.

      Vamos adicionar uma função especial que em Node.js, chamamos de request listener. Esta função foi criada para processar uma solicitação HTTP de entrada e retornar uma resposta HTTP. A função deve ter dois argumentos: um objeto de solicitação e um objeto de resposta. O objeto de solicitação capta todos os dados da solicitação HTTP que chegam. O objeto de resposta é usado para devolver respostas HTTP para o servidor.

      Queremos que nosso primeiro servidor retorne a seguinte mensagem sempre que alguém o acessar: "My first server!".

      Vamos adicionar a função a seguir:

      first-servers/hello.js

      ...
      
      const requestListener = function (req, res) {
          res.writeHead(200);
          res.end("My first server!");
      };
      

      Normalmente, o nome de uma função baseia-se no que ela faz. Por exemplo, se criássemos uma função request listener para retornar uma lista de livros, daríamos a ela o nome listBooks(). Como este é um caso de exemplo, usaremos o nome genérico requestListener.

      Todas as funções request listener em Node,js aceitam dois argumentos: req e res (podemos dar nomes diferentes a eles se quisermos). A solicitação HTTP que o usuário envia é capturada em um objeto Request, que corresponde ao primeiro argumento, req. A resposta HTTP que retornamos para o usuário é formada pela interação com o objeto Response no segundo argumento, res.

      A primeira linha res.writeHead(200); define o código de status HTTP da resposta. Os códigos de status do HTTP indicam o quão bem uma solicitação HTTP foi processada pelo servidor. Neste caso, o código de status 200 corresponde a "OK". Se estiver interessado em aprender sobre os vários códigos HTTP que seus servidores Web podem retornar e o que eles significam, o nosso guia Como resolver problemas comuns de erros de códigos HTTP será um bom ponto de partida.

      A próxima linha da função res.end("My first server!") ; escreve a resposta HTTP e a retorna para o cliente que a solicitou. Esta função retorna todos os dados que o servidor precisa retornar. Neste caso, ele retorna dados de texto.

      Por fim, podemos criar nosso servidor e usar nosso request listener:

      first-servers/hello.js

      ...
      
      const server = http.createServer(requestListener);
      server.listen(port, host, () => {
          console.log(`Server is running on http://${host}:${port}`);
      });
      

      Salve e saia do nano pressionando CTRL+X.

      Na primeira linha, criamos um novo objeto server através da função createServer() do módulo http. Este servidor aceita solicitações HTTP e as passa para nossa função requestListener().

      Após criarmos nosso servidor, precisaremos associá-lo a um endereço de rede. Faremos isso com o método server.listen(). Ele aceita três argumentos: port, host e uma função de retorno de chamada que é acionada quando o servidor começa a escutar.

      Todos esses argumentos são opcionais, mas é aconselhável especificar qual porta e qual host queremos que o servidor Web utilize. Ao implantar servidores Web para diferentes ambientes, é importante saber a porta e o host nos quais ele está funcionando para configurar o balanceamento de carga ou um alias DNS.

      A função de retorno de chamada registra uma mensagem no nosso console para que possamos saber quando o servidor começou a escutar conexões.

      Nota: embora o requestListener() não utilize o objeto req, ele deve ser o primeiro argumento da função.

      Usando menos de quinze linhas de código, criamos um servidor Web. Vamos vê-lo em ação e testá-lo por completo, executando o programa:

      No console, veremos esta saída:

      Output

      Server is running on http://localhost:8000

      Note que o prompt desaparece. Isso acontece porque o servidor Node.js é um processo de longa duração. Ele só fecha caso encontre um erro que cause falha e encerramento, ou se interrompermos o processo do Node.js que está sendo executado o servidor.

      Em uma janela do terminal separada, nos comunicaremos com o servidor usando o cURL, uma ferramenta CLI que transfere dados para e a partir de uma rede. Digite o seguinte comando para fazer uma solicitação GET HTTP ao nosso servidor em execução:

      • curl http://localhost:8000

      Ao pressionar ENTER, nosso terminal mostrará o seguinte resultado:

      Output

      My first server!

      Acabamos de configurar um servidor e receber nossa primeira resposta do servidor.

      Vamos detalhar o que aconteceu quando testamos nosso servidor. Ao utilizar o cURL, enviamos uma solicitação GET para o servidor em http://localhost:8000. Nosso servidor Node.js escutou as conexões deste endereço. O servidor transmitiu a solicitação para a função requestListener(). A função retornou dados de texto com o código de status 200. Em seguida, o servidor enviou esta resposta de volta ao cURL, que exibiu a mensagem em nosso terminal.

      Antes de continuarmos, vamos sair de nosso servidor em execução pressionando CTRL+C. Isso interrompe a execução de nosso servidor, e nos traz de volta ao prompt de linha de comando.

      Na maioria dos sites que visitamos ou APIs que utilizamos, as respostas do servidor raramente são textos sem formatação. Os formatos de resposta mais comuns que recebemos são páginas HTML e dados JSON. No próximo passo, aprenderemos como retornar respostas HTTP em formatos de dados comuns que encontramos na Web.

      Passo 2 — Retornando tipos diferentes de conteúdo

      A resposta que retornamos a partir de um servidor Web pode ter vários formatos. O JSON e o HTML foram mencionados anteriormente e, além deles, podemos retornar outros formatos de texto, como o XML e o CSV. Por fim, os servidores Web podem retornar dados não textuais, como PDFs, arquivos zip, áudio e vídeo.

      Neste artigo, além do texto sem formatação que acabamos de retornar, você aprenderá como retornar os tipos de dados a seguir:

      Os três tipos de dados são baseados em texto e são formatos populares para o envio de conteúdos na Web. Muitas linguagens e ferramentas de desenvolvimento do servidor possuem recursos para retornar esses tipos diferentes de dados. No contexto do Node.js, precisaremos fazer duas coisas:

      1. Definir o cabeçalho do Content-Type em nossas respostas HTTP com o valor adequado.
      2. Confirmar que o res.end() recebe os dados no formato correto.

      Veremos isso em ação com alguns exemplos. O código que escreveremos nesta seção e em seções posteriores possui muitas semelhanças com o código que escrevemos anteriormente. A maioria das alterações existem dentro da função requestListener(). Criaremos arquivos com este “código modelo” para facilitar o acompanhamento das próximas seções.

      Crie um arquivo novo chamado html.js. Este arquivo será usado mais tarde para retornar texto HTML em uma resposta HTTP. Colocaremos o código modelo aqui e o copiaremos para os outros servidores que retornam vários tipos.

      No terminal, digite o seguinte:

      Abra este arquivo em um editor de texto:

      Copie o “código modelo” Cole o código no nano:

      first-servers/html.js

      const http = require("http");
      
      const host = 'localhost';
      const port = 8000;
      
      const requestListener = function (req, res) {};
      
      const server = http.createServer(requestListener);
      server.listen(port, host, () => {
          console.log(`Server is running on http://${host}:${port}`);
      });
      

      Salve e saia do html.js com CTRL+X e, em seguida, retorne ao terminal.

      Vamos copiar este arquivo em dois arquivos novos. O primeiro arquivo terá o objetivo de retornar dados CSV na resposta HTTP:

      O segundo arquivo retornará uma resposta JSON no servidor:

      Os arquivos restantes serão úteis para exercícios posteriores:

      • cp html.js htmlFile.js
      • cp html.js routes.js

      Agora estamos prontos para continuar nossos exercícios. Começaremos retornando o JSON.

      Apresentando o JSON

      Mais conhecido como JSON, o JavaScript Object Notation é um formato de troca de dados baseado em texto. Como o nome sugere, ele é derivado de objetos do JavaScript, mas é independente de linguagem e pode ser usado por qualquer linguagem de programação que possa analisar sua sintaxe.

      O JSON é geralmente usado pelas APIs para aceitar e retornar dados. Sua popularidade se deve ao fato de ser um formato de transferência de dados mais leve que os padrões anteriores a ele, como o XML, bem como às ferramentas que permitem que esse dados sejam analisados pelos programas sem muito esforço. Se quiser aprender mais sobre o JSON, leia nosso guia sobre Como trabalhar com JSON em JavaScript.

      Abra o arquivo json.js com o nano:

      Queremos retornar uma resposta JSON. Vamos modificar a função requestListener() para retornar o cabeçalho apropriado a respostas JSON, modificando as linhas destacadas da seguinte maneira:

      first-servers/json.js

      ...
      const requestListener = function (req, res) {
          res.setHeader("Content-Type", "application/json");
      };
      ...
      

      O método res.setHeader() adiciona um cabeçalho HTTP à resposta. Os cabeçalhos HTTP são informações adicionais que podem ser anexadas a uma solicitação ou uma resposta. O método res.setHeader() recebe dois argumentos: o nome do cabeçalho e o valor dele.

      O cabeçalho Content-Type é usado para indicar o formato dos dados, também conhecido como tipo de mídia, que está sendo enviado com a solicitação ou resposta. Neste caso, nosso Content-Type é o application/json.

      Vamos retornar o conteúdo JSON ao usuário. Modifique o json.js para que ele se pareça com isto:

      first-servers/json.js

      ...
      const requestListener = function (req, res) {
          res.setHeader("Content-Type", "application/json");
          res.writeHead(200);
          res.end(`{"message": "This is a JSON response"}`);
      };
      ...
      

      Assim como antes, diremos aos usuários que as solicitações deles foram bem-sucedidas, retornando um código de status 200. Desta vez, na chamada response.end(), nosso argumento string contém um JSON válido.

      Salve e saia do json.js pressionando CTRL+X. Agora, vamos executar o servidor com o comando node:

      Em outro terminal, vamos acessar o servidor usando o cURL:

      • curl http://localhost:8000

      Ao pressionar ENTER, veremos o seguinte resultado:

      Output

      {"message": "This is a JSON response"}

      Agora, retornamos com sucesso uma resposta JSON, à semelhança de várias APIs populares que usamos para criar aplicativos. Você precisa sair do servidor em execução, usando CTRL+C, para que possamos retornar ao prompt do terminal padrão. Em seguida, vamos examinar outro formato popular de retorno de dados: o CSV.

      Apresentando o CSV

      O formato de arquivos CSV (valores separados por vírgula) é um padrão de texto muito usado para fornecer dados tabulares. Na maioria dos casos, cada linha é separada por um caractere de nova linha, e cada item da linha é separado por uma vírgula.

      Em nosso espaço de trabalho, abra o arquivo csv.js com um editor de texto:

      Vamos adicionar as linhas seguintes para nossa função requestListener():

      first-servers/csv.js

      ...
      const requestListener = function (req, res) {
          res.setHeader("Content-Type", "text/csv");
          res.setHeader("Content-Disposition", "attachment;filename=oceanpals.csv");
      };
      ...
      

      Desta vez, nosso Content-Type indica que um arquivo CSV está sendo retornado, pois o valor é text/csv. O segundo cabeçalho que adicionamos é o Content-Disposition. Este cabeçalho diz ao navegador como exibir os dados, em particular no navegador, ou como um arquivo separado.

      Ao retornarmos respostas CSV, a maioria dos navegadores modernos baixam automaticamente o arquivo, mesmo se o cabeçalho Content-Disposition não estiver definido. No entanto, ao retornar um arquivo CSV, devemos adicionar este cabeçalho mesmo assim, pois ele nos permite definir o nome do arquivo CSV. Neste caso, sinalizamos ao navegador que este arquivo CSV é um anexo e ele deve ser baixado. Em seguida, dizemos ao navegador que o nome do arquivo é oceanpals.csv.

      Vamos escrever os dados CSV na resposta HTTP:

      first-servers/csv.js

      ...
      const requestListener = function (req, res) {
          res.setHeader("Content-Type", "text/csv");
          res.setHeader("Content-Disposition", "attachment;filename=oceanpals.csv");
          res.writeHead(200);
          res.end(`id,name,emailn1,Sammy Shark,shark@ocean.com`);
      };
      ...
      

      Assim como antes, retornarmos um status 200/OK com nossa resposta. Desta vez, nossa chamada para o res.end() tem uma string que é uma CSV válida. A vírgula separa o valor de cada coluna e o caractere de nova linha (n) separa as linhas. Temos duas linhas, uma para o cabeçalho da tabela e outra para os dados.

      Testaremos este servidor no navegador. Salve o csv.js e saia do editor com o CTRL+X.

      Execute o servidor com o comando Node.js:

      Em outro terminal, acesse o servidor pelo cURL:

      • curl http://localhost:8000

      O console mostrará isso:

      Output

      id,name,email 1,Sammy Shark,shark@ocean.com

      Se formos para http://localhost:8000 em nosso navegador, um arquivo CSV será baixado. O nome do arquivo será oceanpals.csv.

      Saia do servidor em execução com CTRL+C, para retornar ao prompt do terminal padrão.

      Ao retornar o JSON e o CSV, abordamos dois casos populares das APIs. Em seguida, vamos abordar como retornar dados para sites que as pessoas visualizam em um navegador.

      Apresentando o HTML

      O HTML, ou HyperText Markup Language, é o formato mais comum utilizado quando queremos que usuários interajam com nosso servidor através de um navegador Web. Ele foi criado para estruturar o conteúdo Web. Os navegadores Web são desenvolvidos para exibir conteúdo HTML, bem como qualquer estilo que adicionarmos com o CSS (outra tecnologia Web de front-end que nos permite alterar a estética de nossos sites).

      Vamos abrir novamente o html.js com nosso editor de texto:

      Modifique a função requestListener() para retornar o cabeçalho de Content-Type apropriado para uma resposta HTML:

      first-servers/html.js

      ...
      const requestListener = function (req, res) {
          res.setHeader("Content-Type", "text/html");
      };
      ...
      

      Vamos retornar o conteúdo HTML ao usuário. Adicione as linhas destacadas ao html.js para que se pareça com isso:

      first-servers/html.js

      ...
      const requestListener = function (req, res) {
          res.setHeader("Content-Type", "text/html");
          res.writeHead(200);
          res.end(`<html><body><h1>This is HTML</h1></body></html>`);
      };
      ...
      

      Adicionamos primeiro o código de status HTTP. Em seguida, chamamos o response.end() com um argumento string que contém um HTML válido. Quando acessarmos nosso servidor no navegador, veremos uma página HTML com uma tag de cabeçalho que contém This is HTML.

      Vamos salvar e sair pressionando o CTRL+X. Agora, vamos executar o servidor com o comando node:

      Veremos a mensagem Server is running on http://localhost:8000 quando nosso programa for iniciado.

      Vá para o navegador e visite http://localhost:8000. Nossa página se parecerá com esta:

      Imagem da resposta HTML retornada do servidor Node.js

      Vamos encerrar a execução do servidor com CTRL+C e retornar ao prompt do terminal padrão.

      É comum que o HTML seja escrito em um arquivo separado do código do servidor, como nossos programas do Node.js. Em seguida, veremos como retornar respostas HTML a partir dos arquivos.

      Passo 3 — Apresentando uma página HTML a partir de um arquivo

      Podemos apresentar aos usuários o HTML como strings no Node.js, mas é melhor carregar os arquivos HTML e exibir seu conteúdo a eles. Desta maneira, não precisamos manter strings longas em nosso código Node.js à medida que o arquivo HTML cresce. Isso mantém o código mais conciso e permite que trabalhemos em cada aspecto do nosso site de maneira independente. Esta “separação de problemas” é comum em várias configurações de desenvolvimento Web. Assim, é bom saber como carregar arquivos HTML para permitir esta separação no Node.js.

      Para exibir arquivos HTML aplicaremos o módulo fs para carregar os arquivos e usaremos os dados dele ao escrever nossa resposta HTTP.

      Primeiro, criaremos um arquivo HTML, que será retornado pelo servidor Web quando solicitado. Crie um novo arquivo HTML:

      Abra o index.html em um editor de texto:

      Nossa página Web será bem simples. Ela terá um plano de fundo e exibirá um texto de saudação no centro. Adicione este código ao arquivo:

      first-servers/index.html

      <!DOCTYPE html>
      
      <head>
          <title>My Website</title>
          <style>
              *,
              html {
                  margin: 0;
                  padding: 0;
                  border: 0;
              }
      
              html {
                  width: 100%;
                  height: 100%;
              }
      
              body {
                  width: 100%;
                  height: 100%;
                  position: relative;
                  background-color: rgb(236, 152, 42);
              }
      
              .center {
                  width: 100%;
                  height: 50%;
                  margin: 0;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  color: white;
                  font-family: "Trebuchet MS", Helvetica, sans-serif;
                  text-align: center;
              }
      
              h1 {
                  font-size: 144px;
              }
      
              p {
                  font-size: 64px;
              }
          </style>
      </head>
      
      <body>
          <div class="center">
              <h1>Hello Again!</h1>
              <p>This is served from a file</p>
          </div>
      </body>
      
      </html>
      

      Esta página Web mostra duas linhas de texto: Hello Again! e This is served from a file. As linhas aparecem no centro da página, uma acima da outra. A primeira linha de texto é exibida como um título, ou seja, em letras maiores. A segunda linha de texto aparecerá em letras ligeiramente menores. Todo o texto aparecerá na cor branca enquanto a página Web tem plano de fundo laranja.

      Embora não seja o âmbito deste artigo ou série, se estiver interessado em aprender mais sobre HTML, CSS e outras tecnologias Web de front-end, dê uma olhada no guia Introdução à Web do Mozilla.

      Isso é tudo o que precisamos para o HTML. Assim, salve e saia do arquivo com o CTRL+X. Agora, podemos avançar para o código do servidor.

      Para este exercício, trabalharemos com o htmlFile.js. Abra-o com o editor de texto:

      Como temos que ler um arquivo, vamos começar importando o módulo fs:

      first-servers/htmlFile.js

      const http = require("http");
      const fs = require('fs').promises;
      ...
      

      Este módulo contém uma função readFile() que utilizaremos para carregar o arquivo HTML corretamente. Importamos o objeto promessa do tipo variant, de acordo com as práticas modernas recomendadas para o JavaScript. Usamos as promessas por serem sintaticamente mais sucintas em comparação ao retorno de chamada, que teríamos que usar se atribuíssemos o fs para fazer somente o require('fs'). Para aprender mais sobre as práticas recomendadas da programação assíncrona, leia nosso guia Como escrever um código assíncrono no Node.js.

      Queremos que nosso arquivo HTML seja lido quando um usuário solicitar nosso sistema. Começaremos modificando o requestListener() para ler o arquivo:

      first-servers/htmlFile.js

      ...
      const requestListener = function (req, res) {
          fs.readFile(__dirname + "/index.html")
      };
      ...
      

      Usamos o método fs.readFile() para carregar o arquivo. Seu argumento possui o __dirname + "/index.html". A variável especial __dirname tem o caminho absoluto de onde o código Node.js está sendo executado. Em seguida, acrescentamos o /index.html para poder carregar o arquivo HTML que criamos mais cedo.

      Agora, vamos retornar a página HTML assim que estiver carregada:

      first-servers/htmlFile.js

      ...
      const requestListener = function (req, res) {
          fs.readFile(__dirname + "/index.html")
              .then(contents => {
                  res.setHeader("Content-Type", "text/html");
                  res.writeHead(200);
                  res.end(contents);
              })
      };
      ...
      

      Se a promessa fs.readFile() for resolvida com sucesso, ela retornará os dados dela. Usamos o método then() para processar este caso. O parâmetro contents contém os dados do arquivo HTML.

      Primeiramente, definimos o cabeçalho Content-Type para text/html para dizer ao cliente que estamos retornando dados HTML. Em seguida, escrevemos o código do status para indicar que a solicitação foi bem-sucedida. Por fim, enviamos ao cliente a página HTML que carregamos, com os dados na variável contents.

      O método fs.readFile() pode falhar ocasionalmente, por este motivo, precisamos saber como lidar com esta questão quando recebermos um erro. Adicione isso à função requestListener():

      first-servers/htmlFile.js

      ...
      const requestListener = function (req, res) {
          fs.readFile(__dirname + "/index.html")
              .then(contents => {
                  res.setHeader("Content-Type", "text/html");
                  res.writeHead(200);
                  res.end(contents);
              })
              .catch(err => {
                  res.writeHead(500);
                  res.end(err);
                  return;
              });
      };
      ...
      

      Salve o arquivo e saia do nano com o CTRL+X.

      Quando uma promessa encontra um erro, ela é rejeitada. Trataremos esta questão usando o método catch(). Ele aceita o erro que o fs.readFile() retorna, define o código de status para 500 sinalizando que um erro interno foi encontrado, e retorna o erro para o usuário.

      Execute nosso servidor com o comando node:

      No navegador Web, visite http://localhost:8000​​​. Você verá esta página:

      Imagem da página HTML carregada a partir de um arquivo no Node.js

      Você retornou uma página HTML a partir de um servidor para o usuário. Você pode encerrar a execução do servidor com o CTRL+C. Você verá o prompt do terminal quando encerrar o servidor.

      Ao escrever um código como este em um ambiente de produção, não é recomendável carregar uma página HTML toda vez que você receber uma solicitação HTTP. Embora essa página HTML tenha cerca de 800 bytes em tamanho, sites mais complexos podem ter megabytes em tamanho. Arquivos muito grandes podem levar um bom tempo para carregar. Se for esperado que seu site tenha um tráfego intenso, é recomendável carregar os arquivos HTML no momento da inicialização, além de salvar o conteúdo deles. Após eles carregarem, defina o servidor e faça-o escutar solicitações em um endereço.

      Para demonstrar este método, veremos como podemos retrabalhar nosso servidor para torná-lo mais eficiente e escalonável.

      Apresentando o HTML adequadamente

      Neste passo, em vez de carregar o HTML para cada solicitação, o carregaremos apenas uma vez, no início. A solicitação retornará os dados que carregamos na inicialização.

      No terminal, abra novamente o script do Node.js com um editor de texto:

      Começaremos adicionando uma nova variável antes de criarmos a função requestListener():

      first-servers/htmlFile.js

      ...
      let indexFile;
      
      const requestListener = function (req, res) {
      ...
      

      Quando executarmos este programa, esta variável reterá o conteúdo do arquivo HTML.

      Agora, vamos reajustar a função requestListener(). Em vez de carregar o arquivo, ele retornará o conteúdo do indexFile:

      first-servers/htmlFile.js

      ...
      const requestListener = function (req, res) {
          res.setHeader("Content-Type", "text/html");
          res.writeHead(200);
          res.end(indexFile);
      };
      ...
      

      Em seguida, trocaremos a lógica de leitura do arquivo, da função requestListener() para a inicialização do nosso servidor. Faça as seguintes alterações à medida que criamos o servidor:

      first-servers/htmlFile.js

      ...
      
      const server = http.createServer(requestListener);
      
      fs.readFile(__dirname + "/index.html")
          .then(contents => {
              indexFile = contents;
              server.listen(port, host, () => {
                  console.log(`Server is running on http://${host}:${port}`);
              });
          })
          .catch(err => {
              console.error(`Could not read index.html file: ${err}`);
              process.exit(1);
          });
      

      Salve o arquivo e saia do nano com o CTRL+X.

      O código que lê o arquivo é parecido com o que escrevemos em nossa primeira tentativa. No entanto, quando a leitura do arquivo for bem-sucedida, salvaremos seu conteúdo em nossa variável global indexFile. Em seguida, iniciamos o servidor com o método listen(). O ponto principal é que o arquivo precisa ser carregado antes do servidor ser executado. Desta maneira, a função requestListener() certamente retornará uma página HTML, pois a variável indexFile não estará vazia.

      Nosso manipulador de erros também foi alterado. Se o arquivo não puder ser carregado, o erro será capturado e exibido em nosso console. Em seguida, saímos do programa Node.js com a função exit() sem iniciar o servidor. Desta maneira, podemos ver a razão pela qual a leitura do arquivo falhou, resolver o problema e, em seguida, iniciar novamente o servidor.

      Nós criamos servidores Web diferentes que retornam vários tipos de dados para um usuário. Até agora, não utilizamos nenhuma solicitação de dados para determinar o que deveria ser retornado. Precisaremos usar dados de solicitação ao configurar rotas ou caminhos diferentes em um servidor Node.js. Por este motivo, veremos a seguir como eles funcionam juntos.

      Passo 4 — Gerenciando rotas usando um objeto de solicitação HTTP

      A maioria dos sites que visitamos ou APIs que utilizamos geralmente possui mais de um ponto de extremidade, para que possamos acessar vários recursos. Um bom exemplo disso seria um sistema de gerenciamento de livros que poderia ser usado em uma biblioteca. Esse sistema precisaria gerenciar não apenas os dados de livros, mas também os dados de autores, para facilitar os processos de catalogação e consulta.

      Embora os dados para livros e autores estejam relacionados, eles são dois objetos diferentes. Nestes casos, os desenvolvedores de software normalmente programam pontos de extremidades diferentes, como uma maneira de indicar aos usuários da API com quais tipos de dados eles estão interagindo.

      Vamos criar um novo servidor para uma biblioteca pequena, com o propósito de retornar dois tipos diferentes de dados. Se um usuário acessar o endereço de nosso servidor em /books, ele receberá uma lista de livros em JSON. Se eles forem para /authors, receberão uma lista de informações do autor em JSON.

      O que fizemos até agora foi retornar a mesma resposta para cada solicitação que recebemos. Vamos ilustrar isso rapidamente.

      Execute novamente nosso exemplo de resposta JSON:

      Em outro terminal, faremos a mesma solicitação cURL de antes:

      • curl http://localhost:8000

      Você verá:

      Output

      {"message": "This is a JSON response"}

      Agora, vamos testar outro comando curl:

      • curl http://localhost:8000/todos

      Após pressionar Enter, verá o mesmo resultado:

      Output

      {"message": "This is a JSON response"}

      Nós não desenvolvemos nenhuma lógica especial em nossa função requestListener() que possa processar um pedido cuja URL contenha /todos. Por esse motivo, o Node.js retorna a mesma mensagem JSON por padrão.

      Como queremos desenvolver um servidor de gerenciamento para uma biblioteca pequena, separaremos os tipos de dados retornados de acordo com o ponto de extremidade que o usuário acessar.

      Primeiro, saia do servidor em execução com o CTRL+C.

      Abra o routes.js em seu editor de texto:

      Começaremos armazenando nossos dados JSON em variáveis antes da função requestListener():

      first-servers/routes.js

      ...
      const books = JSON.stringify([
          { title: "The Alchemist", author: "Paulo Coelho", year: 1988 },
          { title: "The Prophet", author: "Kahlil Gibran", year: 1923 }
      ]);
      
      const authors = JSON.stringify([
          { name: "Paulo Coelho", countryOfBirth: "Brazil", yearOfBirth: 1947 },
          { name: "Kahlil Gibran", countryOfBirth: "Lebanon", yearOfBirth: 1883 }
      ]);
      ...
      

      A variável books é uma string que contém dados JSON para uma matriz de objetos do tipo livro. Cada livro tem um título ou nome, um autor e o ano de publicação.

      A variável authors é uma string que contém o JSON para uma matriz de objetos do tipo autor. Cada autor tem um nome, país de origem e seu ano de nascimento.

      Agora que temos os dados que nossas respostas retornarão, vamos começar a modificar a função requestListener() para retornar as rotas corretas.

      Primeiro, vamos garantir que cada resposta de nosso servidor tenha o cabeçalho Content-Type correto:

      first-servers/routes.js

      ...
      const requestListener = function (req, res) {
          res.setHeader("Content-Type", "application/json");
      }
      ...
      

      Agora, queremos retornar o JSON correto de acordo com o caminho da URL que o usuário acessar. Vamos criar uma instrução de switch na URL da solicitação:

      first-servers/routes.js

      ...
      const requestListener = function (req, res) {
          res.setHeader("Content-Type", "application/json");
          switch (req.url) {}
      }
      ...
      

      Para obter o caminho da URL de um objeto de solicitação, precisamos acessar sua propriedade url. Podemos adicionar casos à instrução switch para retornar o JSON apropriado.

      A instrução switch do JavaScript fornece uma maneira de controlar qual código é executado, dependendo do valor de um objeto ou expressão JavaScript (por exemplo, o resultado de operações matemáticas). Se precisar aprender ou recordar como utilizá-las, consulte nosso guia sobre Como usar a instrução switch em JavaScript.

      Vamos seguir em frente adicionando um case para quando o usuário quiser receber nossa lista de livros:

      first-servers/routes.js

      ...
      const requestListener = function (req, res) {
          res.setHeader("Content-Type", "application/json");
          switch (req.url) {
              case "/books":
                  res.writeHead(200);
                  res.end(books);
                  break
          }
      }
      ...
      

      Definimos nosso código de status para 200, que indica que está tudo bem com a solicitação, e retorna o JSON que contém a lista de nossos livros. Agora, vamos adicionar outro case para nossos autores:

      first-servers/routes.js

      ...
      const requestListener = function (req, res) {
          res.setHeader("Content-Type", "application/json");
          switch (req.url) {
              case "/books":
                  res.writeHead(200);
                  res.end(books);
                  break
              case "/authors":
                  res.writeHead(200);
                  res.end(authors);
                  break
          }
      }
      ...
      

      Assim como antes, o código de status será 200, pois não há nada errado com a solicitação. Desta vez retornamos o JSON que contém a lista de autores.

      Temos que retornar um erro caso o usuário tente acessar qualquer outro caminho. Para fazermos isso, adicionaremos o caso padrão:

      routes.js

      ...
      const requestListener = function (req, res) {
          res.setHeader("Content-Type", "application/json");
          switch (req.url) {
              case "/books":
                  res.writeHead(200);
                  res.end(books);
                  break
              case "/authors":
                  res.writeHead(200);
                  res.end(authors);
                  break
              default:
                  res.writeHead(404);
                  res.end(JSON.stringify({error:"Resource not found"}));
          }
      }
      ...
      

      Usamos a palavra-chave default em uma instrução switch para capturar todos os outros cenários que não foram capturados pelos nossos casos anteriores. Definimos o código de status para 404, que indica que a URL que eles estavam procurando não foi encontrada. Em seguida, definimos um objeto JSON que contém uma mensagem de erro.

      Vamos testar nosso servidor para verificar se ele se comporta como o esperado. Em outro terminal, executamos primeiro um comando para ver se recebemos nossa lista de livros:

      • curl http://localhost:8000/books

      Pressione Enter para ver o seguinte resultado:

      Output

      [{"title":"The Alchemist","author":"Paulo Coelho","year":1988},{"title":"The Prophet","author":"Kahlil Gibran","year":1923}]

      Até agora, tudo certo. Vamos fazer o mesmo processo para o /authors. Digite o comando a seguir no terminal:

      • curl http://localhost:8000/authors

      Você verá o seguinte resultado quando o comando for concluído:

      Output

      [{"name":"Paulo Coelho","countryOfBirth":"Brazil","yearOfBirth":1947},{"name":"Kahlil Gibran","countryOfBirth":"Lebanon","yearOfBirth":1883}]

      Vamos testar uma URL errada para confirmar que o requestListener() retorna a resposta de erro:

      • curl http://localhost:8000/notreal

      Ao digitar este comando, a seguinte mensagem será exibida:

      Output

      {"error":"Resource not found"}

      Você pode sair da execução do servidor com o CTRL+C.

      Acabamos de criar caminhos diferentes para que os usuários obtenham dados diferentes. Nós também adicionamos uma resposta padrão que retornará um erro HTTP caso o usuário digite uma URL não compatível.

      Conclusão

      Neste tutorial, você criou uma série de servidores HTTP Node.js. Primeiro, você retornou uma resposta de texto básica. Em seguida, avançou para retornar vários tipos de dados a partir de nosso servidor: JSON, CSV e HTML. A partir de então, você conseguiu combinar o carregamento de arquivos com as respostas HTTP para retornar uma página HTML do servidor para o usuário, além de criar uma API que usou informações da solicitação do usuário para determinar quais dados deveriam ser enviados em resposta a esta solicitação.

      Você está preparado para criar servidores Web que podem processar uma variedade de solicitações e respostas. Com esse conhecimento, é possível criar um servidor que retorna várias páginas HTML para usuários em pontos de extremidades diferentes. É possível também criar sua própria API.

      Para aprender mais sobre servidores Web HTTP em Node.js, leia a documentação do Node.js no módulo http. Caso queira continuar aprendendo sobre o Node.js, volte para a página da série Como programar em Node.js.



      Source link

      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