使用truffle react构建完整项目（完）

总算是把整个流程走完了。
因为教程是多年前的，基本没看，全程靠懵和官方文档。

今天就做了一件事，通过web3.js和合约互动…
本来早几年就做了的事。
但是这是通过react封装过的。
英文不好。看demo看了半天。

import React, { Component } from "react";
import VotingContract from "./contracts/Voting.json";
import getWeb3 from "./getWeb3";

import "./App.css";
// const contract_add='0xc6185b4476626b98cbaecad4a87872e0be617063';


class App extends Component {
  state = { storageValue: 0, web3: null, accounts: null, contract: null, get_set_piaoshu: null };

  componentDidMount = async () => {
    try {
      // Get network provider and web3 instance.
      const web3 = await getWeb3();

      // Use web3 to get the user's accounts.
      const accounts = await web3.eth.getAccounts();

      // Get the contract instance.
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = VotingContract.networks[networkId];
      const instance = new web3.eth.Contract(
        VotingContract.abi,
        deployedNetwork && deployedNetwork.address,
      );

      // Set web3, accounts, and contract to the state, and then proceed with an
      // example of interacting with the contract's methods.
      this.setState({ web3, accounts, contract: instance }, this.runExample);
    } catch (error) {
      // Catch any errors for any of the above operations.
      alert(
        `Failed to load web3, accounts, or contract. Check console for details.`,
      );
      console.error(error);
    }
  };

  runExample = async () => {
    const { accounts, contract } = this.state;

    // Stores a given value, 5 by default.
    // await contract.methods.set(5).send({ from: accounts[0] });

    // Get the value from the contract to prove it worked.

    this.state.contract.methods.chakan('xiaobai').call().then(
      t => this.setState({ storageValue: t })
    );
    


  };

  render() {
    if (!this.state.web3) {
      return <div>Loading Web3, accounts, and contract...</div>;
    }
    return (
      <div className="App">
        {/* 
Good to Go!
        
Your Truffle Box is installed and ready.
        
Smart Contract Example
        

          If your contracts compiled and migrated successfully, below will show
          a stored value of 5 (by default).
        
        

          Try changing the value stored on line 40 of App.js.
        
        
The stored value is: {this.state.storageValue}
 */}
        小白的票数是：{this.state.storageValue}<br></br><br></br>
        <button onClick={()=>{
          this.state.contract.methods.toupiao('xiaobai').send({from:this.state.accounts[0]})
        }
        }>投票给小白</button><br></br><br></br>

        <button onClick={()=>{
          this.state.contract.methods.chakan('xiaobai').call().then(
            t => this.setState({ storageValue: t })
          );
        }
        }>查看小白的票数</button>
      </div>
    );
  }
}

export default App;

1.合约的json文件需要修改 line：2

2.相应的合约名都要改 line：xx
他会自己通过json文件去找我们的合约地址和部署方式：

  const deployedNetwork = VotingContract.networks[networkId];
  const instance = new web3.eth.Contract(
    VotingContract.abi,
    deployedNetwork && deployedNetwork.address,
  );

3.runExample
这里我直接加了查小白的票数功能。但是我发现后面重新查的时候：

Parsing error: Can not use keyword ‘await’ outside an async function

就不通过这个‘协程’去查了，直接异步执行构造一个匿名函数去给storygevalue赋值。

4.返回视图
这里把之前的注释了。
然后加了两个按钮。

最后进入client文件夹

npm start

就能看到自己的投票dapp了

——————————
最后就是部署上线了。

npm install -g serve

更多部署方式：
https://create-react-app.dev/docs/deployment#customizing-environment-variables-for-arbitrary-build-environments

这样走下来，流程清楚了。整个知识体系和架构搞得有点明白。
接下来就是学习react+solidity进阶
能自己处理UI，自己处理链上逻辑。

加油吧骚年！