So erstellen Sie einen QR-Code-Generator mit React

Mit dieser praktischen App können Sie Ihre eigenen QR-Codes erstellen. Mit der leistungsstarken QRCode-Bibliothek können Sie es mit sehr geringem Aufwand erstellen.

Ein QR-Code (Quick Response) ist ein zweidimensionaler Barcode, der Informationen in einem maschinenlesbaren Format speichern und übermitteln kann. Zu diesen Informationen können Links zur Website eines Unternehmens, einer Restaurantkarte, Produktdetails oder einer Anleitungsseite gehören.

Ziel der QR-Code-Technologie ist es, Unternehmen dabei zu helfen, ihren Nutzern einen schnellen Zugriff auf Informationen zu ermöglichen, was ihnen einen Wettbewerbsvorteil verschaffen kann.

Erfahren Sie anhand praktischer Codebeispiele, wie Sie in React einen QR-Code-Generator erstellen.

Um den QR-Code-Generator zu erstellen, benötigen Sie:

Sie finden das fertige Projekt auf GitHub als Referenz und zur weiteren Erkundung.

QR-Codes können sowohl einfach als auch zufällig aussehen, aber das Format verfügt über einige clevere Funktionen, um viele Daten zu packen und die Lesbarkeit zu verbessern.

Sie kennen wahrscheinlich QR-Code-Bilder. Die obige Seite führt Sie zur MUO-Homepage, wenn Sie sie scannen. Möglicherweise haben Sie ähnliche QR-Codes auf Produktverpackungen, in Restaurants oder auf Werbetafeln gesehen.

Bei der Gestaltung eines QR-Codes liegt der Schwerpunkt auf seiner Ästhetik, einschließlich Farbe und Größe, dem Hinzufügen eines Logos innerhalb des QR-Codes, der Einbindung benutzerdefinierter Grafiken oder allgemein der Anwendung verschiedener visueller Effekte.

Andererseits konzentriert sich die Struktur eines QR-Codes auf die physische Anordnung der Elemente innerhalb eines QR-Codes. Diese Elemente folgen einem vordefinierten Layout, um eine ordnungsgemäße Decodierung sicherzustellen. Sie sind wie folgt:

Ersteres bezieht sich auf die Umwandlung von Eingabedaten oder Informationen (einer URL) in eine QR-Code-Matrix. Letzteres bezieht sich dagegen auf das Extrahieren gespeicherter Daten oder Informationen aus einem QR-Code mithilfe einer Smartphone-Kamera oder spezieller QR-Code-Scanner.

QRCode ist eine Drittanbieterbibliothek zur Generierung von 2D-Barcodes. QRCode ist derzeit die beliebteste QR-Code-Bibliothek mit über einer Million wöchentlichen Installationen und Unterstützung für Client- und Serveranwendungen.

Um QRCode in einer vorhandenen React-Anwendung zu installieren, öffnen Sie Ihr Terminal, navigieren Sie zu Ihrem Projektverzeichnis und führen Sie den folgenden Code aus:

Oder wenn Sie npm bevorzugen, verwenden Sie:

Das Repository des Projekts enthält zwei Zweige:AnlasserUndFinale . Sie können Ersteres als Grundlage für die Erstellung des Projekts oder Letzteres als Vorschau der fertigen Demo verwenden.

Wir haben auf GitHub eine Starter-App mit einer Benutzeroberfläche bereitgestellt, die Ihnen dabei hilft, sich auf die Implementierung zu konzentrieren. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um den Starter-Zweig des Repositorys auf Ihrem lokalen Computer zu klonen:

Führen Sie den folgenden Terminalbefehl im Projektverzeichnis aus, um seine Abhängigkeiten zu installieren:

Oder:

Um die Anwendung zu starten, führen Sie Folgendes aus:

Oder:

Eindrucksvoll! Die Benutzeroberfläche sollte in Ihrem Browser angezeigt werden:

Öffne dassrc/App.jsxDatei und ersetzen Sie ihren Inhalt durch den folgenden Code:

Dieses Code-Snippet führt Folgendes aus:

Jetzt können Sie die generierte Ansicht in einem bedingt renderndivElement, wenn diedataUrlZustandsänderungen:

Testen Sie Ihre Anwendung in einem Browser und stellen Sie sicher, dass sie das erwartete Ergebnis liefert:

Während die QR-Code-Technologie darauf abzielt, Menschen einen schnellen Zugriff auf Informationen zu ermöglichen, birgt sie auch einige potenzielle Sicherheitsbedenken.

Nachdem Sie nun gelernt haben, wie Sie QR-Codes in Ihrer React-Anwendung generieren, sollten Sie sich mit dem sicheren Scannen dieser QR-Codes vertraut machen.

Francis ist ein Front-End-Webentwickler mit Erfahrung mit React.js/Next.js, einer beliebten JavaScript-Bibliothek/Framework. Er gibt sein technisches Wissen leidenschaftlich durch Unterricht und technische Artikel an andere weiter. Man findet ihn beim Spielen oder beim Erkunden neuer Orte, wenn er nicht gerade programmiert oder unterrichtet.