///“虾仔”>>>：quangneng.com/5512/

Node.js + React 实战开发区块链：前端工程师的入门指南

在区块链技术日益普及的今天，前端工程师也需要掌握如何与区块链进行交互。本篇文章将指导你如何使用 Node.js 和 React 开发一个区块链应用，从而帮助你在这一新兴领域中快速上手。

1. 区块链概述

区块链是一种分布式账本技术，通过去中心化的方式记录交易，确保数据不可篡改。其核心组件包括区块、链和智能合约。前端工程师通常关注与区块链交互的接口和用户体验。

2. 环境准备

• Node.js：作为后端环境，用于处理与区块链节点的交互。
• React：用于构建用户界面。
• Web3.js：与以太坊区块链进行交互的库。
• Solidity：以太坊智能合约编程语言（如果需要编写智能合约）。

3. 创建 Node.js 后端

3.1 安装 Node.js 和初始化项目

bashmkdir blockchain-app
cd blockchain-app
npm init -y

3.2 安装 Web3.js

bashnpm install web3

3.3 连接到以太坊节点

javascriptconst Web3 = require('web3');
const web3 = new Web3('https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID');

async function getLatestBlock() {
    const block = await web3.eth.getBlock('latest');
    console.log(block);
}

getLatestBlock();

3.4 编写 API 以供前端调用

使用 Express.js 创建简单的 API 接口。

bashnpm install express

javascriptconst express = require('express');
const app = express();
const port = 3000;

app.get('/latest-block', async (req, res) => {
    const block = await web3.eth.getBlock('latest');
    res.json(block);
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

4. 创建 React 前端

4.1 初始化 React 项目

bashnpx create-react-app blockchain-frontend
cd blockchain-frontend

4.2 安装 Web3.js

bashnpm install web3

4.3 连接到后端 API

在 src 目录中创建 BlockchainService.js 文件。

javascriptconst API_URL = 'http://localhost:3000/latest-block';

export async function fetchLatestBlock() {
    const response = await fetch(API_URL);
    const data = await response.json();
    return data;
}

4.4 创建 React 组件

在 src 目录中创建 LatestBlock.js 文件。

javascriptimport React, { useEffect, useState } from 'react';
import { fetchLatestBlock } from './BlockchainService';

const LatestBlock = () => {
    const [block, setBlock] = useState(null);

    useEffect(() => {
        const getBlock = async () => {
            const latestBlock = await fetchLatestBlock();
            setBlock(latestBlock);
        };
        getBlock();
    }, []);

    return (
        <div>
            <h1>Latest Ethereum Block</h1>
            {block ? (
                <pre>{JSON.stringify(block, null, 2)}</pre>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
};

export default LatestBlock;

4.5 将组件添加到应用中

在 src/App.js 中引入并使用 LatestBlock 组件。

javascriptimport React from 'react';
import LatestBlock from './LatestBlock';

function App() {
    return (
        <div className="App">
            <LatestBlock />
        </div>
    );
}

export default App;

5. 与智能合约交互

5.1 编写 Solidity 智能合约

// SimpleStorage.sol
pragma solidity ^0.8.0;

contract SimpleStorage {
    uint256 public storedData;

    function set(uint256 x) public {
        storedData = x;
    }
}

5.2 部署智能合约

使用工具如 Truffle 或 Hardhat 将合约部署到以太坊网络。

5.3 更新 React 前端以调用智能合约

javascriptimport Web3 from 'web3';

// Initialize Web3
const web3 = new Web3('https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID');

// Replace with your contract ABI and address
const contractABI = [ /* ABI here */ ];
const contractAddress = '0x...';

const contract = new web3.eth.Contract(contractABI, contractAddress);

export async function getStoredData() {
    const data = await contract.methods.storedData().call();
    return data;
}

5.4 创建 React 组件以显示智能合约数据

javascriptimport React, { useEffect, useState } from 'react';
import { getStoredData } from './BlockchainService';

const StoredData = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            const storedData = await getStoredData();
            setData(storedData);
        };
        fetchData();
    }, []);

    return (
        <div>
            <h1>Stored Data from Smart Contract</h1>
            {data ? <p>{data}</p> : <p>Loading...</p>}
        </div>
    );
};

export default StoredData;

6. 总结

本教程展示了如何使用 Node.js 和 React 构建一个简单的区块链应用，包括如何设置 Node.js 后端与以太坊交互，如何创建 React 前端与区块链交互。通过这些步骤，前端工程师可以快速掌握与区块链技术的集成，并在实际项目中应用这些知识。继续深入学习智能合约开发和区块链生态系统中的其他工具，将进一步提升你的技能。