Blockchain Development Programming Tutorials, Guides & Best Practices

• Description: A block explorer and analytics platform for Ethereum.
• Key Features:
• Provides real-time data on Ethereum blocks, transactions, and gas prices.
• Includes charts and statistics on Ethereum network performance.
• Offers detailed contract and token information.
• Integrates with Etherscan and other blockchain services.
• Website: Etherchain

• Description: The official documentation for the Ethereum blockchain, covering topics from basics to advanced development.
• Key Features:
• Comprehensive guides on setting up development environments.
• Tutorials on smart contract development and DApp creation.
• Detailed explanations of Ethereum concepts and protocols.
• Regularly updated with the latest information.
• Website: Ethereum Documentation

Next, you need to compile your contract to ensure there are no errors.

• Run the following command in your terminal:

In your React application, create a component Dapp.js that connects to the smart contract:

import React, { useState, useEffect } from 'react';
import Web3 from 'web3';
import MyDapp from './contracts/MyDapp.json';

function Dapp() {
  const [message, setMessage] = useState('');
  const [newMessage, setNewMessage] = useState('');
  const [web3, setWeb3] = useState(null);
  const [contract, setContract] = useState(null);
  const [account, setAccount] = useState('');

  useEffect(() => {
    const init = async () => {
      const web3 = new Web3(Web3.givenProvider || 'http://localhost:7545');
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = MyDapp.networks[networkId];
      const contractInstance = new web3.eth.Contract(
        MyDapp.abi,
        deployedNetwork && deployedNetwork.address,
      );
      const accounts = await web3.eth.getAccounts();
      setWeb3(web3);
      setContract(contractInstance);
      setAccount(accounts[0]);
      const initialMessage = await contractInstance.methods.getMessage().call();
      setMessage(initialMessage);
    };
    init();
  }, []);

  const updateMessage = async () => {
    await contract.methods.setMessage(newMessage).send({ from: account });
    const updatedMessage = await contract.methods.getMessage().call();
    setMessage(updatedMessage);
    setNewMessage('');
  };

  return (
    <div>
      <h1>Current Message: {message}</h1>
      <input
        type="text"
        value={newMessage}
        onChange={(e) => setNewMessage(e.target.value)}
      />
      <button onClick={updateMessage}>Update Message</button>
    </div>
  );
}

export default Dapp;