Integration of Web 3.0 with React Framework

Introduction

Web 3.0 signifies the next phase of the internet, emphasizing decentralization, blockchain technology, and smart contracts. Integrating Web 3.0 with popular front-end frameworks like React can bring enhanced capabilities to decentralized applications (dApps). React, known for its efficiency in building user interfaces, can seamlessly combine with Web 3.0 technologies to offer robust and user-friendly dApps.

Step 1. To begin with, ensure you have Node.js and create a new React project using the Create React App.

npx create-react-app web3-react-app
cd web3-react-app

Step 2. Next, install the Web3.js library.

npm install web3

Step 3. Setting Up Web3.js.

To use Web3.You need to initialize your React project. Here’s how you can do it in the App.js file.

import React, { useState, useEffect } from 'react';
import Web3 from 'web3';

function App() {
  const [account, setAccount] = useState('');
  const [balance, setBalance] = useState('0');

  useEffect(() => {
    loadWeb3();
    loadBlockchainData();
  }, []);

  const loadWeb3 = async () => {
    if (window.ethereum) {
      window.web3 = new Web3(window.ethereum);
      await window.ethereum.enable();
    } else if (window.web3) {
      window.web3 = new Web3(window.web3.currentProvider);
    } else {
      console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
    }
  };

  const loadBlockchainData = async () => {
    const web3 = window.web3;
    const accounts = await web3.eth.getAccounts();
    setAccount(accounts[0]);
    const balance = await web3.eth.getBalance(accounts[0]);
    setBalance(web3.utils.fromWei(balance, 'ether'));
  };

  return (
    <div className="App">
      <h1>Hello, Web 3.0!</h1>
      <p>Your account: {account}</p>
      <p>Your balance: {balance} ETH</p>
    </div>
  );
}

export default App;

Step 4. Handling Smart Contracts.

To interact with smart contracts, you need the contract ABI and address. Here’s an example of a simple smart contract interaction.

import React, { useState, useEffect } from 'react';
import Web3 from 'web3';
import { ABI, ADDRESS } from './contract';

function App() {
  const [account, setAccount] = useState('');
  const [contract, setContract] = useState(null);
  const [data, setData] = useState('');

  useEffect(() => {
    loadWeb3();
    loadBlockchainData();
  }, []);

  const loadWeb3 = async () => {
    if (window.ethereum) {
      window.web3 = new Web3(window.ethereum);
      await window.ethereum.enable();
    } else if (window.web3) {
      window.web3 = new Web3(window.web3.currentProvider);
    } else {
      console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
    }
  };

  const loadBlockchainData = async () => {
    const web3 = window.web3;
    const accounts = await web3.eth.getAccounts();
    setAccount(accounts[0]);
    const contract = new web3.eth.Contract(ABI, ADDRESS);
    setContract(contract);
  };

  const getData = async () => {
    if (contract) {
      const result = await contract.methods.getData().call();
      setData(result);
    }
  };

  return (
    <div className="App">
      <h1>Hello, Web 3.0!</h1>
      <p>Your account: {account}</p>
      <button onClick={getData}>Get Data</button>
      <p>Data from contract: {data}</p>
    </div>
  );
}

export default App;

Conclusion

Integrating Web 3.0 with React empowers developers to create decentralized applications with enhanced user experiences. By leveraging Web3.js and React’s component-based architecture, developers can interact with blockchain networks seamlessly. This integration not only brings decentralization to the forefront but also provides a scalable and efficient way to build modern web applications that are secure and transparent.