Erstellen eines QR-Code-Generators mit React

Einführung

In diesem Tutorial erstellen wir mit React eine QR-Code-Generator-Webanwendung. Dieses Projekt ist ideal für diejenigen, die mehr über die Integration von APIs, die Statusverwaltung und die Generierung dynamischer Inhalte erfahren möchten.

Projektübersicht

Mit dem QR-Code-Generator können Benutzer QR-Codes erstellen, indem sie Inhalte eingeben, die Größe anpassen und eine Hintergrundfarbe auswählen. Es nutzt eine öffentliche API, um die QR-Codes zu generieren und auf dem Bildschirm anzuzeigen. Benutzer können QR-Codes für verschiedene Zwecke generieren, anzeigen und herunterladen.

Merkmale

• Inhaltseingabe: Benutzer können den Inhalt eingeben, den sie in einen QR-Code kodieren möchten.
• Dynamische Größe: Passen Sie die Größe des QR-Codes dynamisch an.
• Anpassung der Hintergrundfarbe: Wählen Sie eine Hintergrundfarbe für den QR-Code.
• API-Integration: Ruft QR-Codes von einer öffentlichen API zur QR-Code-Generierung ab.
• Download-Option: Ermöglicht Benutzern das Herunterladen des generierten QR-Codes.

Verwendete Technologien

• Reagieren: Zum Erstellen der Benutzeroberfläche und Verwalten von Komponentenzuständen.
• CSS: Zum Gestalten der Anwendung.
• JavaScript: Zur Bearbeitung von API-Anfragen und App-Logik.

Projektstruktur

Das Projekt ist wie folgt organisiert:

├── public
├── src
│   ├── components
│   │   ├── QrCode.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Schlüsselkomponenten

• QrCode.jsx: Verwaltet die QR-Code-Generierung und -Anzeige.
• App.jsx: Rendert das Hauptlayout und die QrCode-Komponente.

Code-Erklärung

QrCode-Komponente

Die QrCode-Komponente verwaltet die Logik zur QR-Code-Generierung und verwaltet die Anzeige des generierten QR-Codes.

import { useState } from "react";
import axios from "axios";

const QrCode = () => {
  const [content, setContent] = useState("");
  const [size, setSize] = useState(300);
  const [bgColor, setBgColor] = useState("ffffff");
  const [qrCode, setQrCode] = useState(
    "https://api.qrserver.com/v1/create-qr-code/?data=QR%20Code%20Generator&size=300x300&bgcolor=ffffff"
  );

  const GenerateQR = () => {
    axios
      .get(
        `https://api.qrserver.com/v1/create-qr-code/?data=${content}&size=${size}x${size}&bgcolor=${bgColor}`
      )
      .then((res) => {
        setQrCode(res.config.url);
      });
  };

  return (
    <div className="qr-code">
      <div className="input-box">
        <div className="input-container">
          <input
            type="text"
            value={content}
            onChange={(e) => setContent(e.target.value)}
            placeholder="Enter content"
          />
        </div>

        <div className="input-color">
          <h4>Background Color:</h4>
          <input
            type="color"
            value={`#${bgColor}`}
            onChange={(e) => setBgColor(e.target.value.substring(1))}
          />
        </div>
        <div className="input-dimension">
          <h4>Dimension:</h4>
          <input
            type="range"
            min="200"
            max="600"
            value={size}
            onChange={(e) => setSize(e.target.value)}
          />
        </div>
        <button className="generate-btn" onClick={GenerateQR}>
          Generate QR
        </button>
      </div>
      <div className="output-box">
        <div className="qr-image">
          {qrCode && <img src={qrCode} alt="Generated QR Code" />}
        </div>
        {qrCode && (
          <div className="download-btn">
            <a href={qrCode} download="QRCode.png">
              <button type="button">Download</button>
            </a>
          </div>
        )}
      </div>
    </div>
  );
};

export default QrCode;

Diese Komponente verwaltet den Status für QR-Code-Inhalt, Größe, Hintergrundfarbe und die generierte QR-Code-URL. Es ruft QR-Codes von der API ab und zeigt sie an.

App-Komponente

Die App-Komponente rendert die QrCode-Komponente und stellt eine Kopf- und Fußzeile für das Layout bereit.

import QrCode from './components/QrCode'
import "./App.css"

const App = () => {
  return (
    <div className='app'>
      <div className="header">
        <h1>QR Code Generator</h1>
      </div>
      <QrCode />
      <div className="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  );
}

export default App;

Diese Komponente richtet das Gesamtlayout ein und beinhaltet den QR-Code-Generator.

CSS-Styling

Das CSS gestaltet die Anwendung, um eine saubere und benutzerfreundliche Oberfläche zu gewährleisten.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background-color: #134b70;
  color: white;
}

.header {
  width: 100%;
  text-align: center;
}

.header h1 {
  font-size: 30px;
}

.qr-code {
  background-color: #000000;
  display: flex;
  align-items: flex-start;
  padding: 60px;
  gap: 100px;
  border-radius: 10px;
  font-family: Arial, sans-serif;
  box-shadow: rgba(231, 231, 231, 0.35) 0px 5px 15px;
}

.input-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.input-container,
.input-color,
.input-dimension {
  margin: 10px 0;
  gap: 40px;
}

input[type="text"] {
  padding: 10px;
  font-size: 16px;
  width: 450px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input[type="color"] {
  padding: 5px;
  width: 450px;
}

input[type="range"] {
  width: 450px;
}

.generate-btn {
  padding: 15px 40px;
  width: 450px;
  font-size: 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 50px;
}

.generate-btn:hover {
  background-color: #45a049;
}

.output-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-image img {
  border: 1px solid #000000;
}

.download-btn {
  margin-top: 20px;
}

.download-btn button {
  width: 300px;
  padding: 12px 40px;
  font-size: 16px;
  background-color: #1171b1;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.download-btn button:hover {
  background-color: #134b70;
}

.footer {
  width: 100%;
  padding: 20px;
  text-align: center;
}

Das Design sorgt für ein klares Layout mit benutzerfreundlicher Optik und ansprechendem Design.

Installation und Nutzung

Um mit diesem Projekt zu beginnen, klonen Sie das Repository und installieren Sie die Abhängigkeiten:

git clone https://github.com/abhishekgurjar-in/qr_code_generator.git
cd qr-code-generator
npm install
npm start

Dadurch wird der Entwicklungsserver gestartet und die Anwendung wird unter http://localhost:3000 ausgeführt.

Live-Demo

Sehen Sie sich hier die Live-Demo des QR-Code-Generators an.

Abschluss

Das QR Code Generator-Projekt ist ein praktisches Beispiel für die Integration von APIs und die Verwaltung dynamischer Inhalte in React. Es bietet ein einfaches, aber effektives Tool zum Generieren von QR-Codes mit einer benutzerfreundlichen Oberfläche.

Credits

• Inspiration: Das Projekt ist von der Notwendigkeit einer einfachen QR-Code-Generierung für verschiedene Anwendungen inspiriert.

Autor

Abhishek Gurjar ist ein Webentwickler, der sich leidenschaftlich für die Erstellung interaktiver und nützlicher Webanwendungen interessiert. Sie können seine Arbeit auf GitHub verfolgen.

Das obige ist der detaillierte Inhalt vonErstellen eines QR-Code-Generators mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!