Create a Simple Decentralized Application with React

Decentralized applications are typically created in form of web pages or desktop applications. This article is going to get your feet wet with web page version of Dapp. I will elaborate how to create a simple single page application with React.

Preparation

I assume that you have one type of these web3 providers:

1. Local full node(Geth or other Ethereum clients)
2. Injected web3(MetaMask)
3. Network simulator(TestRPC or Ganache)

I have set up Geth to connect to Ropsten testnet, so I will use Geth as my provider. Choose one of them as yours and follow the document to set up on your computer. My code below works well with geth and TestRPC. Although I haven’t tried MetaMask, related information can be found here.

In addition, install Node.js. I will also use create-react-app to accelerate web development.

Getting Started

Open up a project with create-react-app. The command is different according to the version of npm you have. Either

$ npx create-react-app simpledapp

or

$ create-react-app simpledapp

will do (Please refer to the README.md for more detail). After that, we need web3.js to interact with Ethereum blockchain. Web3.js is the Ethereum compatible JavaScript API which is available on npm. Change directory into the project and install web3.js.

$ cd simpledapp
$ npm install --save web3
$ npm start

npm start will boot up the react project. In http://localhost:3000/,it shows “Welcome to React” and hints to start with editing src/App.js. It also means that we can start coding.

Start to code

Open the project with the favorite editor. We only need to modify src/App.js, but we won’t need any bulit-in css and img. Therefore, remove that in the top of src/App.js. It will become:

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div>
        Single div
      </div>
    );
  }
}
export default App;

In the browser, it becomes rather empty except shows “Single div”. Before next step, make sure to get your provider prepared. We will use web3.js to connect to the provider and test status with web3.isConnected(). Modify src/App.js into:

import React, { Component } from 'react';
import Web3 from 'web3';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {isConnected: false};
    this.web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
  }
  componentWillMount() {
    if(this.web3 && this.web3.isConnected()) {
      this.setState({isConnected: true});
    }
  }
  render() {
    return (
      <div>
        <h2>Is connected?:</h2><br/>
        {this.state.isConnected?'Connected to local node':'Not Connected'}
      </div>
    );
  }
}
export default App;

Web3.providers.HttpProvider('http://localhost:8545') is asynchronous, so I put web3.isConnected() in componentWillMount() for the sake of waiting the operation to complete. If everything went well, browser will show “Connected to local node”. Right now, we can try out other functions like:

import React, { Component } from 'react';
import Web3 from 'web3';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {isConnected: false, peers: 0, version: ''};
    this.web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
  }
  componentWillMount() {
    if(this.web3 && this.web3.isConnected()) {
      this.setState({isConnected: true});
      if(this.web3.net.listening) {
        this.setState({peers: this.web3.net.peerCount});
      }
      this.setState({version: this.web3.version.node})
    }
  }
  render() {
    return (
      <div>
        <h2>Is connected?:</h2><br/> {this.state.isConnected?'Connected to local node':'Not Connected'}
        <br/>
        <br/>
        <h2>The number of peers:</h2><br/> {this.state.peers}
        <br/>
        <br/>
        <h2>Node info:</h2><br/> {this.state.version}
      </div>
    );
  }
}
export default App;

Note: Under the hood, web3.js communicates to a local node through RPC calls. Therefore, what API is available depends on what API your node offers over RPC. Three kind of web3 providers mentioned above have different API being offered and different ways to enable API. For me, I use--rpcapi to specify the API which geth is going to open when booting a node. Make sure that the API I’m using is offered by your node.

After saving src/App.js, the web page will show if web3.js connects to local node, how many peers your node connects to and your node information. Just like the picture below.

We have finished the simplest Dapp with React. I stop here and highly recommend you to play the other functions of web3.js to build things. Also, React is not the only JS framework that you can use. Other tools share the same core concept to build a Dapp. The purpose of this article is to show a perspective of beginning our journey into Dapp’s world.

(Most information comes from here and here. Usage example can be found, too)

Conclusion

I am still learning and open for advice & comment. If there are some errors, please let me know. Hope this humble article shed some light on creating a Dapp.