Membina Penjana Kod QR dengan React

pengenalan

Dalam tutorial ini, kami akan mencipta aplikasi web Penjana Kod QR menggunakan React. Projek ini sesuai untuk mereka yang ingin belajar tentang menyepadukan API, mengurus keadaan dan menjana kandungan dinamik.

Gambaran Keseluruhan Projek

Penjana Kod QR membolehkan pengguna mencipta kod QR dengan memasukkan kandungan, melaraskan saiz dan memilih warna latar belakang. Ia menggunakan API awam untuk menjana kod QR dan memaparkannya pada skrin. Pengguna boleh menjana, melihat dan memuat turun kod QR untuk pelbagai tujuan.

Ciri-ciri

• Input Kandungan: Pengguna boleh memasukkan kandungan yang ingin dikodkan ke dalam kod QR.
• Saiz Dinamik: Laraskan saiz kod QR secara dinamik.
• Penyesuaian Warna Latar Belakang: Pilih warna latar belakang untuk kod QR.
• Penyepaduan API: Mengambil kod QR daripada API penjanaan kod QR awam.
• Pilihan Muat Turun: Membenarkan pengguna memuat turun kod QR yang dijana.

Teknologi yang Digunakan

• React: Untuk membina antara muka pengguna dan mengurus keadaan komponen.
• CSS: Untuk menggayakan aplikasi.
• JavaScript: Untuk mengendalikan permintaan API dan logik apl.

Struktur Projek

Projek ini dianjurkan seperti berikut:

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

Komponen Utama

• QrCode.jsx: Mengurus penjanaan dan paparan kod QR.
• App.jsx: Memaparkan reka letak utama dan komponen QrCode.

Penerangan Kod

Komponen QrCode

Komponen QrCode mengendalikan logik penjanaan kod QR dan menguruskan paparan kod QR yang dijana.

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;

Komponen ini menguruskan keadaan untuk kandungan kod QR, saiz, warna latar belakang dan URL kod QR yang dijana. Ia mengambil kod QR daripada API dan memaparkannya.

Komponen Apl

Komponen Apl memaparkan komponen QrCode dan menyediakan pengepala dan pengaki untuk reka letak.

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;

Komponen ini menyediakan reka letak keseluruhan dan termasuk penjana kod QR.

Penggayaan CSS

CSS menggayakan aplikasi untuk memastikan antara muka yang bersih dan mesra pengguna.

* {
  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;
}

Penggayaan memastikan reka letak yang bersih dengan visual mesra pengguna dan reka bentuk responsif.

Pemasangan dan Penggunaan

Untuk memulakan projek ini, klon repositori dan pasang kebergantungan:

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

Ini akan memulakan pelayan pembangunan, dan aplikasi akan berjalan di http://localhost:3000.

Demo Langsung

Lihat demo langsung Penjana Kod QR di sini.

Kesimpulan

Projek Penjana Kod QR ialah contoh praktikal tentang cara menyepadukan API dan mengurus kandungan dinamik dalam React. Ia menyediakan alat yang mudah tetapi berkesan untuk menjana kod QR dengan antara muka yang mesra pengguna.

Kredit

• Inspirasi: Projek ini diilhamkan oleh keperluan untuk penjanaan kod QR yang mudah untuk pelbagai aplikasi.

Pengarang

Abhishek Gurjar ialah pembangun web yang berminat untuk mencipta aplikasi web yang interaktif dan berguna. Anda boleh mengikuti karya beliau di GitHub.

Atas ialah kandungan terperinci Membina Penjana Kod QR dengan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!