16、去中心化社交音乐 dApp 开发指南

去中心化社交音乐 dApp 开发指南

1. 实现 setup 函数

要让应用与智能合约交互，需在 Ropsten 网络上创建已部署合约的新实例。这需要合约地址和 ABI 接口，可在 Truffle 部署 SocialMusic 合约时创建的 build/contracts/ 文件夹中找到。为方便访问，可将 SocialMusic.json 复制到 src/ 文件夹。若要扩展合约功能，需用更新的 ABI 版本替换该文件。

在 React 应用中导入 JSON 文件，若使用 webpack 2.0 或更高版本，可直接导入；之前的版本需添加 json-loader 。示例代码如下：

import React from 'react'
import ReactDOM from 'react-dom'
import web3 from 'web3'
import './index.css'
import ABI from './SocialMusic.json'

创建智能合约地址和 ABI 接口的变量，示例如下：

class Main extends React.Component {
    constructor() {
        super()
        const contractAddress = '0x0217ED41bC2