UseDApp Tutorial: React and Web3 Integration - Step-by-Step Guide

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Explore a detailed, step-by-step tutorial on incorporating useDApp into React for web3 development. Learn how to set up a project, migrate from web3.js to useDApp, configure DAppProvider, and utilize hooks like useEthers and useEtherBalance. Discover how to activate and disconnect web3 wallets, style buttons, and implement CSS layouts using flexbox. Gain insights into blockchain infrastructure services like Infura and understand the advantages of useDApp's framework for rapid dapp development. Follow along to create a functional dapp while comparing useDApp to web3.js and exploring the modern dapp stack including React, Web-3 React, ethers.js, and Waffle.

Syllabus

Intro to useDapp
useDApp Introduction
Project Setup dependencies etc
Migrating from web3.js to useDapp
usedApp's DAppProvider config
infura.io blockchain infrastructure as a service
useEthers hook usedapp
activateBrowserWallet
disconnect web3 wallet with useEthers
styling buttons in react
web3 wallet balance w/ useEtherBalance
using flexbox for css layout
styling our dapp with css styles
This is also the state of our code at the starting point -- where we left off in the earlier part.