Comment créer un générateur de code QR à l'aide de React

Cette application pratique vous permet de créer vos propres codes QR. Vous pouvez le créer avec très peu d’effort, en utilisant la puissante bibliothèque QRCode.

Un code QR (Quick Response) est un code-barres bidimensionnel qui peut stocker et transmettre des informations dans un format lisible par machine. Ces informations peuvent inclure des liens vers le site Web d'une entreprise, un menu de restaurant, des détails sur un produit ou une page d'instructions.

La technologie du code QR vise à aider les entreprises à donner à leurs utilisateurs un accès rapide aux informations, ce qui peut leur apporter un avantage concurrentiel.

Apprenez à créer un générateur de code QR dans React avec des exemples de code pratiques.

Pour créer le générateur de QR Code, vous aurez besoin de :

Vous pouvez trouver le projet terminé sur GitHub pour référence et exploration plus approfondie.

Les codes QR peuvent sembler à la fois simples et aléatoires, mais le format possède des fonctionnalités intelligentes pour contenir de nombreuses données et faciliter la lisibilité.

Vous connaissez probablement les images de codes QR. Celui ci-dessus vous amènera à la page d’accueil de MUO si vous le numérisez. Vous avez peut-être vu des codes QR similaires sur les emballages de produits, dans des restaurants ou sur des panneaux d'affichage.

La conception d'un code QR se concentre sur son esthétique, notamment la couleur et la taille, l'ajout d'un logo dans le code QR, l'incorporation d'illustrations personnalisées ou, de manière générale, l'application de divers effets visuels.

D'autre part, la structure d'un code QR se concentre sur la disposition physique des éléments au sein d'un code QR. Ces éléments suivent une disposition prédéfinie pour garantir un décodage correct. Ils sont les suivants :

Le premier fait référence à la conversion de données ou d'informations d'entrée (une URL) en une matrice de code QR. En revanche, cette dernière fait référence à l’extraction de données ou d’informations stockées à partir d’un code QR à l’aide d’un appareil photo de smartphone ou de scanners de code QR dédiés.

QRCode est une bibliothèque tierce utilisée pour générer des codes-barres 2D. QRCode est actuellement la bibliothèque de codes QR la plus populaire, avec plus d'un million d'installations hebdomadaires et une prise en charge des applications client et serveur.

Pour installer QRCode dans une application React existante, ouvrez votre terminal, accédez au répertoire de votre projet et exécutez le code suivant :

Ou si vous préférez npm, utilisez :

Le référentiel du projet contient deux branches :entréeetfinal . Vous pouvez utiliser le premier comme base pour construire le projet ou le second pour prévisualiser la démo terminée.

Nous avons fourni une application de démarrage sur GitHub avec une interface utilisateur conçue pour vous aider à vous concentrer sur la mise en œuvre. Ouvrez votre terminal et exécutez la commande suivante pour cloner la branche de démarrage du référentiel sur votre machine locale :

Exécutez la commande de terminal suivante, dans le répertoire du projet, pour installer ses dépendances :

Ou:

Pour démarrer l'application, exécutez :

Ou:

Génial! Vous devriez voir l'interface utilisateur affichée sur votre navigateur :

Ouvrez lesrc/App.jsxfichier et remplacez son contenu par le code suivant :

Cet extrait de code effectue les opérations suivantes :

Vous pouvez désormais restituer conditionnellement la vue générée dans undivélément lorsque leURL de donnéeschangements d'état :

Testez votre application dans un navigateur et confirmez qu'elle donne le résultat attendu :

Si la technologie des codes QR vise à aider les utilisateurs à accéder rapidement aux informations, elle comporte également certains problèmes potentiels de sécurité.

Maintenant que vous avez appris à générer des codes QR dans votre application React, vous devez apprendre à scanner ces codes QR en toute sécurité.

Francis est un développeur Web front-end avec une expérience avec React.js/Next.js, une bibliothèque/framework JavaScript populaire. Il partage avec passion ses connaissances techniques avec les autres à travers l'enseignement en classe et des articles techniques. Vous pouvez le trouver en train de jouer ou d'explorer de nouveaux endroits lorsqu'il ne code pas ou n'enseigne pas.