A Simple Distributed Hello World Application using React JS, a JavaScript library to make awesome UI by Facebook, Ethereum Truffle, a framework for Ethereum blockchain development, and Solidity, official language to write Smart Contracts in Ethereum.
This application uses React JS component oriented UI creation paradigm. All components are written in JSX and ES6 style and are combined to get a single build for production purpose using Webpack. This application uses Custom Hook design feature of React JS.
ES6 module creation along with import /export, async/ await is used. Babel is used to transpile all JSX code to vanilla JavaScript code. To install all the dependecies npm is used.
Back end is implemented using Solidity. Communication with the Smart Contracts is done using Web3 JS
For UI creation HTML5 and CSS3 are used. Grid, the new feature of CSS3 is used for layout creation purpose.
This is a responsive web application for viewing in both Mobile and Desktop.
- Code is rewritten with React JS 17
- Smart contracts are rewritten with Solidity v0.8
- Latest features of JavaScript i.e. ES6, ES7, ES8 is used
- This is Simple Hello World Application
- It is a Distributed Application
- Here React JS talks with Ethereum blockchain with the help of Web3 JS
- Communication with the Smart Contracts is supported using JSON RPC by Web3 JS
Clone the repository from Git Bash (Windows) / Terminal (Linux) using
git clone https://github.com/anijitsahu/ethereum-react-simple-hello-world-dapp.git
Now open 2 Git Bash (Windows) / Terminal (Linux) and navigate each to inside the directory by
cd ethereum-react-simple-hello-world-dapp
In one of them run Ganache by entering the following command. If you don't have Ganache installed please install it from here
ganache-cli
In another install all the necessary dependecies by using
npm install
Now, deploy the Smart Contracts first by
npm run migrate
Now go to /public directory and generate Webpack build (dev build) as
cd ./public/ && npm run dev
Finally serve the UI by entering the following command
cd ../ && npm run serve
In a Web browser, navigate to http://localhost:3000 and enjoy !!!
tested with 
Google Chrome v70 and 
Mozilla Firefox Developer Editon
Some screens of the application is given below for better understanding.
Desktop as well as Mobile version of the screenshots are given side by side.
Hello World Screen
