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 = (      < 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;  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   <form>  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   <input>   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   <button>   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  (      < div   className = "section container" > 
        < QrCode  /> 
      </ div > 
  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 = (      < 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;  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  (      < div   className = "qrcode__container" > 
        < div   ref = {qrRef} > {qrcode} </ div > 
    {/* form input container */}      </ div > 
 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   <a>   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 = (      < 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;  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

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 audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

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

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

El modelo Bitcoin UTXO, impulsando un ecosistema único

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

El modelo Bitcoin UTXO, impulsando un ecosistema único

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps