Build a Real-World dApp With React, Solidity, and Web3.js

Build your first dApp and interact with smart contracts

8 min readDec 6, 2021

Before move on with today’s blog post I would like mentioned that if you are looking for change in you career or looking for new job both remote and hybrid then I would recommend to pay a visit to https://distributedremotejobs.com where you can find amazing opportunities waiting for you.

Let’s jump into our today’s blog post on web 3.

The world of online technology is transitioning fast towards web 3.0. It seems like people are done with centralized systems with their digital privacy being maligned on daily basis by huge organizations. Therefore, they want a solution and web 3.0 seems to be the answer for now.

This blog post isn’t meant to cover the know-hows of blockchain and decentralized systems. Instead, this is for those who would like to build online solutions for users, customers, and clients to guarantee them better privacy and security for their data.

Having clarified that, in this article I am going to show you the ABC of how to make a decentralized application from scratch and set up your development environment. Below are some of the topics we are going to cover.

Tools
Setup Tools
Write Code

A Look at the Tools

Below are some of the tools I am going to use in this blog post.

b. Ganache

d. Metamask

In order to get going, I would like to briefly touch a little bit about the above-mentioned tools.

The first one, Truffle Framework offers a set of tools for developing Ethereum smart contracts. It offers tools such as smart contract management, deployment and migration, network management, development console etc.

Ganache is a personal blockchain, which is a local development blockchain that can be used to mimic the behavior of a public blockchain.

Solidity is an object-oriented, high-level language for implementing smart contracts. To know more about Solidity please click here.

Most browsers currently do not allow us to connect to the blockchain network for that reason, I would use the Metamask chrome extension which will allow us to connect our chrome browser to the blockchain network.

For UI or Front end development, we are going to use React library which is one of the most widely used JavaScript libraries among the front-end communities.

Web3.js is a JavaScript library that allows us to communicate with the Ethereum blockchain. It turns our React application into blockchain enabled application.

Setting Up Tools

Now that I have briefly explained the tools set that are going to be used in this blog post, it's time to get into it and set the tools up.

First and foremost, I would like you to download Truffle Framework and install it with the below command:

npm install -g truffle

Next, go ahead and download and install Ganache. Once you do that and open it, you will get the below screen:

Next, we need Metamask.

Go ahead and add Metamask extension to your google chrome and get to the screen when you get something like below. In order to set up Metamask please follow this blog post.

Writing Code

Now that the tools are set up, let’s proceed to the next step which is writing smart contracts. To do that, open a terminal and create a folder in your projects folder with the below command:

mkdir blockchain

Now make a folder inside the blockchain folder with the below command:

cd blockchainmkdir contractscd contracts

Now run the below command to create a truffle project which will allow us to develop smart contracts:

truffle init

With the above command, you should get an output like below:

Now open your truffle project in your favorite text editor. I am going to use Sublime Text. You should see the following folder and files structure:

Inside contracts folder, we are going to write our smart contracts.

Within the migrations folder, we are going to migrate our newly created smart contracts.

Inside test folder, we usually write tests to test our smart contract however, it is beyond the scope of this blog post therefore, we are not going to get into that. I would highly recommend writing tests for your smart contracts before deploying them to public blockchain nodes.

truffle-config.js file contains all the configuration of or truffle project.

Now let’s write our smart contract. Create a new file and name it contacts.sol inside contracts folder. Now open that file and write the below code inside it:

pragma solidity >=0.4.22 <0.9.0;

This should always be the first line in your smart contract file. With this, we are specifying the version of solidity.

Now let’s make our first smart contract with code:

We can write a smart contract using the contract keyword and followed by the name of the contract which in this case Contacts.

Now to track the number of contacts inside our smart contract, we will create a state variable.

This is a special variable and any data we write into this variable will be stored in blockchain storage. We are using a special modifier keyword i.e. public to have access to this variable outside of the smart contract. Then we are assigning 0 to this variable.

Now that we have a state variable and it has a value in it. Let’s go into the front end part and let’s try to access this public state variable first. With this approach, we will establish communication between React application and our smart contract.

Run the below commands inside the blockchain folder to create a react application.

As you can see we also added web3.js as a dependency for this project to make our react application interact with our smart contract.

Now open that contacts folder in your favorite editor. I am using Sublime Text.

We are not going to set up the folder structure and implement complex architecture because that is out of the scope of this blog post.

We’ll write all our code in App.js file. Therefore, go ahead and open the file in your editor.

Write below code inside App.js file:

We are importing a couple of hooks from React and Web3 from Web3.js. Now let’s create a state variable like below:

Now inside useEffect hook we will with our smart contract like below:

Now in order to run this client-side successfully, we need to take a few steps in the backend. Let’s get back to contracts folder. First, open truffle-config.js file and add the below properties:

Now inside migrations folder, create a new file and name it 2_deploy_contracts.js and paste the below code:

Now in the terminal, type the below code to migrate your contract:

truffle migrate

You should see an output something like below:

Now go back to the front end folder and run the below command to run the application:

yarn start

This will open your React application in your browser and it will trigger Metamask to interact with your blockchain network. You should see a screen like below:

In the above screen, click next and you should be presented with the below screen.

Now click connect. Then you should see the output on your browser with your account number like below:

Now that we have successfully interacted with our smart contract and retrieved account id. Let’s proceed with making a new function inside our smart contract to get a list of contacts and send it over to the front end and render them on the view.

Let go back to contracts folder and open Contracts.sol file and add the below function.

Now migrate this contract again as we made changes to this because smart contracts are immutable.

truffle migrate

Now let’s get back to the front end i.e. contacts folder. Create a new file config.js inside src/ folder and paste the below code in that.

Now import both smart contract address and ABI into App.js file like below and also update load function with below code:

The above code will get all of the contacts from our smart contract and set them in contacts state variable. The code is very well commented on and explained.

Now let’s render all the contacts in ul like below.

As you can find the updated code inside return — when you run this react app now in browser, you should be able to see something like below:

If that is what you see then congratulations, you have just built your first dApp with the smart contract and web app that interacts with your smart contract on the blockchain.

Now that you know how to retrieve information from the smart contract, go ahead and improve this further by adding new contacts, updating them and deleting them with full CRUD operations.

That's it from this article. The entire project can be found in the below GitHub Repository:

GitHub — zafar-saleem/blockchain-tutorial

Note: This is a sample project for my blog on medium which can be found here. Clone this repository cd…

github.com