クイック レスポンス (QR) コード ジェネレーターを作成する背後にある考え方は、データを画像からテキストに変換することです。 QR コードは単に画像データをテキストとして表現したものであり、レストランのメニューやコンサートのチケット、オンライン カレンダーの招待状、支払いなど、さまざまな用途に使用できます。 このチュートリアルでは、JavaScript ライブラリの React を使用して QR コードを作成する方法を学習します。 React を使用する利点は、開発者がコンポーネントを再利用する方法を提供するため、フロントエンド アプリケーションの構築が簡単になることです。 このチュートリアルでは、次の内容について説明します。 前提条件 入門 QR コード ジェネレーターの作成 QR コード アプリのスタイリング 生成された QR コードのダウンロード 結論 資力 デモ 前提条件 このチュートリアルを完了するには、次のものが必要です。  React.js の基本的な理解 がローカル マシンにインストールされている ノード >= 14.0.0 および npm >= 5.6 入門 コード行を記述する前に、ターミナルを開いて次のコマンドを実行します。    npx create-react-app qrcode-generator 上記のコマンドは、ファイルをスキャフォールディングし、React アプリの作成に必要ないくつかのパッケージをインストールします。 次に、プロジェクト ディレクトリに移動し、次の場所でアクセス可能な開発サーバーを実行します。 以下のコマンドを使用して、ブラウザーでアプリをプレビューします。    http://localhost:3000    npm start cd qrcode-generator 最後に、QR コード ジェネレーターを作成するために必要な依存ライブラリをインストールしましょう。次のコマンドを実行します。    npm install qrcode.react  : DOM にレンダリングするための QR コードを生成する React コンポーネント。   qrcode.react   QR コード ジェネレーターの作成 これまでのところ素晴らしい仕事です！  QR コード ジェネレーターの作成は、QR コードの構造を含むファイルとコンポーネントの作成から始まります。 src ディレクトリ内に components というフォルダーを作成し、そのフォルダー内に 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; 上記のコード スニペットは、次のことを行います。 輸入 変数の初期状態を宣言するために使用され、空の文字列に設定された url と 関数、 状態を更新するために使用されます useState setState   setUrl 図書館、  、生成された QR コードをレンダリングするために使用されます   qrcode.react 次に、 に付属する機能 の方法 送信イベントによってトリガーされる要素   downloadQRCode onSubmit <form> 上で 要素、 関数を使用したイベント ハンドラー ユーザーの入力を受け取り、その値を取得し、新しい入力が入力されるたびに QR コードを変更します <input>   onChange 'qrCodeEncoder' 変数 創造された。それは コンポーネントを呼び出し、QR コードをカスタマイズしてブラウザーで表示できるようにするいくつかの使用可能なプロンプトを渡します。コンポーネント について詳しくは、ドキュメントをご覧ください。 qrcode QRCodeCanvas での props の使用 最後に、 ユーザー入力がデータを受け取るまで、要素は無効になります   <button> QRコードアプリのスタイリング の中に フォルダー、スタイルシートの作成、 アプリの視覚的な魅力を担当 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 > 
 手順が完了すると、アプリは次のようになります。  生成された QR コードのダウンロード ユーザーが生成された QR コードをダウンロードするオプションは、さまざまなユース ケースで役立ちます。コードの印刷から Web サイトへの埋め込みまで、用途は無限です。 に戻る ファイル、使用するコードベースを更新しましょう ドキュメント オブジェクト モデル (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; では、更新してみましょう の機能  QR コードのダウンロード ボタンをクリックし、キャンバスを画像ファイルとして保存できるようにします。  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 ノードがいつ変更されるかを知るために、 .current プロパティで ref オブジェクトの現在の値を参照します。 の コンポーネントはDOMでcanvas要素を生成し、コンテンツを動的に作成する機能を提供します qrcode.react キャンバスは ファイル形式に設定された指定された型パラメーターを持つメソッド、 toDataURL   image/png 次にアンカー、 要素が作成され、 ボタンクリックでQRコードをダウンロードする画像に設定   <a>   href アンカー要素はドキュメントの本文に追加され、QR コードがダウンロードされると削除されます 最後に、州の URL が更新されます。 フォームの送信時に生成された QR コードの入力をクリアする変数   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; アプリの最終結果は次のようになります。  結論 このチュートリアルでは、QR コード ジェネレーターを作成するプロセスと、後で使用するためにダウンロードする方法について説明しました。 資力 QRコード アンカー要素 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

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

React で QR コード ジェネレーターをビルドする方法

React で QR コードジェネレーターをビルドする方法

About Author

コメント

ラベル

この記事は

Related Stories

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

目に見えない層: ユーザーインタビューがかけがえのない資産である理由