Building decentralized applications (Dapp) with Reacjs

Tram Ho

Preamble

First we will build an application with the smart contract that was built in the previous article

The frontend will use create-react-app to init project:

If you don’t already have the create-react-app package, install it with the following command:

After Happy Hacking! then we will reconfigure a few packages , although the scale of this demo app does not need to use redux because it does not contain too many components.However, to guide complex applications later, I will temporarily apply it. Add redux to manage states .

=> Therefore requires readers to have a basic knowledge of redux

Add the dependencies :

Add 3 folder action , reducers and store to the project:

Next is adding contracts in the smart contract’s build folder after being migrated to the src to make it easier to interact.

Application deployment

Actions

The first will start from the actions folder,

The first will be an action that requires a connection to the metamask to obtain web3. To call metamask pop-up, first add the getWeb3 () function to the utils / getWeb3.js folder:

Write the first function web3Connect ():

Next will be the Init action of the contracts :

This function is a bit more strange because it will need the file we deployed in the contract section. Our job is to add the folder contract from the build folder above. That said, it only takes two things, ABI and Address, to create an instance that interacts with the blockchain

Finally add 2 sendCoin and getBalance actions :

Enough action and now continue to build reducer

Reducer

As the actions have been built above, we will build the corresponding initialStates and action types

Store

Building the store , I will use the thunk for the Middleware

Finally, to provide the store in every component of the application, we need to wrap them in the Provider

Thus, having completed the management of the State , now comes the part of building the interface and application of the app

App

With the nature of a basic article, I will demo the interaction with Blockchain with 2 simple methods:

  • Create transaction : Through sendCoin function has been built in actions
  • Read information : Read the balance data of the user via the getBalance function

First we will force the user to enter the metamask , so we will call the web3Connect function as soon as the component is mounted . To optimize the amount of code, I will use 2 Hook :

  • useEffect : Similar to componentDidMount effect but used for function component
  • useDispatch : Instead of us using mapDispatchToProps

Add to App.js :

At this point, when entering the site, it will automatically sell popup metamask that requires login if the user is not logged in and will automatically get the account address.

Next, display the balance and account , add a few Hook useSelector to get the value directly from the store :

And to finalize the final part, we will create a small form to sendCoin , consisting of two receiver and amount values ​​using useState :

The result

Finally, the result will look like this:

The interface is quite basic but basically the functions have run pretty well. Through the above article, I have instructed to create a basic Dapp with Reactjs, the next article I will guide to build on Vuejs and manage states with Vuex.

You can refer to the code here: https://github.com/tranchien2002/EthCodeBased/tree/add-react

Share the news now

Source : Viblo