A ideia por trás da criação de um gerador de código de resposta rápida (QR) é converter dados de imagens em texto. Um código QR é simplesmente a representação de dados de imagem como texto e possui muitos aplicativos úteis, desde menus de restaurantes e ingressos para shows, até convites de calendário online, pagamentos e a lista continua.  Neste tutorial, você aprenderá como criar um código QR usando a biblioteca JavaScript React. O benefício de usar o React é que ele facilita a criação de aplicativos de front-end, pois fornece aos desenvolvedores maneiras de reutilizar componentes.  Para seguir este tutorial, o seguinte será abordado:  Pré-requisitos  Começando  Criando um gerador de código QR  Estilizando o aplicativo de código QR  Baixando o código QR gerado  Conclusão  Recursos  Demonstração    Pré-requisitos  Para concluir este tutorial, você precisa do seguinte:  Compreensão básica do React.js    instalado em sua máquina local Nó >= 14.0.0 e npm >= 5.6   Começando  Antes de escrever uma linha de código, abra seu terminal e execute o seguinte comando:    npx create-react-app qrcode-generator  O comando acima monta os arquivos e instala alguns pacotes necessários para criar o aplicativo React.  Em seguida, navegue até o diretório do projeto e execute o servidor de desenvolvimento que pode ser acessado em  usando o comando abaixo para visualizar o aplicativo no navegador:    http://localhost:3000    npm start cd qrcode-generator  Finalmente, vamos instalar a biblioteca de dependência necessária para criar o gerador de código QR. Execute o comando:    npm install qrcode.react  : um componente React para gerar códigos QR para renderização no DOM.   qrcode.react   Criando um gerador de código QR  Ótimo trabalho até agora!  A criação do gerador de código QR começará com a criação dos arquivos e componentes que conterão a estrutura do código QR. Dentro do diretório src, crie uma pasta chamada components e um arquivo chamado QrCode.js na pasta.  Copie e cole o seguinte código:                              e.preventDefault();      };         setUrl(e.target.value); };                                    );                                                                                                ); };   // src/components/QrCode.js 
 import  { useState } from   "react" ; import  { QRCodeCanvas } from   "qrcode.react" ; const  QrCode = () =>  {    const  [url, setUrl] = useState( "" );    const  downloadQRCode = ( e ) =>  {   setUrl( "" );    const  qrCodeEncoder = ( e ) =>  {    const  qrcode = (      < QRCodeCanvas 
        id = "qrCode" 
        value = {url} 
        size = {300} 
        bgColor = { "# 00ff00 "}        level = { " H "}   /> 
    return  (      < div   className = "qrcode__container" > 
        < div > {qrcode} </ div > 
        < div   className = "input__group" > 
          < form   onSubmit = {downloadQRCode} > 
            < label > Enter URL </ label > 
            < input 
              type = "text" 
              value = {url} 
              onChange = {qrCodeEncoder} 
              placeholder = "https://hackernoon.com" 
      /> 
            < button   type = "submit"   disabled = {!url} > 
       Download QR code            </ button > 
          </ form > 
        </ div > 
      </ div > 
 export   default  QrCode;  Os trechos de código acima fazem o seguinte:  Importar  é usado para declarar o estado inicial da variável, url que é definido como uma string vazia e o  função,  usado para atualizar o estado   useState   setState   setUrl  A biblioteca,  , é usado para renderizar o código QR gerado   qrcode.react  A seguir, o uso do  função anexada ao  método do  elemento, pois isso é acionado pelo evento submit   downloadQRCode   onSubmit   <form>  No  elemento, o  manipulador de eventos com a função  recebe a entrada dos usuários, obtém seu valor e altera o código QR a cada nova entrada digitada   <input>   onChange   'qrCodeEncoder'  Uma variável  é criado. leva no  componente e passa alguns prompts disponíveis que personalizam e tornam o código QR visível no navegador. Confira a documentação para saber mais sobre o   no componente   qrcode   QRCodeCanvas uso de props  finalmente, o  elemento é desabilitado até que a entrada do usuário receba dados   <button>   Estilizando o aplicativo de código QR  No  pasta, crie a folha de estilo,  responsável pelo apelo visual do aplicativo   src   styles.css  Copie e cole o seguinte código:    *, *:before, *:after {              }                }              }            }                    }                  }            }                                          }                                              }                    }        }      }        }                    } } /* src/styles.css */ 
  margin: 0 ;    padding : 0 ;    box-sizing : border-box; :root  {  -- font - color : 230   35%   7% ; body  {    color : hsl ( var (--font-color)); img  {    max-width : 100% ;    display : block; .section  {    padding : 2em   0 ;    display : flex;    min-height : 100vh ;    align-items : center; .container  {    margin -inline: auto;    max-width : 75rem ;    width : 85% ; .input__group  {    display : flex;    margin-top : 2em ; input  {    width : 100% ;    padding : 1em   0.75em ;    border : 1px  solid #444343 ;    border-radius : 3px ;    margin-bottom : 2em ;    margin-top : 0.75em ; button  {    border : unset;    background : hsl ( 231 , 77% , 90% );    padding : 1em   0.75em ;    color : hsl ( var (--font-color));    cursor : pointer;    text-transform : uppercase;    font-weight : bold; @media  screen and  ( min-width : 768px ) {    .section  {      padding : 0 ;    input  {      margin : 0 ;    .qrcode__container  {      display : flex;      align-items : center;    .input__group  {      margin-left : 3em ;    input  {      margin-bottom : 2em ;      margin-top : 0.75em ;      font-size : 1rem ;  Em seguida, importe o arquivo QrCode.js e a folha de estilo no ponto de entrada do aplicativo, App.js:                                   ); } // src/App.js 
 import  QrCode from   "./components/QrCode" ; import   "./styles.css" ; export   default   function   App ( ) {    return  (      < div   className = "section container" > 
        < QrCode  /> 
      </ div > 
  Com as etapas concluídas, o aplicativo deve ficar assim:   Baixando o código QR gerado  A opção para os usuários baixarem o código QR gerado torna-o útil em uma ampla variedade de casos de uso. Desde imprimir o código até incorporá-lo em um site, os casos de uso são ilimitados.  De volta ao  arquivo, vamos atualizar a base de código para usar  para acessar os nós do modelo de objeto de documento (DOM).    components/QrCode.js   refs                  ...                                    );                              ); };   // src/components/QrCode.js 
 import  { useState, useRef } from   "react" ; // other import 
 const  QrCode = () =>  {    const  [url, setUrl] = useState( "" );    const  qrRef = useRef(); // include this: call the useRef function 
    const  qrcode = (      < QRCodeCanvas 
        id = "qrCode" 
        value = {url} 
        size = {300} 
        bgColor = { "# 00ff00 "}        level = { " H "}   /> 
    return  (      < div   className = "qrcode__container" > 
        < div   ref = {qrRef} > {qrcode} </ div >  {/* include this */}    {/* form input container */}      </ div > 
 export   default  QrCode;  Agora, vamos atualizar o  função no  arquivo para poder clicar no botão de download do código QR e salvar a tela como um arquivo de imagem.    downloadQRCode   QrCode.js             e.preventDefault();                   anchor.href = image;         anchor.click();        }; ...                              ); };   // src/components/QrCode.js 
 // imports 
 const  QrCode = () =>  {    // state 
    // useRef 
    const  downloadQRCode = ( e ) =>  {      let  canvas = qrRef.current.querySelector( "canvas" );      let  image = canvas.toDataURL( "image/png" );      let  anchor = document .createElement( "a" );   anchor.download = `qr-code.png` ;      document .body.appendChild(anchor);      document .body.removeChild(anchor);   setUrl( "" );    return  (      < div   className = "qrcode__container" > 
        < div   ref = {qrRef} > {qrcode} </ div > 
    {/* form input container */}      </ div > 
 export   default  QrCode;  No  função, ocorre o seguinte:   downloadQRCode  Ele referencia o valor atual do objeto ref com a propriedade .current para saber quando o nó muda  o  componente produz o elemento canvas no DOM que lhe dá a capacidade de criar conteúdo dinamicamente   qrcode.react  A tela é anexada ao  método com o parâmetro de tipo especificado definido para o formato de arquivo,   toDataURL   image/png  Em seguida, a âncora,  elemento é criado e o  está definido para a imagem que baixa o código QR quando o botão é clicado   <a>   href  O elemento âncora é anexado ao corpo do documento e, assim que o código QR é baixado, ele é removido  Finalmente, o URL do estado é atualizado com o  variável que limpa a entrada para o código QR gerado conforme o formulário é enviado   setUrl  O código completo para o componente QrCode.js:                             e.preventDefault();                  anchor.href = image;        anchor.click();        };        setUrl(e.target.value); };                                    );                                                                                                    ); };   import  { useState, useRef } from   "react" ; import  { QRCodeCanvas } from   "qrcode.react" ; const  QrCode = () =>  {    const  [url, setUrl] = useState( "" );    const  qrRef = useRef();    const  downloadQRCode = ( e ) =>  {      let  canvas = qrRef.current.querySelector( "canvas" );      let  image = canvas.toDataURL( "image/png" );      let  anchor = document .createElement( "a" );  anchor.download = `qr-code.png` ;      document .body.appendChild(anchor);      document .body.removeChild(anchor);  setUrl( "" );    const  qrCodeEncoder = ( e ) =>  {    const  qrcode = (      < QRCodeCanvas 
        id = "qrCode" 
        value = {url} 
        size = {300} 
        bgColor = { "# 00ff00 "}        level = { " H "}  /> 
    return  (      < div   className = "qrcode__container" > 
        < div   ref = {qrRef} > {qrcode} </ div > 
        < div   className = "input__group" > 
          < form   onSubmit = {downloadQRCode} > 
            < label > Enter URL </ label > 
            < input 
              type = "text" 
              value = {url} 
              onChange = {qrCodeEncoder} 
              placeholder = "https://hackernoon.com" 
  /> 
            < button   type = "submit"   disabled = {!url} > 
  Download QR code            </ button > 
          </ form > 
        </ div > 
      </ div > 
 export   default  QrCode;  O resultado final do aplicativo deve ficar assim:   Conclusão  Este tutorial descreveu o processo de criação de um gerador de código QR e como ele pode ser baixado para uso posterior.  Recursos   Código QR   O elemento âncora   Tudo sobre código QR

Target

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Como construir um gerador de código QR em React

Como construir um gerador de código QR em React

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Telegram: a ponte da Crypto Island para o continente

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Telegram: a ponte da Crypto Island para o continente

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps