Einen kostenlosen Kontakt-QR-Code-Generator mit React erstellen und auf GitHub Pages bereitstellen

Im digitalen Zeitalter sollte das Teilen von Kontaktdaten schnell und mühelos sein. Mein Bruder stand vor der Herausforderung, seine Kontaktdaten effizient mit Kunden auszutauschen. Traditionelle Visitenkarten, obwohl effektiv, hatten ihre Einschränkungen, und alternative Lösungen wie Online-QR-Code-Generatoren erforderten oft Bezahlung oder Registrierung, was unbequem war. Das führte mich dazu, einen kostenlosen, einfach zu nutzenden Kontakt-QR-Code-Generator zu entwickeln. In diesem Blog zeige ich, wie Sie Ihren eigenen mit React erstellen und kostenlos auf GitHub Pages bereitstellen können.

Das Projekt einrichten

Voraussetzungen

• Grundkenntnisse in React und JavaScript
• Node.js und npm auf Ihrem Computer installiert
• Ein GitHub-Konto

Schritt 1: Die React-Anwendung erstellen

Beginnen Sie mit dem Erstellen einer neuen React-Anwendung mit Create React App:

npx create-react-app contact-qr-code-generator
cd contact-qr-code-generator

Schritt 2: TailwindCSS hinzufügen

Um unsere UI mühelos gut aussehen zu lassen, verwenden wir TailwindCSS:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

In Ihrer tailwind.config.js konfigurieren Sie die Purge-Option:

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  // ... andere Konfigurationen
};

Fügen Sie Tailwind in Ihr CSS ein (in src/index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

Die Anwendung bauen

Die ContactForm-Komponente

Diese Komponente (ContactForm.js) ist für das Rendern des Formulars verantwortlich, in das Benutzer ihre Kontaktdaten eingeben können.

import React, { useState } from "react";

function ContactForm({ onSubmit }) {
  // ... useState und handleChange Definitionen
  // ... Formular JSX mit TailwindCSS-Klassen
}

export default ContactForm;

Die QRCodeGenerator-Komponente

In QRCodeGenerator.js handhaben wir die QR-Code-Generierung und -Anzeige mit der qrcode.react-Bibliothek.

import React, { useState } from "react";
import QRCode from "qrcode.react";
import ContactForm from "./ContactForm";

function QRCodeGenerator() {
  // ... useState, handleSubmit und createVCard Definitionen
  // ... Komponenten-JSX
}

export default QRCodeGenerator;

Die Komponenten in App.js integrieren

Schließlich integrieren wir in App.js die QRCodeGenerator-Komponente.

import React from "react";
import QRCodeGenerator from "./QRCodeGenerator";

function App() {
  // ... JSX für App
}

Auf GitHub Pages bereitstellen

GitHub Pages ist ein kostenloser Hosting-Service für statische Websites. Er ist perfekt für unseren React-QR-Code-Generator.

Schritt 1: gh-pages Paket installieren

npm install gh-pages --save-dev

Schritt 2: package.json aktualisieren

Fügen Sie Ihrer package.json die folgenden Zeilen hinzu:

"homepage": "https://yourusername.github.io/contact-qr-code-generator",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
  // ... andere Skripte
}

Schritt 3: Bereitstellen

npm run deploy

Fazit

Dort haben wir es—einen kostenlosen, benutzerfreundlichen QR-Code-Generator für Kontaktdaten, den jeder erstellen kann. Dieser einfache Leitfaden zeigt, wie praktische Werkzeuge mit minimalem Aufwand entwickelt und bereitgestellt werden können. Für alle, die professionelle QR-Codes oder erweiterte Funktionen suchen, gibt es viele hervorragende kostenpflichtige Dienste. Aber für grundlegende Bedürfnisse ist die DIY-Lösung effektiv und zufriedenstellend.