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.
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.
Das Projekt ist wie folgt organisiert:
├── public ├── src │ ├── components │ │ ├── QrCode.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
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.
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.
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.
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.
Sehen Sie sich hier die Live-Demo des QR-Code-Generators an.
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.
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!
