使用 React 建構二維碼產生器

介紹

在本教程中，我們將使用 React 建立 QR 程式碼產生器 Web 應用程式。對於那些希望了解整合 API、管理狀態和生成動態內容的人來說，該專案是理想的選擇。

項目概況

二維碼產生器允許使用者透過輸入內容、調整大小和選擇背景顏色來建立二維碼。它利用公共 API 產生 QR 碼並將其顯示在螢幕上。使用者可以出於各種目的產生、檢視和下載二維碼。

特徵

• 內容輸入：使用者可以輸入想要編碼成二維碼的內容。
• 動態大小：動態調整二維碼的大小。
• 背景顏色自訂：選擇二維碼的背景顏色。
• API 整合：從公用二維碼產生 API 取得二維碼。
• 下載選項：允許使用者下載產生的二維碼。

使用的技術

• React：用於建立使用者介面和管理元件狀態。
• CSS：用於設計應用程式的樣式。
• JavaScript：用於處理 API 請求和應用程式邏輯。

專案結構

專案組織如下：

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

關鍵零件

• QrCode.jsx：管理QR碼產生和顯示。
• App.jsx：渲染主佈局和 QrCode 元件。

程式碼說明

QR 圖碼組件

QrCode 元件處理 QR 碼產生邏輯並管理產生的 QR 碼的顯示。

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;

此元件管理 QR 碼內容、大小、背景顏色和產生的 QR 碼 URL 的狀態。它從 API 取得 QR 碼並顯示它們。

應用程式元件

App 元件渲染 QrCode 元件並為佈局提供頁首和頁尾。

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;

此元件設定整體佈局並包含 QR 程式碼產生器。

CSS 樣式

CSS 設計應用程式以確保介面乾淨且使用者友好。

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

樣式確保版面簡潔，具有使用者友善的視覺效果和響應式設計。

安裝與使用

要開始此項目，請複製儲存庫並安裝相依性：

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

這將啟動開發伺服器，並且應用程式將在 http://localhost:3000 上運行。

現場演示

在此處查看二維碼產生器的現場示範。

結論

QR Code Generator 專案是如何在 React 中整合 API 和管理動態內容的實際範例。它提供了一個簡單而有效的工具來產生二維碼，具有用戶友好的介面。

製作人員

• 靈感：這個專案的靈感來自於為各種應用程式輕鬆產生二維碼的需求。

作者

Abhishek Gurjar 是一位 Web 開發人員，熱衷於創建互動式且有用的 Web 應用程式。您可以在 GitHub 上關注他的工作。

以上是使用 React 建構二維碼產生器的詳細內容。更多資訊請關注PHP中文網其他相關文章！