为什么要用Web3.js
在最近这几年，区块链技术的发展简直不可阻挡。大家都说区块链会改变世界，而Web3.js就是连接区块链与我们前端应用的钥匙。如果你想让你的React项目和以太坊或其他区块链互动，Web3.js绝对是个不错的选择。
环境准备
首先，你需要有一个已经搭建好的React项目。如果你还没有，不妨用Create React App快速创建一个。打开命令行，输入：
npx create-react-app my-app然后，进入你的项目文件夹：
cd my-app安装Web3.js
好了，项目准备就绪后，我们需要安装Web3.js。回到命令行，输入以下命令：
npm install web3这一步非常简单，这个库会被自动下载到你的项目中。记得在每次用到Web3的地方引入它哦：
import Web3 from 'web3'与Ethereum网络连接
接下来，我们来看看如何连接到以太坊网络。通常情况下，我们可以使用MetaMask来处理这些事情。用户需要在浏览器里安装MetaMask扩展，并且确保浏览器已连接到正确的以太坊网络（比如Rinkeby测试网络）。
然后在你的组件中类似这样写：
const App = () => {
const [web3, setWeb3] = useState(null);
useEffect(() => {
const initWeb3 = async () => {
// 检查MetaMask是否安装
if (window.ethereum) {
const web3 = new Web3(window.ethereum);
await window.ethereum.request({ method: 'eth_requestAccounts' });
setWeb3(web3);
} else {
alert('请安装MetaMask');
}
};
initWeb3();
}, []);
return 我的Web3应用;
};
交互智能合约
一旦你成功连接到以太坊，接下来可以开始和智能合约互动了。假设我们有一个简单的合约，能够存储一个数字。我们需要合约的ABI和地址。通常这些信息会由合约开发者提供。
你可以在组件中引入ABI和地址，然后像这样调用合约的方法：
const contractAddress = '你的合约地址';
const contractABI = [在这里放你的ABI];
const contract = new web3.eth.Contract(contractABI, contractAddress);
// 调用方法
const callMethod = async () => {
const result = await contract.methods.yourMethod().call();
console.log(result);
};
显示数据在界面
好了，接下来就是把数据展示到页面上的时候啦。你可以用状态管理来保存数据，然后在页面上链接数据的显示。
const [data, setData] = useState(null);
const fetchData = async () => {
const result = await contract.methods.yourMethod().call();
setData(result);
};
return (
{data