त्वरित प्रतिक्रिया (क्यूआर) कोड जनरेटर बनाने के पीछे का विचार छवियों से पाठ में डेटा का अनुवाद करना है। एक क्यूआर कोड केवल टेक्स्ट के रूप में छवि डेटा का प्रतिनिधित्व है, और इसमें रेस्तरां मेनू और कॉन्सर्ट टिकट से ऑनलाइन कैलेंडर आमंत्रण, भुगतान और सूची में बहुत से उपयोगी अनुप्रयोग हैं।  इस ट्यूटोरियल में, आप सीखेंगे कि जावास्क्रिप्ट लाइब्रेरी, रिएक्ट का उपयोग करके एक क्यूआर कोड कैसे बनाया जाता है। रिएक्ट का उपयोग करने का लाभ यह है कि यह फ्रंटएंड अनुप्रयोगों के निर्माण को आसान बनाता है क्योंकि यह डेवलपर्स को घटकों के पुन: उपयोग के तरीके प्रदान करता है।  इस ट्यूटोरियल का अनुसरण करने के लिए, निम्नलिखित को कवर किया जाएगा:  आवश्यक शर्तें  शुरू करना  एक क्यूआर कोड जनरेटर बनाना  क्यूआर कोड ऐप को स्टाइल करना  जनरेट किया गया क्यूआर कोड डाउनलोड करना  निष्कर्ष  साधन  डेमो    आवश्यक शर्तें  इस ट्यूटोरियल को पूरा करने के लिए, आपको निम्नलिखित की आवश्यकता है:  React.js की बुनियादी समझ    आपके स्थानीय मशीन पर स्थापित नोड>= 14.0.0 और npm>= 5.6   शुरू करना  कोड की एक पंक्ति लिखने से पहले, अपना टर्मिनल खोलें और निम्न कमांड चलाएँ:    npx create-react-app qrcode-generator  ऊपर दिया गया कमांड फाइलों को स्कैफोल्ड करता है और रिएक्ट ऐप बनाने के लिए आवश्यक कुछ पैकेज इंस्टॉल करता है।  इसके बाद, प्रोजेक्ट डायरेक्टरी में नेविगेट करें और डेवलपमेंट सर्वर चलाएं जो कि इस पर उपलब्ध है  ब्राउज़र में ऐप का पूर्वावलोकन करने के लिए नीचे दिए गए कमांड का उपयोग करना:    http://localhost:3000    npm start cd qrcode-generator  अंत में, क्यूआर कोड जनरेटर बनाने के लिए आवश्यक निर्भरता पुस्तकालय स्थापित करें। कमांड चलाएँ:    npm install qrcode.react  : DOM को रेंडर करने के लिए QR कोड जेनरेट करने के लिए रिएक्ट कंपोनेंट।   qrcode.react   क्यूआर कोड जेनरेटर बनाना  अब तक का बढ़िया काम!  क्यूआर कोड जनरेटर का निर्माण उन फाइलों और घटकों के निर्माण से शुरू होगा जिनमें क्यूआर कोड की संरचना होगी। src निर्देशिका के अंदर, घटक नामक एक फ़ोल्डर और फ़ोल्डर में QrCode.js नाम की एक फ़ाइल बनाएँ।  निम्नलिखित कोड को कॉपी और पेस्ट करें:                              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;  उपरोक्त कोड स्निपेट निम्न कार्य करते हैं:  आयात  चर की प्रारंभिक स्थिति घोषित करने के लिए प्रयोग किया जाता है, यूआरएल जो एक खाली स्ट्रिंग पर सेट है, और  समारोह,  राज्य को अद्यतन करने के लिए उपयोग किया जाता है   useState   setState   setUrl  पुस्तकालय,  , उत्पन्न क्यूआर कोड प्रस्तुत करने के लिए प्रयोग किया जाता है   qrcode.react  अगला, का उपयोग  समारोह से जुड़ा हुआ है  की विधि  तत्व के रूप में यह सबमिट ईवेंट द्वारा ट्रिगर किया गया है   downloadQRCode   onSubmit   <form>  पर  तत्व,  समारोह के साथ घटना हैंडलर  उपयोगकर्ता के इनपुट लेता है, उसका मूल्य प्राप्त करता है और प्रत्येक नए इनपुट टाइप के साथ क्यूआर कोड बदलता है   <input>   onChange   'qrCodeEncoder'  एक परिवर्तनीय  बनाया गया है। में लेता है  घटक और कुछ उपलब्ध संकेतों को पास करता है जो ब्राउज़र पर क्यूआर कोड को अनुकूलित और दृश्यमान बनाते हैं। घटक में   बारे में अधिक जानने के लिए दस्तावेज़ीकरण देखें   qrcode   QRCodeCanvas प्रॉप्स के उपयोग के  अंततः  जब तक उपयोगकर्ता इनपुट डेटा प्राप्त नहीं करता तब तक तत्व अक्षम है   <button>   क्यूआर कोड ऐप को स्टाइल करना  में  फ़ोल्डर, स्टाइलशीट बनाएं,  ऐप की दृश्य अपील के लिए जिम्मेदार   src   styles.css  निम्नलिखित कोड को कॉपी और पेस्ट करें:    *, *: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 ;  इसके बाद, ऐप के प्रवेश बिंदु, App.js में QrCode.js फ़ाइल और स्टाइलशीट आयात करें:                                   ); } // src/App.js 
 import  QrCode from   "./components/QrCode" ; import   "./styles.css" ; export   default   function   App ( ) {    return  (      < div   className = "section container" > 
        < QrCode  /> 
      </ div > 
  पूर्ण चरणों के साथ, ऐप इस तरह दिखना चाहिए:   जेनरेटेड क्यूआर कोड डाउनलोड करना  उपयोगकर्ताओं के लिए जेनरेट किए गए क्यूआर कोड को डाउनलोड करने का विकल्प इसे विभिन्न प्रकार के उपयोग के मामलों में उपयोगी बनाता है। कोड को प्रिंट करने से लेकर वेबसाइट पर एम्बेड करने तक, उपयोग के मामले असीमित हैं।  में वापस  फ़ाइल, आइए उपयोग करने के लिए कोडबेस को अपडेट करें  दस्तावेज़ ऑब्जेक्ट मॉडल (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;  अब, आइए अपडेट करते हैं  में समारोह  डाउनलोड क्यूआर कोड बटन पर क्लिक करने और कैनवास को छवि फ़ाइल के रूप में सहेजने में सक्षम होने के लिए फ़ाइल।    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;  में  समारोह, निम्नलिखित होता है:   downloadQRCode  यह रेफरी ऑब्जेक्ट के वर्तमान मूल्य को संदर्भित करता है। यह जानने के लिए कि नोड कब बदलता है  घटक डोम में कैनवास तत्व उत्पन्न करता है जो आपको गतिशील रूप से सामग्री बनाने की क्षमता देता है   qrcode.react  कैनवास को इसमें जोड़ा गया है  फ़ाइल प्रारूप में निर्दिष्ट निर्दिष्ट प्रकार पैरामीटर के साथ विधि,   toDataURL   image/png  अगला, लंगर,  तत्व बनाया गया है और  छवि पर सेट है जो बटन क्लिक करने पर क्यूआर कोड डाउनलोड करता है   <a>   href  एंकर तत्व को दस्तावेज़ के मुख्य भाग में जोड़ दिया जाता है और एक बार क्यूआर कोड डाउनलोड हो जाने के बाद, इसे हटा दिया जाता है  अंत में, स्टेट url को के साथ अपडेट किया जाता है  वेरिएबल जो फ़ॉर्म सबमिट करते ही जेनरेट किए गए क्यूआर कोड के लिए इनपुट को साफ़ करता है   setUrl  घटक 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;  ऐप का अंतिम परिणाम इस तरह दिखना चाहिए:   निष्कर्ष  इस ट्यूटोरियल ने एक क्यूआर कोड जनरेटर बनाने की प्रक्रिया का वर्णन किया और इसे बाद में उपयोग के लिए कैसे डाउनलोड किया जा सकता है।  साधन   क्यू आर संहिता   लंगर तत्व   क्यूआर कोड के बारे में सब कुछ

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

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

बहुत लंबा; पढ़ने के लिए

रिएक्ट में क्यूआर कोड जेनरेटर कैसे बनाएं

रिएक्ट में क्यूआर कोड जेनरेटर कैसे बनाएं

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

उपयोगकर्ता-केंद्रित क्रिप्टो उत्पाद बनाना: ग्राहक प्रतिक्रिया का महत्व

सफल क्लाउड माइग्रेशन के लिए संपूर्ण गाइड: रणनीतियाँ और सर्वोत्तम अभ्यास

HackerNoon एक बहुभाषी प्लेटफ़ॉर्म है: सभी शीर्ष कहानियाँ अब 13 भाषाओं में उपलब्ध हैं

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

उपयोगकर्ता-केंद्रित क्रिप्टो उत्पाद बनाना: ग्राहक प्रतिक्रिया का महत्व

सफल क्लाउड माइग्रेशन के लिए संपूर्ण गाइड: रणनीतियाँ और सर्वोत्तम अभ्यास

HackerNoon एक बहुभाषी प्लेटफ़ॉर्म है: सभी शीर्ष कहानियाँ अब 13 भाषाओं में उपलब्ध हैं

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps