Cách xây dựng trình tạo QR Code bằng React

App tiện ích này cho phép bạn tự tạo code QR riêng. Bạn có thể xây dựng nó dễ dàng, bằng thư viện QRCode mạnh mẽ.

Code QR (Quick Response) là mã vạch hai chiều, có thể lưu trữ và truyền tải thông tin ở định dạng có thể đọc bằng máy. Những thông tin có thể bao gồm liên kết tới web công ty, menu nhà hàng, chi tiết sản phẩm hoặc trang hướng dẫn.

Công nghệ QR code nhắm tới việc giúp doanh nghiệp cung cấp cho người dùng quyền truy cập nhanh thông tin liên quan tới sản phẩm. Điều này có thể tăng lợi thế cạnh tranh.

Dưới đây là cách làm trình tạo QR code trong React kèm ví dụ thực tế.

Trước khi bắt đầu

Bạn cần:

• Kiến thức cơ bản về các thành phần input HTML, JavaScript và hook useState React.
• Hiểu rõ cách triển khai kết xuất theo điều kiện trong React.
• Đã cài đặt Node trên máy cục bộ và biết cách dùng trình quản lý gói (npm hoặc yarn).

Thư viện QR Code là gì?

QRCode là thư viện bên thứ ba được dùng để tạo mã vạch 2D. Hiện QRCode là thư việc mã QR phổ biến nhất, với hơn 1 triệu bản cài hàng tuần và hỗ trợ cho ứng dụng bên client & server.

Để cài QRCode trong ứng dụng React hiện tại, mở terminal, điều hướng tới thư mục dự án và chạy code sau:

yarn add qrcode

Hoặc nếu thích npm, dùng:

yarn add qrcode

Thiết lập dự án

Repository của dự án chứa 2 nhánh: starter và final. Bạn có thể dùng starter làm cơ sở để xây dựng dự án hoặc finale để xem trước bản dùng thử đã hoàn thiện.

Nhân bản app Starter

Mở terminal và chạy lệnh sau để nhân bản nhánh starter của repository vào máy cục bộ:

git clone -b starter https://github.com/quantrimangcode/qr-code-generator.git

Chạy lệnh terminal sau, trong thư mục dự án để cài các phần phụ thuộc:

Yarn

Hoặc:

npm install

Để khởi động ứng dụng, chạy:

yarn start

Hoặc:

npm start

Tuyệt vời, bạn sẽ thấy UI hiện trên trình duyệt:

Triển khai logic trong các bước

Mở file src/App.jsx và thay nội dung của nó bằng code sau:

import { useState } from "react";
import "./styles.scss";
import QRCode from "qrcode";

const App = () => {
  const [url, setUrl] = useState("");
  const [dataUrl, setDataUrl] = useState("");

  const handleQRCodeGeneration = () => {
    QRCode.toDataURL(url, { width: 300 }, (err, dataUrl) => {
      if (err) console.error(err);

      // set dataUrl state to dataUrl
      setDataUrl(dataUrl);
    });
  };

  return (
    <div className="app">
      <h1>QR Code Generator</h1>

      <form onSubmit={handleQRCodeGeneration}>
        <input
          required
          type="url"
          placeholder="Enter a valid URL"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
        />

        <input type="submit" value="Generate" />
      </form>

      {
        /* code to conditionally display the QR code and a download button
        would go here */
      }
    </div>
  );
};

export default App;

Đoạn code sẽ chạy như sau:

1. Nhập QRCode ở cấp trên cùng.
2. Tạo trạng thái url để lưu trữ URL được nhập và trạng thái dataUrl để chứa mã QR đã tạo trong biểu mẫu DataURL.
3. Tạo hàm mũi tên handleQRCodeGeneration, trong khi nó gọi phương thức toDataURL của đối tượng QRCode cùng các đối số sau:
   1. Đầu tiên là URL để mã hóa
   2. Thứ hai là đối tượng tùy chọn xác định chiều rộng của code QR
   3. Thứ ba là hàm callback trả về phiên bản dataURL của URL được nhập.
4. Gọi hàm mũi tên handleQRCodeGeneration trong thành phần form khi gửi biểu mẫu.
5. Update trạng thái url cho giá trị người dùng nhập vào.

Giờ đây, bạn có thể hiển thị chế độ xem được tạo theo điều kiện trong phần tử div khi trạng thái dataUrl thay đổi:

{dataUrl && (
  <div className="generated-view">
    <img src={dataUrl} alt="qr code" />
    <a href={dataUrl} 

Chạy thử ứng dụng trong trình duyệt và xác nhận kết quả:

Chúc các bạn thành công!