Building dApp using Ethereum and React

Posted by : at

Category : javascript   blockchain   react

Building dApp using Ethereum and React

What are dApps ? How to build one ?

DApps - Decentralized Applications

Decentralized applications are similar to conventional web applications, but that run on blockchain. While frontend web applications use APIs to interact with servers and databases, Dapps use Smart Contract interfaces to interact with the blockchain.

The code of a Dapp is client-side code (usually Javascript), running in a browser.

The backend of a Dapp is one or more Smart Contracts deployed on a blockchain.

Typically, to use a Smart Contract , you pay with cryptographic tokens like ETH rather than (for example) AWS or Google Cloud Credits

You do not have to create your own currency to create or to use a DApp.

To use a DApp, the user needs to install an Ethereum node or a browser plugin on their computer. For example:

- MetaMask (browser plugin)

- Parity (PC program & browser plugin)

- Mist (PC program with built-in DApp browser)

There are no ‘Ethereum servers’, there are only Ethereum nodes. These nodes run Ethereum contracts.

# Rules for an APP to be called Dapp !

The Application’s data and records of operation must be cryptographically stored in a public, decentralized blockchain in order to avoid any central point of failure.

The Application must be completly open source, it must operate autonomously, and with no entity controlling the majority of its tokens.

The Application must use a cryptographic token ( Bitcoin or a token native to its system), which is neccessary for access to the application and any contribution of value from (miners/farmers) should be rewarded in the application’s tokens.

The Application must generate tokens according to a standard cryptographic algorithm acting as a proof of the value nodes that are contributing to the application,,

# Tech Stack for building our Ethereum DAPP using Javascript

## Smart Contract Development

- [Solidity]( - is the primary programming language for Ethereum, and smart contracts create the “server” for a dApp on the Ethereum chain.

- [OpenZepplin]( - Framework to build secure smart contracts

- Javascript ES6 - Our language of choice

## Storage

- [IPFS]( or InterPlanetary File System, is a decentralized storage option that allows users to spread their storage needs across a series of nodes.

## Testing Smart Contracts

- [Truffle]( - Framework for Building, Testing and managing Smart Contracts

- [Ganache]( - Fire up a personal Ethereum Blockchain with built in Block Explorer for testing the chain.

- [MetaMask]( is a wallet used for Ethereum, as a wallet is necessary to fund the nodes that are running the dApp (and the IPFS nodes that are storing data). It is also necessary to hold funds accepted by the users of the dApp.

## Backend Server

- [NodeJS]( - For Creating our Backend Server

- [ExpressJS]( - API Framework for NodeJS

## Frontend UI

- [ReactJS]( - Library for building UI Components

- [Redux]( - State Management Library for our App.Powerful when combined with React

- [Webpack]

- [React Bootstrap]( - Bootstrap UI components built for React

# Transactions (Optional )

- [Metamask]( -  web3 provider and extension for transaction signing. is a browser extension that allows web applications to interact with the Ethereum blockchain. For users, it works as an Ethereum wallet, allowing them to store and send any standard Ethereum-compatible tokens (so-called ERC-20 tokens).

For developers, it allows you to design and run Ethereum DApps right in your browser without running a full Ethereum node (which is what developers had to do before Metamask was available). MetaMask talks to the Ethereum blockchain for your web application.

# So whats the process ?

This is the real confusion for many developers on where to start and how to combine all the technologies together.

- Step 1. Build a smart contract using Solidity , OpenZepplin and Truffle

- Step 2. Create a private blockchain to test the smart contract using Ganache

- Step 3. Create a Backend REST API service using Node and ExpressJS

- Step 4. Creating a FrontEnd client using NodeJS and React and Redux

- Step 5. Connect the React client with smartcontract using Testrpc network by utilizing web3 api.

- Step 6. Connect the React Redux Client with REST API built in Step 3

- Step 7. Hosting our App in IFPS

- Step 8. Using Metamask to do transactions for the App ( For that you need a Ethereum Wallet and some Ethers to Spend :P )

Useful Links