Cómo construir un generador de códigos QR en React

La idea detrás de la creación de un generador de código de respuesta rápida (QR) es traducir datos de imágenes a texto. Un código QR es simplemente la representación de datos de imágenes como texto, y tiene muchas aplicaciones útiles, desde menús de restaurantes y entradas para conciertos, hasta invitaciones de calendario en línea, pagos, y la lista continúa. En este tutorial, aprenderá cómo crear un código QR utilizando la biblioteca de JavaScript, React. El beneficio de usar React es que hace que la creación de aplicaciones frontend sea muy sencilla, ya que proporciona a los desarrolladores formas de reutilizar componentes. Para seguir este tutorial, se cubrirá lo siguiente: requisitos previos Empezando Creación de un generador de códigos QR Diseñar la aplicación de código QR Descarga del código QR generado Conclusión Recursos Manifestación requisitos previos Para completar este tutorial, necesita lo siguiente: Comprensión básica de React.js instalado en su máquina local Nodo >= 14.0.0 y npm >= 5.6 Empezando Antes de escribir una línea de código, abre tu terminal y ejecuta el siguiente comando: npx create-react-app qrcode-generator El comando anterior crea andamios en los archivos e instala algunos paquetes necesarios para crear la aplicación React. A continuación, navegue hasta el directorio del proyecto y ejecute el servidor de desarrollo al que se puede acceder en usando el siguiente comando para obtener una vista previa de la aplicación en el navegador: http://localhost:3000 npm start cd qrcode-generator Finalmente, instalemos la biblioteca de dependencias requerida para crear el generador de códigos QR. Ejecute el comando: npm install qrcode.react : un componente de React para generar códigos QR para renderizar al DOM. qrcode.react Creación de un generador de código QR ¡Gran trabajo hasta ahora! La creación del generador de códigos QR comenzará con la creación de los archivos y componentes que contendrán la estructura del código QR. Dentro del directorio src, cree una carpeta llamada components y un archivo llamado QrCode.js en la carpeta. Copia y pega el siguiente 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 = ( return ( {qrcode} Enter URL Download QR code export default QrCode; Los fragmentos de código anteriores hacen lo siguiente: Importar se utiliza para declarar el estado inicial de la variable, url que se establece en una cadena vacía, y el función, utilizado para actualizar el estado useState setState setUrl La biblioteca, , se utiliza para representar el código QR generado qrcode.react A continuación, el uso de la función adjunta a la metodo de la elemento ya que esto es activado por el evento de envío downloadQRCode onSubmit Sobre el elemento, el controlador de eventos con la función toma la entrada de los usuarios, obtiene su valor y cambia el código QR con cada nueva entrada escrita onChange 'qrCodeEncoder' Una variable es creado. Toma en el componente y pasa algunas indicaciones disponibles que personalizan y hacen que el código QR sea visible en el navegador. Consulte la documentación para obtener más información sobre el en el componente. qrcode QRCodeCanvas uso de accesorios Finalmente, el el elemento está deshabilitado hasta que la entrada del usuario recibe datos Diseñar la aplicación de código QR En el carpeta, crea la hoja de estilo, responsable del atractivo visual de la aplicación src styles.css Copia y pega el siguiente 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 ; A continuación, importe el archivo QrCode.js y la hoja de estilo en el punto de entrada de la aplicación, App.js: ); } // src/App.js import QrCode from "./components/QrCode" ; import "./styles.css" ; export default function App ( ) { return ( Con los pasos completos, la aplicación debería verse así: Descarga del código QR generado La opción para que los usuarios descarguen el código QR generado lo hace útil en una amplia variedad de casos de uso. Desde imprimir el código hasta incrustarlo en un sitio web, los casos de uso son ilimitados. Regreso en el archivo, actualicemos el código base para usar para acceder a los nodos del 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 = ( return ( {qrcode} {/* include this */} {/* form input container */} export default QrCode; Ahora, actualicemos el función en el archivo para poder hacer clic en el botón de descarga del código QR y guardar el lienzo como un archivo de imagen. 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 ( {qrcode} {/* form input container */} export default QrCode; En el función, ocurre lo siguiente: downloadQRCode Hace referencia al valor actual del objeto ref con la propiedad .current para saber cuándo cambia el nodo los El componente produce el elemento de lienzo en el DOM que le brinda la capacidad de crear contenido dinámicamente qrcode.react El lienzo se adjunta a la método con el parámetro de tipo especificado establecido en el formato de archivo, toDataURL image/png A continuación, el ancla, se crea el elemento y el se establece en la imagen que descarga el código QR cuando se hace clic en el botón href El elemento de anclaje se adjunta al cuerpo del documento y, una vez que se descarga el código QR, se elimina Finalmente, la URL del estado se actualiza con el variable que borra la entrada del código QR generado a medida que se envía el formulario setUrl El código completo para el 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 = ( return ( {qrcode} Enter URL Download QR code export default QrCode; El resultado final de la aplicación debería verse así: Conclusión Este tutorial describió el proceso de creación de un generador de códigos QR y cómo se puede descargar para su uso posterior. Recursos Código QR El elemento ancla Todo sobre el código QR