How to Connect a React App to the Blockchain

Develop Ethereum DApps with React

Prerequisite: Experience developing with ReactJS and a basic understanding of Ethereum smart contracts.

The full working project code is available on Github.

Introduction

This article explains step-by-step instructions for how to use the Truffle Suite to create a React application that reads data from the blockchain. We are going to use the same smart contract described in this article. Instead of walking through the details of the smart contract, we’re going to focus on how to make a React web application that reads from the blockchain and displays the data.

There will be codebase checkpoints throughout this tutorial to let you see what your code should look like at each stage.

Create the Project

If you’ve followed this article, then you’ll have already installed the correct dependencies. If you haven’t, I highly recommend working through it to gain an understanding of smart contract development and the deployment lifecycle.

Firstly, create a new project directory and navigate to it from your terminal. I’m calling my project truffle-dapp:

mkdir truffle-dapp
cd truffle-dapp/

Truffle Box

We’re using Truffle Suite to create our DApp, a popular framework for developing full-stack decentralized applications on the Ethereum network.

Truffle provides some great boilerplate projects called Boxes that come pre-configured to let you focus on functionality rather than fiddling with configuration. We’re going to use the React Box, which comes with a React front end ready built. Inside your project directory, run the following:

truffle unbox react

This may take a little time, but once completed, you should see a folder structure like Figure 1 in your text editor.

client/ contains our front-end React code. We’ll need to delve into here to make changes to our webpage once our contracts have been deployed.
contract/ is where our Solidity smart contract code is stored. You’ll notice that there are already two smart contracts in here: one called Migrations.sol and another called SimpleStorage.sol. Migrations.sol is used during the migration process, whereas SimpleStorage.sol is an example contract that comes with the React Truffle Box. We’ll be adding another in this walkthrough.
migrations/ is where our migration logic resides.
test/ is where we test our smart contracts to ensure they function as expected.
truffle-config.js contains information about networks, compilers, file locations, and other custom configurations for the Truffle framework to know where our things are.

Migrating

Open up Ganache, our local blockchain, and make a note of the Network ID and RPC Server information. Copy this information into your truffle.config.js file in the project root directory so that it looks like Figure 2.

Make sure your network name is development and not develop.

Next, run the following code in your terminal to migrate the boilerplate smart contracts to our Ganache blockchain:

truffle migrate

Once completed, run existing boilerplate tests to ensure the deployed contracts work as expected:

truffle test

The output should look something like Figure 3:

Smart contract

Now we’re going to create our new smart contract. We’re using the same contract we used in this article. Firstly, create a new file within the contracts/ folder in your project called HelloWorld.sol. Copy the contents of Figure 4 into the file and save it.

Next, we need to ensure that our project deploys the correct contract. Inside the migrations/ folder, open up 2_deploy_contracts.js and copy the code from Figure 5 into it.

Here, we’re instructing Truffle to deploy both our HelloWorld contract and the SimpleStorage contract.

Finally, run the following command to migrate the new contract to the network:

truffle migrate --reset

In the output, you should see our HelloWorld contract being deployed, as shown in Figure 6:

Figure 6: Deployment of HelloWorld contract.

Test

We’re also going to pull in a Solidity test file to test HelloWorld.sol. Create a new file in the test/ folder called TestHelloWorld.sol, paste the contents of Figure 7 into it, and save.

Check that all tests pass by running the following command in your terminal:

truffle test

Codebase checkpoint: version 0.0.1

React Client

Before we do any React coding, we need to make sure our browser can interact with sites that access the blockchain. We do this by using a browser extension called MetaMask.

MetaMask

MetaMask is a browser plugin that allows users to make Ethereum transactions through regular websites. Head over to their website, install the extension and create an account.

Next, click on the MetaMask icon in your browser and log in. There, you need to add a custom RPC so the extension can access your local blockchain. Use the information from Ganache, head back to MetaMask, click Custom RPC, and enter the information. You should see it appear in the list of connections as shown in Figure 8 with http://localhost:7545. Connect to this network by clicking it.

MetaMask creates a wallet address when you create an account, but you can also import other wallet addresses provided you have control of the private keys. This is great for testing because we can use the accounts provided by Ganache to interact with our local blockchain.

Head over to Ganache and copy the private key from the first address in the list. You can display the private key by clicking the key icon on the right side of the row for each account, as shown in Figure 9.

Head back to MetaMask in your browser and open the Accounts panel by clicking on the icon in the top-right corner, as seen circled in Figure 10.

Click Import Account, paste the private key in, and click Import. This will add the account to your list of accounts. Select that account. Great! Let’s test it out.

Front end

Let’s test our React client. As I mentioned earlier, the Truffle Box provides some React boilerplate. In your terminal, navigate into the client/ folder and run the following:

npm run start

This should open a new browser tab and attempt to connect your browser to the blockchain. You’ll get a notification from the MetaMask extension attempting to connect. Confirm it. The webpage displayed should look like Figure 11.

Next, we’re going to load the new HelloWorld contract, retrieve the greeting by calling getGreeting(), and display it on this page.

Querying the blockchain

Head over to your text editor and open up App.js in the client/ folder.

First, import the compiled contract. Add the following line to the import statements:

import HelloWorld from "./contracts/HelloWorld.json";

Then we need to do the following:

Inside componentDidMount(), we need this.setState() to include the HelloWorld contract, where it currently only has the SimpleStorage contract.
Once we’ve done that, we need runExample() to use call getGreeting() on the HelloWorld contract just as it calls get() on the SimpleStorage contract.
Finally, we need a new div in the render() method to display the value.

Try this yourself and check the browser to see if your changes have the desired effect. When finished, your App.js file should look similar to the code in Figure 12.

Congratulations! You have successfully created a Truffle project using the React Truffle Box, added a smart contract to the project, retrieved data from this contract, and displayed it in the React app. Well done! I hope this inspires you to explore blockchain development more and I encourage you to follow some of the links below to expand your knowledge.

Codebase checkpoint: version 0.0.2