宇野 和也

宇野 和也

1639371600

DrizzleとReactを使用してDAppフロントエンドを作成する

フレームワークは、フロントエンドアプリケーションの構築を開始するために必要な初期コード/セットアップとツールを提供することにより、Webプロジェクトのブートストラップと構成をより簡単かつ迅速に行えるようにしました。ブロックチェーンとDApp開発の世界も例外ではありません。

このチュートリアルでは、Drizzleフレームワークを使用してEthereumでフロントエンドアプリケーションを構築する方法を示します。DrizzleをReactと一緒に使用してDAppを構築する実際の例を検討します。

このチュートリアルで取り上げる概念を快適に理解するには、次の基本的な知識が必要です。

霧雨とは何ですか？

霧雨に基づく枠組みとしてトリュフスイート。これは、Web3、アカウントとコントラクトのインスタンス化、および追加のコントラクト機能のインターフェイスを提供し、必要な同期の配線を支援するJavaScriptライブラリです。

Drizzleがメインライブラリです。Drizzleのコアロジックが含まれており、アプリケーションと手動で統合されます。

Drizzleはnpmパッケージとしてインストールできます。つまり、ターミナルからNode.jsコマンドを使用してDrizzleをインストールするには、ローカルマシンにNode.jsをインストールする必要があります。

または、トリュフボックスを使用してインストールを処理することもできます。

霧雨モジュール

コアライブラリであるDrizzleは、Web3およびスマートコントラクトのフロントエンドアプリケーション用のリアクティブストアを提供します。リアクティブストアはReduxストアに似た形で作成されています。つまり、スマートコントラクトまたはUIの状態の更新を検出すると、自動的に更新されます。DrizzleをJavaScriptベースのプロジェクトに組み込むことができます

Drizzleと一緒にインストールできる2つの主要なモジュールがあります。これらのモジュールは、DAppの構築を容易にするインターフェースを提供します。

  • Drizzle-reactは、Drizzleを使用してReactアプリケーションを簡単にブートストラップするのに役立ちます。DrizzleをReactアプリに簡単に接続できるようにするDrizzleProviderコンポーネントとdrizzleConnectヘルパーメソッドを提供します。これらはProvider、アプリケーション内の他のコンポーネントをラップし、Drizzleの状態をそれらに渡すのに役立つ高次のコンポーネントです。
  • Drizzle Reactコンポーネント は、一般的なDApp機能に特有の便利なReactコンポーネントを提供します。などDAPP機能ContractData、ContractFormおよびLoadingContainerヘルプが簡単にblockchainにスマート契約からのデータ、および書き込みデータを読み、私たちのアカウントを接続します

次のセクションでは、前述の2つのモジュールとReactアプリケーション内のDrizzleコアライブラリを活用してDAppを構築します。

DrizzleとReactの統合方法

Drizzleアプリケーション内で、Web3プロバイダーを使用してEthereumブロックチェーンに接続します。次に、構成ファイルを使用して、接続先のスマートコントラクトと対話するようにアプリケーションを構成します。

Drizzleは、スマートコントラクト内の関数または式から返されたデータを格納する内部状態を設定および管理します。Drizzleはこの状態を管理し、最新の状態に保ちます。次に、Reactとdrizzle-reactを使用して、状態の変化に応じてUIを更新/再レンダリングし、UIをスマートコントラクトの状態と同期させます。

Drizzleは、ReactのコンテキストAPIの概念を使用して、アプリケーション全体のコンポーネントツリーを介したデータの受け渡しを実装します。このようにして、アプリケーションのコンテキストがアプリケーションのすべての作業部分で利用できるようになります。

Boilerplate Codebase

Drizzleを使用すると、ローカル開発環境（ローカルマシン）で作成されたスマートコントラクトをセットアップしてフロントエンドに統合したり、パブリックアドレスとJSONインターフェイスを介してスマートコントラクトをフロントエンドにインポートしたりできます。実行compile、およびmigrateローカル開発中にトリュフベースのコマンドは、その後を提供してくれ、スマート契約を構築し、展開を消費するためにJSONインタフェースを含むフォルダ。build/contracts

このチュートリアルでは、DAppのフロントエンドの構築と、それをEtherscan.io上のスマートコントラクトまたは既存のスマートコントラクトと統合する方法に焦点を当てます。

DrizzleとReactを使用してフロントエンドDAppを構築する方法

次に、Truffleフレームワークを使用してプロジェクトを最初からブートストラップすることにより、ローカル開発環境をセットアップしましょう。ganache-cliツールと一緒にTruffleボックスをインストールして使用します。これにより、実際のEthereumノードを実行する手間をかけずにローカルブロックチェーンをセットアップできます。

ターミナルで次のコマンドを実行して、上記の必要なツールをインストールします。次に、という名前のフォルダーを作成し、そのフォルダーにディレクトリを変更して、フロントエンドDAppを初期化します。drizzle-dapp

npm install -g truffle
npm install -g ganache-cli
mkdir drizzle-react-tutorial
truffle unbox drizzle
ganache-cli -b 3

NPMインストール-グラムトリュフ NPMインストール-グラムガナッシュを- CLI MKDIR霧雨-反応-チュートリアル トリュフの箱を開ける霧雨 ガナッシュ- CLI - B 3

このコマンドtruffle unbox drizzleは、プロジェクトの構築に必要なすべての定型コードを含む完全なコードベースを作成します。これはフロントエンドが配置される場所であるため、ここではフォルダーに焦点を当てます。/app

ボイラープレートコードベース

上記のコマンドは、ローカルマシンにganache-cliをグローバルにインストールします。このコマンドは、現実的なブロックチェーンの模倣を設定して、フロントエンドとスマートコントラクトの間にDAppアカウントの統合を確立します。ganache-cli -b 3

Drizzleを初期化しDrizzleStore 、Reactで

次に、ファイル内のDAppのDrizzleをインポートして初期化します。/app/src/index.js

import { Drizzle, generateStore } from "drizzle";
import { DrizzleContext } from "drizzle-react";

import SimpleStorage from "./../build/contracts/SimpleStorage.json";

const options = { contracts: [SimpleStorage] };
const drizzleStore = generateStore(options);
const drizzle = new Drizzle(options, drizzleStore);

ReactDOM.render(
  <DrizzleContext.Provider drizzle={drizzle}>
      <App />
  </DrizzleContext.Provider>,
document.getElementById("root"));

上記のコードでは、我々は上に露出機能をインポートdrizzleし、そしてサンプル契約をインポートすることによって提供されるスターターコードから利用可能コマンド。drizzle-reacttruffle unbox drizzle

また、上記のコードを使用して、ストア、、、drizzleStoreおよびdrizzleオブジェクトを初期化しました。

次に、ファイルを編集して更新しましょう。/app/src/App.js

import { DrizzleContext } from "@drizzle/react-plugin";
import { Drizzle } from "@drizzle/store";
import drizzleOptions from "./drizzleOptions";
import MyComponent from "./MyComponent";
import "./App.css";

const drizzle = new Drizzle(drizzleOptions);
const App = () => {
  return (
    <DrizzleContext.Provider drizzle={drizzle}>
      <DrizzleContext.Consumer>
        {drizzleContext => {
          const { drizzle, drizzleState, initialized } = drizzleContext;
          if (!initialized) {
            return "Loading..."
          }
          return (
            <MyComponent drizzle={drizzle} drizzleState={drizzleState} />
          )
        }}
      </DrizzleContext.Consumer>
    </DrizzleContext.Provider>
  );
}
export default App;

上記のコードから、Drizzle Context Providerは、前のオブジェクトに加えて、initialised状態という追加のオブジェクトを提供します。これにより、drizzleが初期化され、web3プロバイダーに接続されたことがわかります。

状態initialisedが使用可能になるか、完全に接続されると、それをカスタムコンポーネントに渡しますMyComponent。

DrizzleContext 他のコンポーネントでの消費

次に、コンポーネントが配置されているファイルを開きます。ここで、提供されてオブジェクトを通過するすべての小道具を消費します。/app/src/MyComponent.jsMyComponentDrizzleContext

import { newContextComponents } from "@drizzle/react-components";
...
const { AccountData, ContractData, ContractForm } = newContextComponents;

export default ({ drizzle, drizzleState }) => {
  return (
    <div className="App">
      <div className="section">
        <h2>Active Account</h2>
        <AccountData
          drizzle={drizzle}
          drizzleState={drizzleState}
          accountIndex={0}
          units="ether"
          precision={3}
        />
      </div>
      <div className="section">
        <h2>SimpleStorage</h2>
        <p>
          This shows a simple ContractData component with no arguments, along with a form to set its value.
        </p>
        <p>
          <strong>Stored Value: </strong>
          <ContractData
            drizzle={drizzle}
            drizzleState={drizzleState}
            contract="SimpleStorage"
            method="storedData"
          />
        </p>
        <ContractForm drizzle={drizzle} contract="SimpleStorage" method="set" />
      </div>
    </div>  
  )
}

上記のコードでは、DAppのアカウントをDrizzleと統合して、アカウントデータを管理しています。これはContractDataオブジェクトにも当てはまります。名前が示すように、これはDrizzleとサンプルコントラクト間のデータの相互作用です。SimpleStorage.sol

CacheCall およびCacheSend機能

フロントエンドにDrizzleを設定したので、でインターフェースとして使用できるようになっcacheCallたcacheSend関数とを使用して、スマートコントラクトを呼び出しましょうdrizzle。関数はdrizzleStore、ストア内のスマートコントラクトからの応答をストアにアクセスすることもできます。

次に、契約データを送信し、応答をDAppの状態で保存する関数を定義しましょう。

...
export default ({ drizzle, drizzleState }) => {
  ...
  const fetchData = () => {
    const state = drizzle.store.getState();
    const key = drizzle.contracts.SimpleStorage.methods.storedData.cacheCall();

    return state.contracts.SimpleStorage.methods.storedData[key].value;
  }
  ....
}
...

上記のコードスニペットSimpleStorageは、cacheCallメソッドを使用してスマートコントラクトを呼び出すだけです。この呼び出しは、からこのデータにアクセスdrizzleStoreするkeyためにとに格納される応答データを返しますdrizzleStore。

次に、を使用keyしてdrizzleStore、上記の関数はvalue、UIに呼び出されたときにスマートコントラクトによって利用可能にされたものを返します。このようにして、スマートコントラクトを簡単に呼び出し、応答をUIと同期させることができます。

次に、トランザクションを送信して応答をストアに保存する別の関数を定義しましょう。

...
export default ({ drizzle, drizzleState }) => {
  ...
  cnnst state = drizzle.store.getState();
  const id = drizzle.contracts.SimpleStorage.methods.set.cacheSend(
    3,
    { from: Addresse }
  );

  if (state.transactionStack[id]) {
    const transactionHash = state.transactionStack[id];
    return state.transactions[transactionHash].status;
  }
  ...
}
...

上記のコードスニペットは、アプリケーションの状態を取得し、gasandfromオプションを指定してトランザクションを初期化します。from表してaddress取引を行います。cacheSendメソッドを呼び出すと、が返されます。idこれidは、DAppの状態でトランザクションの状態にアクセスするために使用されます。

これで、DAppのフロントエンドをスマートコントラクトに接続しました。ターミナルで、次のコードを実行してスマートコントラクトをコンパイルおよび移行します。

truffle compile # compiles all the smart contract within the /contracts folder
truffle migrate # deploys the smart contract on the ganache-cli blockchain

これで、スマートコントラクトとアプリケーションのフロントエンドの準備が整いました。入力フィールドに値を入力してトランザクションを実行できるはずです。そうすると、スマートコントラクトの状態とUIが自動的にすぐに更新されます。ContractFormコンポーネントは、スマート契約と対話するには、この入力してフォームを提供してくれます。

結論

このチュートリアルでは、TruffleスイートのフレームワークとしてDrizzleを紹介しました。これにより、DAppをスマートコントラクトの状態と簡単に同期できます。次に、DrizzleをDApp内にインストールして使用するための3つの方法を検討しました。また、アプリケーション内でDrizzzleコンテキストを設定する方法についても説明しました。

Drizzleは、DAppプロジェクトをブートストラップするために必要な定型文の量を減らすのに役立ちます。次のステップでは、DAppを拡張して、ゲームからショッピングリスト、ブログプラットフォームまで、すべてブロックチェーンプラットフォーム上であらゆるものを構築できます。

このチュートリアルで使用するコードを拡張するには、DAppに組み込みたい機能の呼び出しを行ったり、トランザクションを送信したりするためのコンポーネントをさらに構築します。次に、これらの機能を処理するためにスマートコントラクトを拡張します。

リンク: https://blog.logrocket.com/using-drizzle-react-write-dapp-frontends/

#react #dapp 

What is GEEK

Buddha Community

