How to create a ReactJS dApp with the OnFlow emulator

Decentralized applications, or dApps, are apps powered by smart contracts, which provide new opportunities for handling financial operations. 

In this detailed article, we will touch on the following:

• How to build a ReactJS dApp on the Flow blockchain
• How to build and deploy smart contracts with the OnFlow emulator

What are decentralized applications?

A dApp is an open source, blockchain-based application mainly popularized by the Ethereum network in 2014. In terms of functionality, a dApp is acting just like traditional applications, but with broader functionality.

A dApp’s back-end code runs autonomously in a decentralized network, like the OnFlow network, for example. In contrast, traditional applications have their back-end parts running on centralized servers.

Decentralized applications compared to traditional applications. By Abto Software

What are smart contracts?

Smart contracts are programs used for agreement execution, running when predetermined conditions are met. They allow involved parties to safely release funds, register vehicles, issue tickets, and even send notifications without intermediaries.

Smart contracts provide for high-level security and transparency, speed, accuracy, and notable cost efficiency. These can be used in various different industries, including healthcare, distribution, retail, and more.

Smart Contracts. By Abto Software

Building a ReactJS dApp with the OnFlow emulator: Step-by-step guide

Further in this article, we’ll explain how to build a client-side application that interacts with our smart contract in the blockchain network.

The described client-side application will have the following core functionality:

• Log-in and log-out buttons
• User profiles
• The opportunity to update user profiles
• Account address directly connected to the blockchain network

Step 1. Installing dependencies

• Install the Node Package Manager (NPM)
• Install the Flow CLI to run local emulator
• Clone the fcl-dev-wallet repository in a separate folder to run dev wallet and the npm install

Step 2. Setting up ReactJS dApp and the npm packages

Create a ReactJS dApp:

Install the OnFlow packages from the my-first-dapp directory:

Step 3. Setting up Tailwind CSS

This step is optional, but if you like, you can click here and read how to set up Tailwind CSS.

Step 4. Running the local emulator with the dev wallet

In the fcl-dev-wallet repository, you will have to run these two commands:

Step 5. Creating the AppJS component with built-in log-in and log-out buttons

In the src/AppJS file, you can create the AppJS component with the log-in and log-out logic:

Step 6. Running the ReactJS dApp 

Run the npm-start command and open the page in http://localhost:3000/

Running ReactJS dApp – actions sequence. By Abto Software

Step 7. Creating first smart contract

Create the Profile.cdc file in the fcl-dev-wallet/cadence/contract directory:

Profile.cdc file – example. By Abto Software

Add the smart contract to the configuration file of the fcl-dev-wallet/flow.json directory:

Deploy the Profile.cdc file to the local emulator:

Step 8. Creating first cadence script 

Extract data from the blockchain network:

Step 9. Creating first blockchain transaction

Create the blockchain transaction to modify the data in the blockchain network:

Step 10. Updating content

Add the cadence script and the blockchain transaction to the AppJS component and create a from to update the content (user profile):

Now you can test you first decentralized application:

Running created dApp – actions sequence. By Abto Software

Why you should care about dApps

There are around 4,000 decentralized applications being utilized in government, healthcare and even gambling. And the positive dynamics undoubtedly attest the feasibility and profitability of adopting blockchain solutions. When speaking about their market dominance, decentralized apps are unlikely to replace traditional apps. However, they are expected to get more momentum in the business environment.

Here are some statistics to consider:

• Over 199000 Bitcoin transactions are carried out in a single day
• 10 percent of the global population own cryptocurrencies
• 16 percent of Americans have invested in cryptocurrency
• The global Blockchain market is expected to reach $34 billion by 2026

In dApps, personal and business data is stored in separate immutable blocks on the blockchain environment. This means, sensitive data is protected from exploitation, one of the most serious issues, which might be faced by both young startups and mature international corporations.

Another benefit of dApps is the verifiable behavior, which also provides for better security and transparency. Smart contracts completely eliminate the need for mediators, no matter the nature of operation.

How we can help

By leveraging deep expertise in implementing blockchain technology, Abto Software delivers scalable decentralized applications to help market-driven businesses remain competitive in the blockchain landscape. We cater to various different industries including healthcare, retail, internet, and other.

Our services:

• Decentralized applications, or dApps
• Smart contracts
• Decentralized storage
• Decentralized finance
• Upgrade, porting and integration of dApps
• Corporate governance

And more!

Invest in blockchain technology and enjoy data safety, cost efficiency, reduced downtime, and borderless, simplified operations!

p.s. Abto Software is ready to help you with that!