智能合约全栈开发示例(一)-hardhat、solidity和react开发
交流微博:https://weibo.com/u/2434823180
创建 react 工程
先通过 npx 创建 react 工程,工程名称 full-stack-dapp
npx create-react-app full-stack-dapp
然后进入 full-stack-dapp 目录
npm run start
看到 localhost:3000 页面, 说明安装没有问题
安装并创建 hardhat 工程
安装过程:https://www.cnblogs.com/apenote/p/16902269.html
在 full-stack-dapp 目录下在创建工程 npx hardhat,一路回车
查看节点:
npx hardhat node
可以看到如下节点
修改hardhat.config.js
添加 path 和 networks 参数
module.exports = { solidity: "0.8.17", path: { artifacts: './src/artifacts', }, networks: { hardhat: { chainId: 1337, }, } };
合约代码:
// SPDX-License-Identifier: UNLICENSED pragma solidity ^0.8.9; // Uncomment this line to use console.log // import "hardhat/console.sol"; import "hardhat/console.sol"; contract Greeter { string private greeting; constructor (string memory _greeting) { console.log('Deploying a Greeter:', _greeting); greeting = _greeting; } function getGreeting() public view returns (string memory) { return greeting; } function setGreeting(string memory _newGreeting ) public { console.log('Changing greeting from '); greeting = _newGreeting; } }
部署文件 deploy.js
const hre = require("hardhat"); async function main() { const Greeter = await hre.ethers.getContractFactory("Greeter"); const greeter = await Greeter.deploy("Hello, Hardhat!!s"); await greeter.deployed(); console.log( "Greeter deployed to :", greeter.address ); } main().catch((error) => { console.error(error); process.exitCode = 1; });
运行部署(本地部署)
npx hardhat run .\scripts\deploy.js --network localhost
运行完成
分类:
智能合约全栈demo
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix