EN

Getting Started with React & Web3: Build Your First Blockchain App Step by Step

Authors: @yudao1024, @smallfu

In this lesson, we will guide you to quickly create a React project and display an NFT image.

This course is primarily designed for students with some front-end development experience, helping you transition from Web2 to Web3 and gain DApp (decentralized application) development capabilities.

The course will be based on Ant Design Web3 to make it easier for you to get started. Of course, this won't affect your understanding of the basic concepts. We will explain the relevant concepts in the course to ensure that after completing the course, you can master the basics of DApp development.

This course has certain prerequisites, requiring you to have a basic understanding of React front-end development. If you are not familiar with React, you can first learn from the React official documentation.

Initialize a React Project

We will initialize our project based on React + Next.js + TypeScript. Of course, if you are more familiar with other front-end frameworks like umi, you can also use the framework you are familiar with. You can still refer to this tutorial, but for non-professional front-end developers, we recommend following our tutorial step by step to avoid issues caused by framework differences.

Before starting, please ensure that you have installed Node.js with a version greater than 20.0.0. The tutorial is written based on the latest Node.js version. If you are using an older version of Node.js, it may still run, but if you encounter problems, you can try upgrading your Node.js version.

After installation, you can check if Node.js and its built-in npm and npx are successfully installed with the following commands:

node -v # => v20.0.0+
npm -v # => 10.0.0+
npx -v # => 10.0.0+

Next, we'll refer to the Next.js official documentation to create a new project:

npx create-next-app@14.0.4 # We specify the version of create-next-app as 14.0.4 to avoid differences from upgrades affecting the tutorial details

Please follow the prompts to create a new project. We'll name it ant-design-web3-demo. You can refer to the image below for the technology stack selection:

We have omitted the selection of Tailwind CSS and App Router to make the project simpler. In actual projects, you should select what you need according to your requirements.

Install Dependencies and Start the Project

After creation, enter the project directory and install dependencies:

cd ant-design-web3-demo
npm i

After installation, run npm run dev to start the project. You can visit http://localhost:3000 in your browser to see if the project has started successfully.

Add Ant Design Web3

Next, we'll install Ant Design, Ant Design Web3 basic components, and other dependencies to the project:

npm i antd @ant-design/web3 @ant-design/web3-wagmi wagmi @tanstack/react-query --save
  • @ant-design/web3 is a UI component library that connects to different blockchains through different adapters. In this course, we will primarily focus on DApp development on Ethereum.
  • @ant-design/web3-wagmi is an Ant Design Web3 Ethereum adapter based on wagmi 2.x. It provides the ability for @ant-design/web3 components to connect to Ethereum and other EVM-compatible chains. With it, you don't need to handle component connection states, chain data requests, and other logic yourself. It will provide related global states and interfaces for components through Web3ConfigProvider.
  • wagmi is an open-source React Hooks library serving Ethereum, which depends on @tanstack/react-query. Ant Design Web3's adapter @ant-design/web3-wagmi is implemented based on it. In the later parts of this course, unless otherwise specified, the adapter mentioned refers to @ant-design/web3-wagmi.

After installation, due to a current issue with Next.js, you need to add the following configuration to next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
+ transpilePackages: [  "@ant-design", "antd", "rc-util", "rc-pagination", "rc-picker", "rc-input" ],
}

module.exports = nextConfig

After installation, create a new file pages/web3.tsx with the following content:

import { Address } from "@ant-design/web3";

export default function Web3() {
  return (
    <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
  );
}

Then visit http://localhost:3000/web3 to see that you have successfully used Ant Design Web3 in your project 🎉

To make the page more aesthetically pleasing and avoid the horizontal bar style shown in the image above, you can add the following content to line 85 of styles/global.css in your project:

html,
body {
  max-width: 100vw;
+  min-height: 100vh;
  overflow-x: hidden;
}

Of course, this is not mandatory.

Configure the Adapter

Adapters allow Ant Design Web3 UI components to quickly connect to the blockchain. For example, after using @ant-design/web3-wagmi, components like Connector and NFTCard can directly connect to Ethereum. You can refer to the Ethereum recommended configuration for adapter configuration. In this course, we will start with the simplest configuration and gradually guide you to understand the configuration you need in your actual project.

First, continue editing the pages/web3.tsx file and import the required content:

+ import { http } from "wagmi";
+ import { Mainnet, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
import { Address } from "@ant-design/web3";

export default function Web3() {
  return (
    <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
  );
};

The imported content is explained as follows:

  • http: A method used by wagmi to create an HTTP JSON RPC connection, allowing you to access the blockchain through HTTP requests.
  • Mainnet: Represents the Ethereum mainnet. In addition to Mainnet, it also supports the Sepolia testnet and multiple chains such as BSC and Arbitrum. Supported chains can be found here.

Next, create the configuration:

import { http } from "wagmi";
import { Mainnet, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
import { Address } from "@ant-design/web3";

export default function Web3() {
  return (
+    <WagmiWeb3ConfigProvider
+      chains={[Mainnet]}
+      transports={{
+        [Mainnet.id]: http(),
+      }}
+    >
      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+    </WagmiWeb3ConfigProvider>

  );
};

With this, we have completed the adapter configuration. Now we can use Ant Design Web3 components to get data from the blockchain.

Let's try using the NFTCard component:

import { http } from "wagmi";
import { Mainnet, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
- import { Address } from "@ant-design/web3";
+ import { Address, NFTCard } from "@ant-design/web3";

export default function Web3() {
  return (
    <WagmiWeb3ConfigProvider
      chains={[Mainnet]}
      transports={{
        [Mainnet.id]: http(),
      }}
    >
      <Address format address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9" />
+     <NFTCard
+       address="0xEcd0D12E21805803f70de03B72B1C162dB0898d9"
+       tokenId={641}
+     />
    </WagmiWeb3ConfigProvider>

  );
};

The NFTCard component will get the NFT information with tokenId 641 from the 0xEcd0D12E21805803f70de03B72B1C162dB0898d9 NFT contract and display it on the page.

The effect is as follows:

If it doesn't display, please check if your network is working properly. If the NFT image can be rendered normally, congratulations, we have completed this lesson!