专门为前端工程师设计 Nodejs+React 实战开发区块链“慕课”DApp 专门为前端工程师设计 Nodejs+Re

专门为前端工程师设计 Nodejs+React 实战开发区块链“慕课”DApp ---xingkeit.top/9804/

你是否觉得区块链和 DApp（去中心化应用）离自己很远，满是晦涩的概念和复杂的后端逻辑？作为前端工程师，我们其实离这个新世界只有一步之遥。利用我们熟悉的 React 和 Node.js，完全可以构建一个功能完整的 DApp。

本文将带你走完从零到一的全流程，用最少的代码，为你揭示 DApp 开发的核心奥秘。忘掉那些复杂的理论，我们直接开干！

第一步：理解 DApp 的“三驾马车”

在开始编码前，我们先理清一个 DApp 的基本架构。它通常由三部分组成：

智能合约：部署在区块链上，是 DApp 的“后端”和“数据库”。它定义了应用的核心规则和数据。
前端界面：就是我们熟悉的 React 应用，负责与用户交互。
连接桥梁：负责让前端与智能合约“对话”。这正是 Node.js 和相关库（如 ethers.js 或 web3.js）大显身手的地方。

我们的目标就是：用 Solidity 写一个简单的智能合约，然后用 React 做一个界面，通过 Node.js 环境下的工具链将两者连接起来。

第二步：环境准备与“瑞士军刀”选择

手动配置开发环境是件痛苦的事。幸运的是，我们有“瑞士军刀”—— Hardhat。

Hardhat 是一个专业的以太坊开发环境，它集成了编译、部署、测试和运行本地节点等所有功能。对于前端工程师来说，它就像 Webpack 或 Vite 之于前端项目一样，是必备的脚手架。

快速启动：

bash

复制

# 1. 创建项目目录
mkdir my-dapp && cd my-dapp

# 2. 初始化 Hardhat 项目
npm init -y
npm install --save-dev hardhat

# 3. 创建一个 Hardhat 配置文件
npx hardhat
# (在交互界面中选择 "Create a JavaScript project")

现在，你的项目结构已经初具雏形，包含了 contracts、scripts 和 test 等文件夹。

第三步：编写你的第一个智能合约（“后端”）

我们来写一个最简单的“存储”合约：一个可以读取和写入数字的公共记事本。

在 contracts 目录下，创建一个新文件 SimpleStorage.sol：

solidity

复制

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.9;

contract SimpleStorage {
    uint256 public myNumber; // 状态变量，存储在区块链上

    // 写入函数，改变状态需要支付 Gas
    function setNumber(uint256 _newNumber) public {
        myNumber = _newNumber;
    }

    // 读取函数，免费
    function getNumber() public view returns (uint256) {
        return myNumber;
    }
}

代码解读：

uint256 public myNumber：声明了一个公开的无符号整数，Solidity 会自动为它创建一个免费的 getter 函数。
setNumber：一个写入函数，任何人都可以调用它来修改 myNumber 的值。
getNumber：一个读取函数，用于获取当前存储的数字。

第四步：编译与部署合约（“上线”）

智能合约写好了，需要编译成机器能理解的字节码，然后“部署”到区块链上。

编译合约：

bash

复制

    npx hardhat compile

成功后，你会在 `artifacts/contracts` 目录下看到生成的 JSON 文件，里面包含了合约的 ABI（Application Binary Interface，可以理解为合约的“API 文档”）和字节码。

2. 编写部署脚本：

在 `scripts` 目录下，修改 `deploy.js`：

javascript

复制

    // scripts/deploy.js
    const hre = require("hardhat");

    async function main() {
      // 1. 获取合约工厂
      const SimpleStorage = await hre.ethers.getContractFactory("SimpleStorage");
      // 2. 部署合约
      const simpleStorage = await SimpleStorage.deploy();
      // 3. 等待部署完成
      await simpleStorage.deployed();

      console.log("SimpleStorage deployed to:", simpleStorage.address);
    }

    main().catch((error) => {
      console.error(error);
      process.exitCode = 1;
    });

3. 运行本地节点并部署：

bash

复制

    # 终端1：启动一个本地测试网络
    npx hardhat node

    # 终端2：在另一个终端执行部署
    npx hardhat run scripts/deploy.js --network localhost

你会看到合约被成功部署，并打印出一个合约地址。**这个地址非常重要，是前端找到合约的唯一标识。**

第五步：构建 React 前端（“界面”）

现在，轮到我们的老本行了——React！

创建 React 应用：

bash

复制

    # 在项目根目录下
    npx create-react-app client

2. 安装连接区块链的库：

我们使用 `ethers.js`，它是目前最流行、最优雅的以太坊交互库。

bash

复制

    cd client
    npm install ethers

3. 连接钱包与合约：

DApp 的交互通常通过用户的浏览器钱包（如 MetaMask）进行。我们需要请求用户授权，获取其账户信息。

在 `client/src/App.js` 中，我们构建一个简单的界面：

4. 准备 ABI 文件：

React 需要知道合约的“API”。还记得编译后生成的 JSON 文件吗？将 `artifacts/contracts/SimpleStorage.sol/SimpleStorage.json` 复制到 `client/src/` 目录下，并重命名为 `SimpleStorage.json`。

第六步：整合与运行

万事俱备，只欠东风。

替换合约地址：回到 client/src/App.js，将 YOUR_DEPLOYED_CONTRACT_ADDRESS 替换为第四步中部署成功后打印的真实地址。
启动 React 应用：

引用

现在，打开浏览器，访问 http://localhost:3000。你应该能看到：

页面弹出 MetaMask 授权请求。
授权后，页面显示你的钱包地址。
点击 “Read Number” 按钮，可以读取到合约中存储的数字（初始为 0）。
在输入框中输入一个新数字，点击 “Write Number”，MetaMask 会弹出交易确认框，确认后，数字就被永久写入了区块链！再次点击 “Read Number” 即可看到更新。

恭喜你！ 你已经成功构建了一个完整的、前后端分离的 DApp！

结语：从入门到精通

这个简单的“记事本” DApp，虽然功能简陋，但它包含了 DApp 开发的所有核心环节：

后端：用 Solidity 编写智能合约。
部署：用 Hardhat 编译并部署到测试网络。
前端：用 React 构建用户界面。
通信：用 ethers.js 连接钱包、调用合约。

作为前端工程师，你已经掌握了最难的部分——构建用户交互。接下来，你可以探索更复杂的合约逻辑（如 ERC-20 代币、NFT）、更优雅的状态管理（如 Redux Toolkit）、以及与 IPFS（去中心化存储）的结合。

区块链的世界不再遥远，它就是你技能树的下一个分支。现在，就从这第一个 DApp 开始，去冲吧！