Tutorial: Building Dapp Frontends with React & Network.js

Developing a service or business on Ethereum can be difficult, due to the intricacies of working with a blockchain and the novel UX / UI issues to solve. This series of guides aims to serve as a quickstart to Ethereum dapp development, with a focus on front-end solutions. Thankfully, you don’t need to reinvent the chain. There are many pre-existing tools and services that can be leveraged to get a dapp running quickly, including:

  • Infura as a JSON-RPC connection to the mainnet or testnets;
  • MetaMask to serve as the user’s wallet and web3 provider;
  • OpenZeppelin for contracts and Network JS, a javascript library for web3 (i.e. blockchain development).

Using these products together has the benefit of replacing database setup and user credential management, resulting in a quick-to-start blockchain infrastructure. In this tutorial, we’ll create a React dapp using Network JS that can interact with MetaMask, which uses Infura as its connection to the Ethereum mainnet.

The code for this can be found here: https://github.com/INFURA/developer-resources/tree/master/guides

Straightforward and simple, great tutorial! Thank you very much!

I have a problem though.

The only browser that works fine for me is Brave. Chrome and Firefox cannot display accounts and balances due to this error - “web3Context.requestAuth is not a function”. Network is displayed everywhere and updates perfectly.

Hey @porobov, that’s odd because I used Chrome for this (including the gifs) on Mac. However I do see the error on Firefox. Try updating to the latest version of Chrome?