Como construir um gerador de código QR usando React

Este prático aplicativo permite criar seus próprios códigos QR. Você pode construí-lo com muito pouco esforço, usando a poderosa biblioteca QRCode.

Um código QR (Quick Response) é um código de barras bidimensional que pode armazenar e transmitir informações em um formato legível por máquina. Essas informações podem incluir links para o site de uma empresa, menu de restaurante, detalhes do produto ou página de instruções.

A tecnologia do código QR visa ajudar as empresas a fornecer aos seus usuários acesso rápido à informação, o que pode proporcionar uma vantagem competitiva.

Aprenda como construir um gerador de código QR em React com exemplos práticos de código.

Para construir o gerador de QR Code, você precisará de:

Você pode encontrar o projeto finalizado no GitHub para referência e exploração adicional.

Os códigos QR podem parecer simples e aleatórios, mas o formato possui alguns recursos inteligentes para incluir muitos dados e ajudar na legibilidade.

Você provavelmente está familiarizado com imagens de código QR. O acima irá levá-lo para a página inicial do MUO se você digitalizá-lo. Você deve ter visto códigos QR semelhantes em embalagens de produtos, em restaurantes ou em outdoors.

O design de um código QR concentra-se em sua estética, incluindo cor e tamanho, adição de um logotipo ao código QR, incorporação de arte personalizada ou aplicação geral de vários efeitos visuais.

Por outro lado, a estrutura de um código QR concentra-se na disposição física dos elementos dentro de um código QR. Esses elementos seguem um layout predefinido para garantir a decodificação adequada. Eles são os seguintes:

O primeiro refere-se à conversão de dados ou informações de entrada (uma URL) em uma matriz de código QR. Em contraste, o último refere-se à extração de dados ou informações armazenados de um código QR usando uma câmera de smartphone ou leitores de código QR dedicados.

QRCode é uma biblioteca de terceiros usada para gerar códigos de barras 2D. QRCode é atualmente a biblioteca de códigos QR mais popular, com mais de um milhão de instalações semanais e suporte para aplicativos cliente e servidor.

Para instalar o QRCode em uma aplicação React existente, abra seu terminal, navegue até o diretório do seu projeto e execute o seguinte código:

Ou se preferir npm, use:

O repositório do projeto contém dois ramos:inicianteefinal . Você pode usar o primeiro como base para construir o projeto ou o último para visualizar a demonstração finalizada.

Fornecemos um aplicativo inicial no GitHub com a IU criada para ajudar você a se concentrar na implementação. Abra seu terminal e execute o seguinte comando para clonar o branch inicial do repositório em sua máquina local:

Execute o seguinte comando de terminal, dentro do diretório do projeto, para instalar suas dependências:

Ou:

Para iniciar o aplicativo, execute:

Ou:

Incrível! Você deverá ver a IU exibida em seu navegador:

Abra osrc/App.jsxarquivo e substitua seu conteúdo pelo seguinte código:

Este trecho de código faz o seguinte:

Agora você pode renderizar condicionalmente a visualização gerada em umdivisãoelemento quando odataUrlmudanças de estado:

Teste seu aplicativo em um navegador e confirme se ele dá o resultado esperado:

Embora a tecnologia do código QR vise ajudar as pessoas a acessar informações rapidamente, ela também traz algumas preocupações potenciais de segurança.

Agora que você aprendeu como gerar códigos QR em seu aplicativo React, você deve aprender como digitalizar esses códigos QR com segurança.

Francis é um desenvolvedor web front-end com experiência em React.js/Next.js, uma popular biblioteca/framework JavaScript. Ele compartilha apaixonadamente seu conhecimento técnico com outras pessoas por meio de ensino em sala de aula e artigos técnicos. Você pode encontrá-lo jogando ou explorando novos lugares quando não estiver programando ou ensinando.