Initialize Web3 on Client Side
web3.js allows developers to interact with the blockchain without running the Node
​Web3 is a JavaScript Library to interact with Ethereum Blockchain.
The following code shows a new way to start up a dapp that can be used today in both legacy and modern dapp browsers:

Install web3

1
npm install web3
Copied!
Quote.js
1
import React, { useState, useEffect } from "react";
2
import Web3 from 'web3'
3
​
4
let web3;
5
​
6
function App() {
7
8
useEffect(() => {
9
(async () => {
10
if (window.ethereum) {
11
// Modern DApp browsers
12
web3 = new Web3(window.ethereum);
13
try {
14
await window.ethereum.enable();
15
} catch (error) {
16
// User denied account access
17
console.log(error);
18
}
19
} else if (window.web3) {
20
// Legacy dapp browsers
21
web3 = new Web3(window.web3.currentProvider);
22
} else {
23
// Non-dapp browsers
24
console.log("Non-Ethereum browser detected. You should consider trying MetaMask!");
25
}
26
})();
27
}, []);
28
​
29
​
30
return (
31
<div className="App">
32
{/* HTML code here*/}
33
</div >
34
);
35
}
36
​
37
export default App;
38
​
Copied!
Here's an article from Metamask for further understanding of initialising web3
Last modified 1yr ago
Copy link
Contents
Install web3