当前位置：首页 > news >正文

Web3 整理React项目导入Web3 并获取区块链信息

news 2025/6/29 5:37:00

上文 WEB3 创建React前端Dapp环境并整合solidity项目，融合项目结构便捷前端拿取合约 Abi 我们用react 创建了一个 dapp 项目并将前后端代码做了个整合

那么我们就来好好整理一下我们的前端react的项目结构
我们在 src 目录下创建一个 components
用来存放我们的大规模组件

然后在src下创建一个文件夹目录叫 view 用来放我们的页面组件也很多人喜欢把这个目录名字命名为 pages 这都是看个人喜好没强制要求叫什么只是一个大家都认可的规范方便别人查看和二开你的项目能够看得懂你的结构

然后我们做个react路由

先终端输入

npm install react-router-dom --save

引入一下依赖
在这里插入图片描述
然后我们在src目录下创建目录 router
专门用来管理路由的文件夹
然后在router 下创建文件 index.jsx 这就是我们路由的配置文件

然后我们在 view 中创建一个 index.jsx 作为我们的首页
然后我们编写view 下的 index.jsx 代码如下

import React from 'react';export default function PageIndex() {return (<div>欢迎来到 Web3 练习的世界</div>);
}

就用他来做首页

然后我们编写 router下的index.jsx 代码如下

import { BrowserRouter as Router,Routes,Route } from "react-router-dom";
import React from 'react';import PageIndex from '../view/index';export default function router() {const IndexRmin = ()=><div><PageIndex/></div>return (<div className="App"><Router><Routes><Route path='/' element = { IndexRmin() }></Route></Routes></Router></div>)
}

这里我们引入整体路由配置然后引入 view 下的 index 组件设置了 / 对应该组件路由设置了我们的首页

然后回到src下将 App.css干掉
这个组件我们不需要了
在这里插入图片描述
然后我们找到 src下的 index.js 或者 index.jsx 改写代码如下

import React from 'react';
import Router from "./router/index";export default function App() {return (<div className="App"><Router /></div>);
}

就是引入了我们的路由组件然后我们启动项目
在这里插入图片描述
然后我们可以看到项目就起来了整个项目结构也就搭好了

好那么接下来那么走进首页我们一定要去对合约进行一个连接
那么这就需要获取账号初始化等等那么就一定要安装 web3 这个模块

其实再简单不过退出项目运行终端执行

npm install web3@1.8.0 --save

注意这里我们要 1.8.0 版本高了有时反而有问题

然后我们还是先把 ganache 的一个虚拟环境起来
终端执行

ganache -d

在这里插入图片描述
然后我们在 view 下的index.jsx文件中编写代码如下

import { useEffect } from 'react';
import Web3 from "web3";export default function PageIndex() {useEffect(() =>{async function start(){const WebData = await initialization()console.log(WebData)}start();},[])// 获取web 信息async function initialization() {var web3 = new Web3(Web3.givenProvider || "http://localhost:8545");let account = await web3.eth.requestAccounts();return account}return (<div>欢迎来到 Web3 练习的世界</div>);
}