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

Book a call with @terieyenike

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

 Add passwordless user experiences to your app

Como construir um gerador de código QR em React

HackerNoon Mobile

Como construir um gerador de código QR em React

Muito longo; Para ler

Company Mentioned

@terieyenike

HISTÓRIAS RELACIONADAS