Ý tưởng đằng sau việc tạo trình tạo mã phản hồi nhanh (QR) là dịch dữ liệu từ hình ảnh sang văn bản. Mã QR chỉ đơn giản là biểu diễn dữ liệu hình ảnh dưới dạng văn bản và nó có rất nhiều ứng dụng hữu ích từ thực đơn nhà hàng và vé xem hòa nhạc, đến lời mời trên lịch trực tuyến, thanh toán và danh sách tiếp tục.  Trong hướng dẫn này, bạn sẽ học cách tạo mã QR bằng thư viện JavaScript, React. Lợi ích của việc sử dụng React là nó làm cho việc xây dựng các ứng dụng giao diện người dùng trở nên dễ dàng vì nó cung cấp cho các nhà phát triển cách sử dụng lại các thành phần.  Để làm theo hướng dẫn này, những điều sau đây sẽ được đề cập đến:  Điều kiện tiên quyết  Bắt đầu  Tạo trình tạo mã QR  Tạo kiểu cho ứng dụng mã QR  Tải xuống mã QR đã tạo  Sự kết luận  Tài nguyên  Thử nghiệm    Điều kiện tiên quyết  Để hoàn thành hướng dẫn này, bạn cần những điều sau:  Hiểu biết cơ bản về React.js    được cài đặt trên máy cục bộ của bạn Node> = 14.0.0 và npm> = 5.6   Bắt đầu  Trước khi viết một dòng mã, hãy mở thiết bị đầu cuối của bạn và chạy lệnh sau:    npx create-react-app qrcode-generator  Lệnh trên tạo các tệp và cài đặt một số gói cần thiết để tạo ứng dụng React.  Tiếp theo, điều hướng đến thư mục dự án và chạy máy chủ phát triển có thể truy cập trên  sử dụng lệnh bên dưới để xem trước ứng dụng trong trình duyệt:    http://localhost:3000    npm start cd qrcode-generator  Cuối cùng, hãy cài đặt thư viện phụ thuộc cần thiết để tạo trình tạo mã QR. Chạy lệnh:    npm install qrcode.react  : Một thành phần React để tạo mã QR để hiển thị với DOM.   qrcode.react   Tạo trình tạo mã QR  Công việc tuyệt vời cho đến nay!  Việc tạo trình tạo mã QR sẽ bắt đầu bằng việc tạo các tệp và thành phần chứa cấu trúc của mã QR. Bên trong thư mục src, tạo một thư mục có tên là các thành phần và một tệp có tên QrCode.js trong thư mục.  Sao chép và dán mã sau:                              e.preventDefault();      };         setUrl(e.target.value); };                                    );                                                                                                ); };   // src/components/QrCode.js 
 import  { useState } from   "react" ; import  { QRCodeCanvas } from   "qrcode.react" ; const  QrCode = () =>  {    const  [url, setUrl] = useState( "" );    const  downloadQRCode = ( e ) =>  {   setUrl( "" );    const  qrCodeEncoder = ( e ) =>  {    const  qrcode = (      < QRCodeCanvas 
        id = "qrCode" 
        value = {url} 
        size = {300} 
        bgColor = { "# 00ff00 "}        level = { " H "}   /> 
    return  (      < div   className = "qrcode__container" > 
        < div > {qrcode} </ div > 
        < div   className = "input__group" > 
          < form   onSubmit = {downloadQRCode} > 
            < label > Enter URL </ label > 
            < input 
              type = "text" 
              value = {url} 
              onChange = {qrCodeEncoder} 
              placeholder = "https://hackernoon.com" 
      /> 
            < button   type = "submit"   disabled = {!url} > 
       Download QR code            </ button > 
          </ form > 
        </ div > 
      </ div > 
 export   default  QrCode;  Các đoạn mã ở trên thực hiện những việc sau:  Nhập khẩu  được sử dụng để khai báo trạng thái ban đầu của biến, url được đặt thành một chuỗi rỗng và  hàm số,  được sử dụng để cập nhật trạng thái   useState   setState   setUrl  Thư viện,  , được sử dụng để hiển thị mã QR đã tạo   qrcode.react  Tiếp theo, việc sử dụng  chức năng gắn liền với  phương pháp của  vì điều này được kích hoạt bởi sự kiện gửi   downloadQRCode   onSubmit   <form>  Trên  phần tử,  trình xử lý sự kiện với hàm  nhận đầu vào của người dùng, nhận giá trị của nó và thay đổi mã QR với mỗi đầu vào mới được nhập   <input>   onChange   'qrCodeEncoder'  Một biến số  được tạo ra. Nó có trong  và chuyển một số lời nhắc có sẵn để tùy chỉnh và làm cho mã QR hiển thị trên trình duyệt. Xem tài liệu để tìm hiểu thêm về cách   trong thành phần   qrcode   QRCodeCanvas sử dụng đạo cụ  cuối cùng  phần tử bị vô hiệu hóa cho đến khi đầu vào của người dùng nhận được dữ liệu   <button>   Tạo kiểu cho ứng dụng mã QR  bên trong  thư mục, tạo biểu định kiểu,  chịu trách nhiệm về sự hấp dẫn trực quan của ứng dụng   src   styles.css  Sao chép và dán mã sau:    *, *:before, *:after {              }                }              }            }                    }                  }            }                                          }                                              }                    }        }      }        }                    } } /* src/styles.css */ 
  margin: 0 ;    padding : 0 ;    box-sizing : border-box; :root  {  -- font - color : 230   35%   7% ; body  {    color : hsl ( var (--font-color)); img  {    max-width : 100% ;    display : block; .section  {    padding : 2em   0 ;    display : flex;    min-height : 100vh ;    align-items : center; .container  {    margin -inline: auto;    max-width : 75rem ;    width : 85% ; .input__group  {    display : flex;    margin-top : 2em ; input  {    width : 100% ;    padding : 1em   0.75em ;    border : 1px  solid #444343 ;    border-radius : 3px ;    margin-bottom : 2em ;    margin-top : 0.75em ; button  {    border : unset;    background : hsl ( 231 , 77% , 90% );    padding : 1em   0.75em ;    color : hsl ( var (--font-color));    cursor : pointer;    text-transform : uppercase;    font-weight : bold; @media  screen and  ( min-width : 768px ) {    .section  {      padding : 0 ;    input  {      margin : 0 ;    .qrcode__container  {      display : flex;      align-items : center;    .input__group  {      margin-left : 3em ;    input  {      margin-bottom : 2em ;      margin-top : 0.75em ;      font-size : 1rem ;  Tiếp theo, nhập tệp QrCode.js và biểu định kiểu vào điểm nhập của ứng dụng, App.js:                                   ); } // src/App.js 
 import  QrCode from   "./components/QrCode" ; import   "./styles.css" ; export   default   function   App ( ) {    return  (      < div   className = "section container" > 
        < QrCode  /> 
      </ div > 
  Với các bước hoàn tất, ứng dụng sẽ trông như thế này:   Tải xuống mã QR đã tạo  Tùy chọn để người dùng tải xuống mã QR đã tạo giúp nó hữu ích trong nhiều trường hợp sử dụng. Từ việc in mã đến nhúng mã trên trang web, các trường hợp sử dụng là không giới hạn.  Quay lại  tệp, hãy cập nhật cơ sở mã để sử dụng  để truy cập các nút của mô hình đối tượng tài liệu (DOM).    components/QrCode.js   refs                  ...                                    );                              ); };   // src/components/QrCode.js 
 import  { useState, useRef } from   "react" ; // other import 
 const  QrCode = () =>  {    const  [url, setUrl] = useState( "" );    const  qrRef = useRef(); // include this: call the useRef function 
    const  qrcode = (      < QRCodeCanvas 
        id = "qrCode" 
        value = {url} 
        size = {300} 
        bgColor = { "# 00ff00 "}        level = { " H "}   /> 
    return  (      < div   className = "qrcode__container" > 
        < div   ref = {qrRef} > {qrcode} </ div >  {/* include this */}    {/* form input container */}      </ div > 
 export   default  QrCode;  Bây giờ, hãy cập nhật  chức năng trong  để có thể nhấp vào nút tải xuống mã QR và lưu canvas dưới dạng tệp hình ảnh.    downloadQRCode   QrCode.js             e.preventDefault();                   anchor.href = image;         anchor.click();        }; ...                              ); };   // src/components/QrCode.js 
 // imports 
 const  QrCode = () =>  {    // state 
    // useRef 
    const  downloadQRCode = ( e ) =>  {      let  canvas = qrRef.current.querySelector( "canvas" );      let  image = canvas.toDataURL( "image/png" );      let  anchor = document .createElement( "a" );   anchor.download = `qr-code.png` ;      document .body.appendChild(anchor);      document .body.removeChild(anchor);   setUrl( "" );    return  (      < div   className = "qrcode__container" > 
        < div   ref = {qrRef} > {qrcode} </ div > 
    {/* form input container */}      </ div > 
 export   default  QrCode;  bên trong  chức năng, sau đây diễn ra:   downloadQRCode  Nó tham chiếu giá trị hiện tại của đối tượng ref với thuộc tính .current để biết khi nào nút thay đổi  Các  thành phần tạo ra phần tử canvas trong DOM, cung cấp cho bạn khả năng tạo nội dung động   qrcode.react  Canvas được nối vào  phương thức với tham số kiểu đã chỉ định được đặt thành định dạng tệp,   toDataURL   image/png  Tiếp theo, mỏ neo,  phần tử được tạo và  được đặt thành hình ảnh tải xuống mã QR khi nút được nhấp vào   <a>   href  Phần tử liên kết được nối vào nội dung tài liệu và khi mã QR được tải xuống, nó sẽ bị xóa  Cuối cùng, url trạng thái được cập nhật với  biến xóa đầu vào cho mã QR được tạo khi biểu mẫu được gửi   setUrl  Mã hoàn chỉnh cho thành phần QrCode.js:                             e.preventDefault();                  anchor.href = image;        anchor.click();        };        setUrl(e.target.value); };                                    );                                                                                                    ); };   import  { useState, useRef } from   "react" ; import  { QRCodeCanvas } from   "qrcode.react" ; const  QrCode = () =>  {    const  [url, setUrl] = useState( "" );    const  qrRef = useRef();    const  downloadQRCode = ( e ) =>  {      let  canvas = qrRef.current.querySelector( "canvas" );      let  image = canvas.toDataURL( "image/png" );      let  anchor = document .createElement( "a" );  anchor.download = `qr-code.png` ;      document .body.appendChild(anchor);      document .body.removeChild(anchor);  setUrl( "" );    const  qrCodeEncoder = ( e ) =>  {    const  qrcode = (      < QRCodeCanvas 
        id = "qrCode" 
        value = {url} 
        size = {300} 
        bgColor = { "# 00ff00 "}        level = { " H "}  /> 
    return  (      < div   className = "qrcode__container" > 
        < div   ref = {qrRef} > {qrcode} </ div > 
        < div   className = "input__group" > 
          < form   onSubmit = {downloadQRCode} > 
            < label > Enter URL </ label > 
            < input 
              type = "text" 
              value = {url} 
              onChange = {qrCodeEncoder} 
              placeholder = "https://hackernoon.com" 
  /> 
            < button   type = "submit"   disabled = {!url} > 
  Download QR code            </ button > 
          </ form > 
        </ div > 
      </ div > 
 export   default  QrCode;  Kết quả cuối cùng của ứng dụng sẽ giống như sau:   Sự kết luận  Hướng dẫn này mô tả quy trình tạo trình tạo mã QR và cách tải xuống để sử dụng sau này.  Tài nguyên   Mã QR   Phần tử neo   Tất cả về mã QR

Target

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Cách xây dựng trình tạo mã QR trong React

Cách xây dựng trình tạo mã QR trong React

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

72 Stories To Learn About Adam Smith

61 Stories To Learn About Polotical Philosophy

287 Stories To Learn About Blockchain Development

223 Stories To Learn About Science

72 Stories To Learn About Adam Smith

61 Stories To Learn About Polotical Philosophy

287 Stories To Learn About Blockchain Development

223 Stories To Learn About Science

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps