L'idée derrière la création d'un générateur de code de réponse rapide (QR) est de traduire les données des images en texte. Un code QR est simplement la représentation de données d'image sous forme de texte, et il a beaucoup d'applications utiles, des menus de restaurant et des billets de concert, aux invitations de calendrier en ligne, aux paiements, et la liste continue.  Dans ce didacticiel, vous apprendrez à créer un code QR à l'aide de la bibliothèque JavaScript, React. L'avantage d'utiliser React est qu'il facilite la création d'applications frontales car il offre aux développeurs des moyens de réutiliser les composants.  Pour suivre ce didacticiel, les éléments suivants seront couverts :  Conditions préalables  Commencer  Création d'un générateur de code QR  Styliser l'application de code QR  Téléchargement du code QR généré  Conclusion  Ressources  Démo    Conditions préalables  Pour terminer ce didacticiel, vous avez besoin des éléments suivants :  Compréhension de base de React.js    installé sur votre machine locale Node >= 14.0.0 et npm >= 5.6   Commencer  Avant d'écrire une ligne de code, ouvrez votre terminal et exécutez la commande suivante :    npx create-react-app qrcode-generator  La commande ci-dessus échafaude les fichiers et installe quelques packages nécessaires pour créer l'application React.  Ensuite, accédez au répertoire du projet et exécutez le serveur de développement accessible sur  en utilisant la commande ci-dessous pour prévisualiser l'application dans le navigateur :    http://localhost:3000    npm start cd qrcode-generator  Enfin, installons la bibliothèque de dépendances nécessaire à la création du générateur de code QR. Exécutez la commande :    npm install qrcode.react  : Un composant React pour générer des codes QR pour le rendu dans le DOM.   qrcode.react   Création d'un générateur de code QR  Excellent travail jusqu'à présent !  La création du générateur de code QR commencera par la création des fichiers et des composants qui contiendront la structure du code QR. Dans le répertoire src, créez un dossier appelé composants et un fichier nommé QrCode.js dans le dossier.  Copiez et collez le code suivant :                              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;  Les extraits de code ci-dessus effectuent les opérations suivantes :  Importer  est utilisé pour déclarer l'état initial de la variable, url qui est définie sur une chaîne vide, et le  fonction,  utilisé pour mettre à jour l'état   useState   setState   setUrl  La bibliothèque,  , est utilisé pour rendre le code QR généré   qrcode.react  Ensuite, l'utilisation de la  fonction attachée à la  méthode de la  élément car il est déclenché par l'événement submit   downloadQRCode   onSubmit   <form>  Sur le  élément, le  gestionnaire d'événements avec la fonction  prend l'entrée des utilisateurs, obtient sa valeur et modifie le code QR à chaque nouvelle entrée saisie   <input>   onChange   'qrCodeEncoder'  Une variable  est créé. Il prend dans le  composant et transmet certaines invites disponibles qui personnalisent et rendent le code QR visible sur le navigateur. Consultez la documentation pour en savoir plus sur l'   dans le composant   qrcode   QRCodeCanvas utilisation des accessoires  Finalement, le  l'élément est désactivé jusqu'à ce que l'entrée utilisateur reçoive des données   <button>   Styliser l'application QR Code  Dans le  dossier, créer la feuille de style,  responsable de l'attrait visuel de l'application   src   styles.css  Copiez et collez le code suivant :    *, *: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 ;  Ensuite, importez le fichier QrCode.js et la feuille de style dans le point d'entrée de l'application, App.js :                                   ); } // src/App.js 
 import  QrCode from   "./components/QrCode" ; import   "./styles.css" ; export   default   function   App ( ) {    return  (      < div   className = "section container" > 
        < QrCode  /> 
      </ div > 
  Une fois les étapes terminées, l'application devrait ressembler à ceci :   Téléchargement du code QR généré  La possibilité pour les utilisateurs de télécharger le code QR généré le rend utile dans une grande variété de cas d'utilisation. De l'impression du code à son intégration sur un site Web, les cas d'utilisation sont illimités.  De retour dans le  fichier, mettons à jour la base de code à utiliser  pour accéder aux nœuds du modèle d'objet de document (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;  Maintenant, mettons à jour le  fonction dans le  fichier pour pouvoir cliquer sur le bouton de téléchargement du code QR et enregistrer la toile en tant que fichier image.    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;  Dans le  fonction, ce qui suit se produit :   downloadQRCode  Il référence la valeur actuelle de l'objet ref avec la propriété .current pour savoir quand le nœud change  La  Le composant produit l'élément canvas dans le DOM qui vous donne la possibilité de créer du contenu dynamiquement   qrcode.react  La toile est annexée au  méthode avec le paramètre de type spécifié défini sur le format de fichier,   toDataURL   image/png  Ensuite, l'ancre,  l'élément est créé et le  est défini sur l'image qui télécharge le code QR lorsque le bouton est cliqué   <a>   href  L'élément d'ancrage est ajouté au corps du document et une fois le code QR téléchargé, il est supprimé  Enfin, l'URL de l'état est mise à jour avec le  variable qui efface l'entrée pour le code QR généré lorsque le formulaire est soumis   setUrl  Le code complet du composant 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;  Le résultat final de l'application devrait ressembler à ceci :   Conclusion  Ce tutoriel décrit le processus de création d'un générateur de code QR et comment il peut être téléchargé pour une utilisation ultérieure.  Ressources   QR Code   L'élément d'ancrage   Tout savoir sur le code 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

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Make resilience your competitive advantage

Comment créer un générateur de code QR dans React

Comment créer un générateur de code QR dans React

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Télégramme : le pont de Crypto Island vers le continent

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Croissance des crypto-monnaies : créer des profils d'utilisateurs efficaces

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Télégramme : le pont de Crypto Island vers le continent

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Croissance des crypto-monnaies : créer des profils d'utilisateurs efficaces

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps