1. 創(chuàng)建 React 應(yīng)用

要使用 TypeScript 啟動(dòng)一個(gè)新的 Create React App 項(xiàng)目，您可以運(yùn)行：

成都創(chuàng)新互聯(lián)專注于中大型企業(yè)的成都做網(wǎng)站、網(wǎng)站制作和網(wǎng)站改版、網(wǎng)站營銷服務(wù)，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開發(fā)的融合，累計(jì)客戶成百上千，服務(wù)滿意度達(dá)97%。幫助廣大客戶順利對接上互聯(lián)網(wǎng)浪潮，準(zhǔn)確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運(yùn)用，我們將一直專注品牌網(wǎng)站設(shè)計(jì)和互聯(lián)網(wǎng)程序開發(fā)，在前進(jìn)的路上，與客戶一起成長！

• npx

npx create-react-app my-app --template typescript

• yarn

yarn create react-app my-app --template typescript

2.安裝SDK

確保將 react、react-dom 和Moralis 安裝為依賴項(xiàng)。然后安裝 react-moralis：

• npm

npm install moralis-v1 react-moralis

• yarn

yarn add moralis-v1 react-moralis

3.初始化SDK

您將看到以下代碼：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);

在您的項(xiàng)目中導(dǎo)入 Moralis Provider 并添加  組件，如下所示

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { MoralisProvider } from "react-moralis";

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById("root")
);

您可以從 Moralis Dashboard 獲取服務(wù)器 (dapp) URL 和 APP ID。轉(zhuǎn)到您的 Moralis 儀表板，然后單擊服務(wù)器名稱旁邊的查看詳細(xì)信息。

單擊服務(wù)器名稱下方的設(shè)置。

4. 驗(yàn)證用戶

現(xiàn)在 SDK 已成功連接，我們可以使用 Moralis 的強(qiáng)大功能。讓我們登錄一個(gè)用戶并立即從您的 Moralis 數(shù)據(jù)庫中的所有鏈獲取他們的所有代幣、交易和 NFT。

在 App.tsx 中調(diào)用應(yīng)用程序內(nèi)的 useMoralis 鉤子，輸入以下代碼：

import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import { useMoralis } from "react-moralis";

function App() {

    const { authenticate, isAuthenticated, isAuthenticating, user, account, logout } = useMoralis();

    useEffect(() => {
    if (isAuthenticated) {
      // add your logic here
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isAuthenticated]);

    const login = async () => {
      if (!isAuthenticated) {

        await authenticate({signingMessage: "Log in using Moralis" })
          .then(function (user) {
            console.log("logged in user:", user);
            console.log(user!.get("ethAddress"));
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }

    const logOut = async () => {
      await logout();
      console.log("logged out");
    }

  return (
    

      
Moralis Hello World!
      Moralis Metamask Login
      Logout
    
  );
}

export default App;

5.從localhost查看頁面

在 package.json 所在的項(xiàng)目目錄中使用以下命令在 localhost 上運(yùn)行您的應(yīng)用程序

• npm

npm start

• yarn

yarn start

6. 使用 Metamask 登錄

訪問網(wǎng)頁并單擊登錄。您的 Metamask 將彈出并要求您登錄。

7. 查看 Moralis 數(shù)據(jù)庫中的所有用戶資產(chǎn)

一旦用戶登錄 Moralis，就會(huì)從所有鏈中獲取有關(guān)該用戶的所有鏈上數(shù)據(jù)，并將其放入 Moralis 數(shù)據(jù)庫。要查看 Moralis 數(shù)據(jù)庫，請轉(zhuǎn)到您的服務(wù)器并單擊儀表板。

單擊儀表板后，您將看到該服務(wù)器的數(shù)據(jù)庫。 Moralis 從用戶地址處于活動(dòng)狀態(tài)的所有區(qū)塊鏈中獲取數(shù)據(jù)，您可以在一個(gè)數(shù)據(jù)庫中查看和查詢用戶的所有代幣、NFT 和過去的交易。

Moralis 數(shù)據(jù)庫從所有鏈中獲取所有用戶數(shù)據(jù)并實(shí)時(shí)更新，以防用戶在鏈上移動(dòng)資產(chǎn)。

移動(dòng)資產(chǎn)

嘗試移動(dòng) Metamask 錢包中的資產(chǎn)，并觀察 Moralis 數(shù)據(jù)庫如何實(shí)時(shí)更新記錄。

網(wǎng)站標(biāo)題：創(chuàng)新互聯(lián)Moralis教程：Moralis與React連接
URL地址：http://m.fisionsoft.com.cn/article/copijod.html