Blockchain React TodoList App Part-1

In this tutorial , we will see how we can create react application todolist Blockchain App.

Prerequisite:

1-NPM Pacakage
2-Ganache (If running localhost)
3-Metamask Plugin (to interact with Blockchain Network locally)

Step- 1 Create react app by using below cmd.

npm install -g create-react-app

Step-2 let’s create the project and run webserver like this.

cd demo-react-todolist
npm run start

Your browser should open automatically. You should see a web page like this:

Step-3 Let’s update pacakage.json to update all dependencies.

{
  "name": "demo-react-todolist",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.5.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.2.2",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
    "web3": "^1.0.0-beta.46"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not ie <= 11",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Step-4 Now we can install these dependencies like this:

$ npm install

Step-5 After installing all dependency restart web server. Next we will connect our app to the blockhain and list out the current account that we’re connected with. In order to do this, let’s clear out all of the code from the src/App.js file, and replace it with this code below:

import React, { Component } from 'react'
import Web3 from 'web3'
import './App.css'

class App extends Component {
  componentWillMount() {
    this.loadBlockchainData()
  }
  async loadBlockchainData() {    
    const web3 = new Web3(window.ethereum.currentProvider || "http://localhost:8545")
    var accounts = await web3.eth.getAccounts()
    console.log("accounts",accounts[0])
    const network=await web3.eth.net.getNetworkType()
    this.setState({ account: accounts[0]})
    
    console.log("logaccount",web3.eth.defaultAccount)
  }
  constructor(props) {
    super(props)
    this.state = { account: '' }
  }
  render() {
    return (
      <div className="container">
        <h1>Hello, World! </h1>
        <p>Your account: {this.state.account}</p>
      </div>
    );
  }
}
export default App;

Let’s see what above code does.

First we are importing web3 library which helps to connect with Blockchain network.

Next, we use React’s build in function componentWillMount() to load all the blockhain data and instantiate new connection with web3 by passing in the url to Ganache http://localhost:8545.

Then, we load the current account we’re connected with. We add that to React’s state object, which allows us to track the current state of the component and read the account from the state object and render it within the HTML output from the render ()

In part-2 we will see how we can create list and perform CRUD operation.

Leave a Reply

Your email address will not be published. Required fields are marked *