Web3 整理React项目导入Web3 并获取区块链信息-Toy模板网

这篇具有很好参考价值的文章主要介绍了Web3 整理React项目导入Web3 并获取区块链信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

然后我们做个react路由

先终端输入

npm install react-router-dom --save

引入一下依赖
react web3源码,web3,react.js,区块链
然后我们在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干掉
这个组件我们不需要了
react web3源码,web3,react.js,区块链
然后我们找到 src下的 index.js 或者 index.jsx 改写代码如下

import React from 'react';
import Router from "./router/index";

export default function App() {
  return (
    <div className="App">
      <Router />
    </div>
  );
}

就是引入了我们的路由组件然后我们启动项目
react web3源码,web3,react.js,区块链
然后我们可以看到项目就起来了整个项目结构也就搭好了

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

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

npm install web3@1.8.0 --save

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

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

ganache -d

react web3源码,web3,react.js,区块链
然后我们在 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>
  );
}

这里我们将 useEffect 作为生命周期学过 Hook的朋友们都不陌生 useEffect第二个参数传一个空数组表示这个生命周期只在进来时执行一次
然后我们调用了自己写的一个initialization函数
这个函数用来获取当前本地区块链的信息然后获取当前授权的登录列表
最后返回这个列表

然后如果你没有授权一进来 MetaMask 就会让你选择连接的账号
react web3源码,web3,react.js,区块链
连接好之后这边就能拿到他的账号列表了

好那我们后面再说连接合约的内容啦文章来源地址https://www.toymoban.com/news/detail-782587.html