DrizzleとReactを使用してDAppフロントエンドを作成する
宇野 和也

宇野 和也

1639371600

DrizzleとReactを使用してDAppフロントエンドを作成する

フレームワークは、フロントエンドアプリケーションの構築を開始するために必要な初期コード/セットアップとツールを提供することにより、Webプロジェクトのブートストラップと構成をより簡単かつ迅速に行えるようにしました。ブロックチェーンとDApp開発の世界も例外ではありません。

このチュートリアルでは、Drizzleフレームワークを使用してEthereumでフロントエンドアプリケーションを構築する方法を示します。DrizzleをReactと一緒に使用してDAppを構築する実際の例を検討します。

このチュートリアルで取り上げる概念を快適に理解するには、次の基本的な知識が必要です。

霧雨とは何ですか？

霧雨に基づく枠組みとしてトリュフスイート。これは、Web3、アカウントとコントラクトのインスタンス化、および追加のコントラクト機能のインターフェイスを提供し、必要な同期の配線を支援するJavaScriptライブラリです。

Drizzleがメインライブラリです。Drizzleのコアロジックが含まれており、アプリケーションと手動で統合されます。

Drizzleはnpmパッケージとしてインストールできます。つまり、ターミナルからNode.jsコマンドを使用してDrizzleをインストールするには、ローカルマシンにNode.jsをインストールする必要があります。

または、トリュフボックスを使用してインストールを処理することもできます。

霧雨モジュール

コアライブラリであるDrizzleは、Web3およびスマートコントラクトのフロントエンドアプリケーション用のリアクティブストアを提供します。リアクティブストアはReduxストアに似た形で作成されています。つまり、スマートコントラクトまたはUIの状態の更新を検出すると、自動的に更新されます。DrizzleをJavaScriptベースのプロジェクトに組み込むことができます

Drizzleと一緒にインストールできる2つの主要なモジュールがあります。これらのモジュールは、DAppの構築を容易にするインターフェースを提供します。

  • Drizzle-reactは、Drizzleを使用してReactアプリケーションを簡単にブートストラップするのに役立ちます。DrizzleをReactアプリに簡単に接続できるようにするDrizzleProviderコンポーネントとdrizzleConnectヘルパーメソッドを提供します。これらはProvider、アプリケーション内の他のコンポーネントをラップし、Drizzleの状態をそれらに渡すのに役立つ高次のコンポーネントです。
  • Drizzle Reactコンポーネント は、一般的なDApp機能に特有の便利なReactコンポーネントを提供します。などDAPP機能ContractData、ContractFormおよびLoadingContainerヘルプが簡単にblockchainにスマート契約からのデータ、および書き込みデータを読み、私たちのアカウントを接続します

次のセクションでは、前述の2つのモジュールとReactアプリケーション内のDrizzleコアライブラリを活用してDAppを構築します。

DrizzleとReactの統合方法

Drizzleアプリケーション内で、Web3プロバイダーを使用してEthereumブロックチェーンに接続します。次に、構成ファイルを使用して、接続先のスマートコントラクトと対話するようにアプリケーションを構成します。

Drizzleは、スマートコントラクト内の関数または式から返されたデータを格納する内部状態を設定および管理します。Drizzleはこの状態を管理し、最新の状態に保ちます。次に、Reactとdrizzle-reactを使用して、状態の変化に応じてUIを更新/再レンダリングし、UIをスマートコントラクトの状態と同期させます。

Drizzleは、ReactのコンテキストAPIの概念を使用して、アプリケーション全体のコンポーネントツリーを介したデータの受け渡しを実装します。このようにして、アプリケーションのコンテキストがアプリケーションのすべての作業部分で利用できるようになります。

Boilerplate Codebase

Drizzleを使用すると、ローカル開発環境（ローカルマシン）で作成されたスマートコントラクトをセットアップしてフロントエンドに統合したり、パブリックアドレスとJSONインターフェイスを介してスマートコントラクトをフロントエンドにインポートしたりできます。実行compile、およびmigrateローカル開発中にトリュフベースのコマンドは、その後を提供してくれ、スマート契約を構築し、展開を消費するためにJSONインタフェースを含むフォルダ。build/contracts

このチュートリアルでは、DAppのフロントエンドの構築と、それをEtherscan.io上のスマートコントラクトまたは既存のスマートコントラクトと統合する方法に焦点を当てます。

