React を使用して QR コード ジェネレーターを構築する

導入

このチュートリアルでは、React を使用して QR コード ジェネレーター Web アプリケーションを作成します。このプロジェクトは、API の統合、状態の管理、動的コンテンツの生成について学びたい人に最適です。

プロジェクト概要

QR コード ジェネレーターを使用すると、ユーザーはコンテンツを入力し、サイズを調整し、背景色を選択して QR コードを作成できます。パブリック API を利用して QR コードを生成し、画面に表示します。ユーザーは、さまざまな目的で QR コードを生成、表示、ダウンロードできます。

特徴

• コンテンツ入力: ユーザーは、QR コードにエンコードしたいコンテンツを入力できます。
• 動的サイズ: QR コードのサイズを動的に調整します。
• 背景色のカスタマイズ: QR コードの背景色を選択します。
• API 統合: パブリック QR コード生成 API から QR コードを取得します。
• ダウンロード オプション: ユーザーは生成された QR コードをダウンロードできます。

使用されている技術

• 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 コード ジェネレーターのライブ デモをチェックしてください。

結論

QR Code Generator プロジェクトは、React で API を統合し、動的コンテンツを管理する方法の実践的な例です。ユーザーフレンドリーなインターフェイスを備えた、QR コードを生成するためのシンプルかつ効果的なツールを提供します。

クレジット

• インスピレーション: このプロジェクトは、さまざまなアプリケーションで QR コードを簡単に生成する必要性からインスピレーションを受けました。

著者

Abhishek Gurjar は、インタラクティブで便利な Web アプリケーションの作成に情熱を注ぐ Web 開発者です。彼の作品は GitHub でフォローできます。

以上がReact を使用して QR コード ジェネレーターを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。