⚡Exercise 10 - Part 1 : Connect React to Smart Contract (read/write functions)

Опубликовано: 15 Февраль 2026
на канале: Soft.Tomatoes

3,640

⚡⚡⚡ REACT + SOLIDITY + GOERLI + HARDHAT + METAMASK + ETHERS + ALCHEMY ⚡⚡⚡

Hello, in this video, we will create a simple full stack React + Smart Contract application. We will use Hardhat for deploying our contract and we will deploy our contract to Goerli test network. we will use Ethers package to build connection between React and Smart Contract. We will use Dotenv package to store our sensitive data. We will get node service from Alchemy. We will read data from smart contract and display it on the browser. We will also create a write function and change the data on the smart contract. Steps are:

1) create a React application and make a cleanup
2) install all hardhat packages including ethers and dotenv.
3) Create the react component and connect it to metamask.
4) Create a hardhat project and create a simple smart contract inside Contracts folder. Then add deployment code to "deploy.js" under "scripts" folder.
5) Then update hardhat.config.js file with necessary code.
6) Create .env file add inside PRIVATE_KEY from Metamask and PROVIDER_URL from Alchemy.
7) Deploy contract to Goerli.
8) Grab contarct account address and go to App.js component and the remaining functions.
9) First create the function that will connect react to smart contract.
10) Then create another function to access a variable from smart contract and display its value on the webpage.
11) Then create a write function and change the value of a variable on our contract.

Note: React components re-render when the state of the components change. This will have an effect on our code. We will follow a certain order to not face error.

Github:
https://github.com/abdulhakim-altunka...

Step-by-Step guide:
https://github.com/abdulhakim-altunka...

NOTE: All videos on this channel are for exercise purposes. For tutorial purposes I kindly advise you to watch great teachers below:

Solidity:
1) Smart Contract Programmer:    / @smartcontractprogrammer
2) Eat the Blocks:
   / eattheblocks
3) Dapp University:
   / dappuniversity

Node-React-Javascript:
1) The Net Ninja:
   / thenetninja
2) Dave Gray :
   / davegrayteachescode

For comments & questions:
[email protected]