DrizzleとReactを使用してフロントエンドDAppを構築する方法

次に、Truffleフレームワークを使用してプロジェクトを最初からブートストラップすることにより、ローカル開発環境をセットアップしましょう。ganache-cliツールと一緒にTruffleボックスをインストールして使用します。これにより、実際のEthereumノードを実行する手間をかけずにローカルブロックチェーンをセットアップできます。

ターミナルで次のコマンドを実行して、上記の必要なツールをインストールします。次に、という名前のフォルダーを作成し、そのフォルダーにディレクトリを変更して、フロントエンドDAppを初期化します。drizzle-dapp

npm install -g truffle
npm install -g ganache-cli
mkdir drizzle-react-tutorial
truffle unbox drizzle
ganache-cli -b 3

NPMインストール-グラムトリュフ NPMインストール-グラムガナッシュを- CLI MKDIR霧雨-反応-チュートリアル トリュフの箱を開ける霧雨 ガナッシュ- CLI - B 3

このコマンドtruffle unbox drizzleは、プロジェクトの構築に必要なすべての定型コードを含む完全なコードベースを作成します。これはフロントエンドが配置される場所であるため、ここではフォルダーに焦点を当てます。/app

ボイラープレートコードベース

上記のコマンドは、ローカルマシンにganache-cliをグローバルにインストールします。このコマンドは、現実的なブロックチェーンの模倣を設定して、フロントエンドとスマートコントラクトの間にDAppアカウントの統合を確立します。ganache-cli -b 3

Drizzleを初期化しDrizzleStore 、Reactで

次に、ファイル内のDAppのDrizzleをインポートして初期化します。/app/src/index.js

import { Drizzle, generateStore } from "drizzle";
import { DrizzleContext } from "drizzle-react";

import SimpleStorage from "./../build/contracts/SimpleStorage.json";

const options = { contracts: [SimpleStorage] };
const drizzleStore = generateStore(options);
const drizzle = new Drizzle(options, drizzleStore);

ReactDOM.render(
  <DrizzleContext.Provider drizzle={drizzle}>
      <App />
  </DrizzleContext.Provider>,
document.getElementById("root"));

上記のコードでは、我々は上に露出機能をインポートdrizzleし、そしてサンプル契約をインポートすることによって提供されるスターターコードから利用可能コマンド。drizzle-reacttruffle unbox drizzle

また、上記のコードを使用して、ストア、、、drizzleStoreおよびdrizzleオブジェクトを初期化しました。

次に、ファイルを編集して更新しましょう。/app/src/App.js

import { DrizzleContext } from "@drizzle/react-plugin";
import { Drizzle } from "@drizzle/store";
import drizzleOptions from "./drizzleOptions";
import MyComponent from "./MyComponent";
import "./App.css";

const drizzle = new Drizzle(drizzleOptions);
const App = () => {
  return (
    <DrizzleContext.Provider drizzle={drizzle}>
      <DrizzleContext.Consumer>
        {drizzleContext => {
          const { drizzle, drizzleState, initialized } = drizzleContext;
          if (!initialized) {
            return "Loading..."
          }
          return (
            <MyComponent drizzle={drizzle} drizzleState={drizzleState} />
          )
        }}
      </DrizzleContext.Consumer>
    </DrizzleContext.Provider>
  );
}
export default App;

上記のコードから、Drizzle Context Providerは、前のオブジェクトに加えて、initialised状態という追加のオブジェクトを提供します。これにより、drizzleが初期化され、web3プロバイダーに接続されたことがわかります。

状態initialisedが使用可能になるか、完全に接続されると、それをカスタムコンポーネントに渡しますMyComponent。

DrizzleContext 他のコンポーネントでの消費

次に、コンポーネントが配置されているファイルを開きます。ここで、提供されてオブジェクトを通過するすべての小道具を消費します。/app/src/MyComponent.jsMyComponentDrizzleContext

import { newContextComponents } from "@drizzle/react-components";
...
const { AccountData, ContractData, ContractForm } = newContextComponents;

