0基础从前端到Web3 —— Vite + React + TS moveCall a + b

一：初始化项目

$Vite$ 作为近几年前端开发中常用的构建工具之一，具有启动速度快、更快的冷启动与热更新、按需加载等优势，极高提升了开发效率和体验，想要初始化一个项目也十分简单，本篇以 $pnpm$ 为例：

1. pnpm create vite
   根据提示输入想要创建的项目名，再选择 $React$ 框架和 $TypeScript$ 模板（请根据具体的开发需求选择合适的框架和模板）。
2. cd进入你新建的项目，通过pnpm install安装必要的依赖，等待一会儿后即可通过pnpm run dev进行启动，这里可以选择打开浏览器预览初始化的页面（中央有一个点击计数的按钮）。
3. 本篇还需要使用到 $SuiMove$​ 的相关功能（例如通过浏览器连接钱包，链上调用等），所以还需要通过如下命令添加依赖：
   pnpm add -D @mysten/sui.js @mysten/dapp-kit @tanstack/react-query

至此，基础的内容都已经初始化完毕，让我们将功能进行拆解进行实现。

二：功能实现

2.1 基础组件

在项目中进入src文件夹，打开并修改main.tsx文件。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'

import '@mysten/dapp-kit/dist/index.css';

import { SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
import { getFullnodeUrl } from '@mysten/sui.js/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();
const networks = {
	testnet: { url: getFullnodeUrl('testnet') },
	mainnet: { url: getFullnodeUrl('mainnet') },
};

ReactDOM.createRoot(document.getElementById('root')!).render(
	<React.StrictMode>
		<QueryClientProvider client={queryClient}>
			<SuiClientProvider networks={networks} defaultNet