Create Your First BlockChain Ethereum DAPP With React
Photo: Google

Create Your First BlockChain Ethereum DAPP With React

Today I’m going to show you how to build an Ethereum Dapp with React.js! Let’s create a blockchain-based simple application powered by Ethereum smart contracts on the blockchain. I’ll walk you through step-by-step in the process from start to finish.

We’ll create the Ethereum smart contract first, deploy it to the blockchain and connect it with our React app.

Ethereum Smart Contract

When coding the ethereum blockchain, we actually write code, called Smart Contract with Solidity. We program and debug it on our own development environment (a personal blockchain run in local computer). Once it is ready, we deployed it to the public ethereum testnet (there are multiple ones), and finally launch it to the mainnet.

Contract deployment costs ether. We can get ether for free in testnet, but have to pay a small amount of ether (read money) to deploy contracts in the mainnet.

Setting up Ethereum BlockChain Project

For this stack, we’ll be using the Truffle.js suite of development tools. First, install Truffle, if not on your machine already.

I am going to use the existing smart contract code which I have created in my previous blog. In this blog, I have explained about setting up and using the ethereum blockchain using Truffle. Please click the below link to read more about this.

Deploy Your First Smart Contract With Truffle

This is our Hello smart contract.

So, we have two smart contract functions getGreeting() and setGreeting() in Hello.sol file.

We have our smart contract for the project. We can compile our code. We do so with Truffle.

truffle compile

Deploying our smart contract

To deploy our smart contract, we will create our migration file for our Hello.sol (see the previous post).

Next, we create a local Ethereum testing network (testnet) and deploy our code locally. We do so again with Truffle. Start a development blockchain:

truffle develop

Truffle should display a host and port, as well as a set of accounts with their corresponding private keys.

truffle develop

Using this development environment, we migrate our contracts to this local testnet:

truffle migrate or truffle migrate --reset

This will be our final ethereum smart contract project structure.

truffle project structure

Now, exit from truffle cli and create our React app.

.exit

truffle exit

Creating React App

Use create-react-app command to create your React app in your existing project.

npx create-react-app clientapp

It will create a clientapp folder in your HelloTruffle project.

truffle clientapp

We are going to install web3.eth library in our react app. The web3-eth package allows you to interact with an Ethereum blockchain and Ethereum smart contracts.

cd clientapp

npm install web3

Create The ABI Definition Of Your Smart Contract

In order to allow your JavaScript front-end to communicate with a Smart Contract, you need to create what’s referred to as the “ABI definition” of your contract.

The ABI of a given smart contract is created when a smart contract is compiled in Truffle. After a successful compilation, you will see a JSON file of the compiled contract in the folder /build/contracts.

In our Hello.json file, there should be a field named "abi" holding the contract’s ABI object, which is an array of objects for each function in a contract. We’ll copy that, and hold it in our client.

Hello contract abi json file
Hello contract compiled json file having abi info

Let’s create a smart contract ABI file named HelloAbi.js in clientapp/src folder.

Importing dependencies in our React app

In App.js we’ll import web3 and our ABIs.

Given provider is the default Web 3 provider, a.k.a. smart contract compatible Ethereum wallet, provided by the user’s browser. In many cases, this may be the Metamask browser extension.

Creating Smart Contract Instance

In order to interact with our smart contract, we are going to use web3.eth.Contract. The web3.eth.Contract object makes it easy to interact with smart contracts on the ethereum blockchain. When you create a new contract object you give it the json interface of the respective smart contract and web3 will auto convert all calls into low level ABI calls over RPC for you.

This allows you to interact with smart contracts as if they were JavaScript objects.

new contract

[crayon-5f5817e77883e664384944/]

Creates a new contract instance with all its methods and events defined in its json interface object.

App.js

[crayon-5f5817e778848559098538/]

Here we created contractAddress and HelloContract instance in App.js file.

Here is the complete App.js file.

Adding MetaMask to Chrome Browser

To interact with Ethereum through the app, we need a wallet that provides signatures for each smart contract action. For this example, we’ll use Metamask as our signature provider, however, more signature providers exist. Metamask is a browser extension that serves as an Ethereum wallet.

Once Metamask is installed on your browser, we configure it to our local testnet using the address Truffle provided. In our case, that address is found in the line Truffle Develop started at http://127.0.0.1:9545/ . We go up to networks, click Custom RPC, and enter the URL provided by Truffle.

MetaMask truffle

Once we’ve added our testnet RPC, we import the accounts Truffle provided. Only one account is needed for this app, but Truffle provides ten accounts if you need to test more complex interactions. In this example, the private key 26db574a49ba302ed5763af2aff0f9b692db85fb63b2c8d6d6bed05fbdbb765b provided by Truffle is imported, containing 100 testnet Ether.

Click on the MetaMask circle and select the Import Account option from the menu.

MetaMask Account import
MetaMask Import screen

To get truffle keys, type truffle develop command and it will show 10 private keys. Use any private key. I am using my first private key to import this account. Enter your private key in the Import tab and click on the Import button.

Once imported, it will show below the account screen with 100 ETH.

Truffle account import

Running React app and do the transaction

Once everything is set up, run below command to run your react app in the Chrome browser.

npm run start

smart contract screen

Enter any text like Hello Test and press the Set Greeting button to initiate the ethereum transaction. It will show below MetaMask’s connect confirmation screen.

MetaMask connect request

Click on the Connect button to proceed. It will show the Gas Fee and Total transaction amount. Click on the Confirm button.

transaction gas fee

Once you click on the Confirm button, a transaction will happen, and it will be shown in your browser’s console window. It will show transaction detail like below.

MetaMask Transaction detail
transaction confirmation

Similarly, when you click on the Get Data button, it will show your data.

Adesh

Hi, I am Adesh. I am a senior software engineer having more than 12 years of software development experience. I am a full stack developer and interested in writing the technical post on programming. I am currently working in New York City area.

This Post Has One Comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.