export default ({ drizzle, drizzleState }) => {
  return (
    <div className="App">
      <div className="section">
        <h2>Active Account</h2>
        <AccountData
          drizzle={drizzle}
          drizzleState={drizzleState}
          accountIndex={0}
          units="ether"
          precision={3}
        />
      </div>
      <div className="section">
        <h2>SimpleStorage</h2>
        <p>
          This shows a simple ContractData component with no arguments, along with a form to set its value.
        </p>
        <p>
          <strong>Stored Value: </strong>
          <ContractData
            drizzle={drizzle}
            drizzleState={drizzleState}
            contract="SimpleStorage"
            method="storedData"
          />
        </p>
        <ContractForm drizzle={drizzle} contract="SimpleStorage" method="set" />
      </div>
    </div>  
  )
}

上記のコードでは、DAppのアカウントをDrizzleと統合して、アカウントデータを管理しています。これはContractDataオブジェクトにも当てはまります。名前が示すように、これはDrizzleとサンプルコントラクト間のデータの相互作用です。SimpleStorage.sol

CacheCall およびCacheSend機能

フロントエンドにDrizzleを設定したので、でインターフェースとして使用できるようになっcacheCallたcacheSend関数とを使用して、スマートコントラクトを呼び出しましょうdrizzle。関数はdrizzleStore、ストア内のスマートコントラクトからの応答をストアにアクセスすることもできます。

次に、契約データを送信し、応答をDAppの状態で保存する関数を定義しましょう。

...
export default ({ drizzle, drizzleState }) => {
  ...
  const fetchData = () => {
    const state = drizzle.store.getState();
    const key = drizzle.contracts.SimpleStorage.methods.storedData.cacheCall();

    return state.contracts.SimpleStorage.methods.storedData[key].value;
  }
  ....
}
...

上記のコードスニペットSimpleStorageは、cacheCallメソッドを使用してスマートコントラクトを呼び出すだけです。この呼び出しは、からこのデータにアクセスdrizzleStoreするkeyためにとに格納される応答データを返しますdrizzleStore。

次に、を使用keyしてdrizzleStore、上記の関数はvalue、UIに呼び出されたときにスマートコントラクトによって利用可能にされたものを返します。このようにして、スマートコントラクトを簡単に呼び出し、応答をUIと同期させることができます。

次に、トランザクションを送信して応答をストアに保存する別の関数を定義しましょう。

...
export default ({ drizzle, drizzleState }) => {
  ...
  cnnst state = drizzle.store.getState();
  const id = drizzle.contracts.SimpleStorage.methods.set.cacheSend(
    3,
    { from: Addresse }
  );

  if (state.transactionStack[id]) {
    const transactionHash = state.transactionStack[id];
    return state.transactions[transactionHash].status;
  }
  ...
}
...

上記のコードスニペットは、アプリケーションの状態を取得し、gasandfromオプションを指定してトランザクションを初期化します。from表してaddress取引を行います。cacheSendメソッドを呼び出すと、が返されます。idこれidは、DAppの状態でトランザクションの状態にアクセスするために使用されます。

これで、DAppのフロントエンドをスマートコントラクトに接続しました。ターミナルで、次のコードを実行してスマートコントラクトをコンパイルおよび移行します。

truffle compile # compiles all the smart contract within the /contracts folder
truffle migrate # deploys the smart contract on the ganache-cli blockchain

これで、スマートコントラクトとアプリケーションのフロントエンドの準備が整いました。入力フィールドに値を入力してトランザクションを実行できるはずです。そうすると、スマートコントラクトの状態とUIが自動的にすぐに更新されます。ContractFormコンポーネントは、スマート契約と対話するには、この入力してフォームを提供してくれます。

結論

このチュートリアルでは、TruffleスイートのフレームワークとしてDrizzleを紹介しました。これにより、DAppをスマートコントラクトの状態と簡単に同期できます。次に、DrizzleをDApp内にインストールして使用するための3つの方法を検討しました。また、アプリケーション内でDrizzzleコンテキストを設定する方法についても説明しました。

Drizzleは、DAppプロジェクトをブートストラップするために必要な定型文の量を減らすのに役立ちます。次のステップでは、DAppを拡張して、ゲームからショッピングリスト、ブログプラットフォームまで、すべてブロックチェーンプラットフォーム上であらゆるものを構築できます。

このチュートリアルで使用するコードを拡張するには、DAppに組み込みたい機能の呼び出しを行ったり、トランザクションを送信したりするためのコンポーネントをさらに構築します。次に、これらの機能を処理するためにスマートコントラクトを拡張します。

リンク: https://blog.logrocket.com/using-drizzle-react-write-dapp-frontends/

#react #dapp