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.
This is our
Hello smart contract.
So, we have two smart contract functions
We have our smart contract for the project. We can compile our code. We do so with Truffle.
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 should display a host and port, as well as a set of accounts with their corresponding private keys.
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.
Now, exit from truffle cli and create our React app.
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
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.
npm install web3
Create The ABI Definition Of Your Smart 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
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.
Let’s create a smart contract ABI file named
Importing dependencies in our React app
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 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.
Creates a new contract instance with all its methods and events defined in its json interface object.
Here we created
HelloContract instance in
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.
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.
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
Once imported, it will show below the account screen with 100 ETH.
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
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.
Click on the
Connect button to proceed. It will show the
Gas Fee and Total transaction amount. Click on the
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.
Similarly, when you click on the
Get Data button, it will show your data.