React- en Web3-frameworks
Integreer front-endframeworks zoals React met Web3-bibliotheken om dynamische gebruikersinterfaces voor DApps te maken.
React- en Web3-frameworks is een gratis De basis van Web3- en DApp-ontwikkeling-les op CoddyKit. Dit is les 1 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject De basis van Web3- en DApp-ontwikkeling. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus De basis van Web3- en DApp-ontwikkeling bevat in totaal 3 lessen.
DApps hebben gebruikersinterfaces nodig
Gedecentraliseerde toepassingen (DApps) zijn niet alleen slimme contracten die op een blockchain draaien. Net als traditionele toepassingen hebben ze een gebruikersinterface (UI) nodig waarmee mensen ermee kunnen werken.
Deze UI is wat gebruikers zien en aanklikken. De UI maakt verbinding met hun cryptowallet (zoals MetaMask) en communiceert met de blockchain om informatie weer te geven of transacties te versturen.
React voor dynamische UI's
React is een zeer populaire JavaScript-bibliotheek voor het bouwen van moderne gebruikersinterfaces. De bibliotheek staat bekend om de componentgebaseerde architectuur, waarbij je je gebruikersinterface opsplitst in kleine, herbruikbare onderdelen.
Met React kunnen ontwikkelaars dynamische, responsieve en complexe DApp-front-ends efficiënter maken.
Web3-bibliotheken: de blockchainbrug
Om je React-app met de Ethereum-blockchain te laten communiceren, heb je een 'Web3-bibliotheek' nodig. Deze bibliotheken vormen een essentiële brug en vertalen je JavaScript-code naar opdrachten die de blockchain begrijpt.
- Web3.js: een uitgebreide en veelgebruikte bibliotheek voor interactie met de Ethereum-blockchain.
- Ethers.js: een moderne, lichtgewicht en vaak geprefereerde alternatief voor Web3.js, bekend om de overzichtelijke API.
Een React-project instellen
Laten we beginnen met het maken van een nieuw React-project. We gebruiken create-react-app, een veelgebruikte tool die een nieuwe React-applicatie opzet met een goede standaardstructuur.
Open je terminal en voer de volgende opdracht uit:
npx create-react-app my-dapp-frontendEen Web3-bibliotheek installeren
Nadat je je React-project hebt gemaakt en naar de map ervan bent gegaan, is de volgende stap het installeren van een Web3-bibliotheek. In deze les gebruiken we Web3.js.
Voer deze opdracht uit in de terminal van je project:
npm install web3Verbinding maken met een Ethereum-provider
Je DApp heeft een verbinding met het Ethereum-netwerk nodig. Deze verbinding wordt meestal geleverd door de browserwallet van de gebruiker, zoals MetaMask. MetaMask voegt een globaal object window.ethereum toe aan de browser.
We gebruiken dit object window.ethereum om onze Web3.js-instantie te initialiseren. Zo kan onze app gegevens uit de blockchain lezen en er gegevens naartoe schrijven.
Codevoorbeeld: Web3 initialiseren
Deze React-component initialiseert Web3.js wanneer de component wordt gemount. De component controleert of er een MetaMask-provider is en probeert verbinding te maken. Daarbij wordt de gebruikersinterface bijgewerkt op basis van de verbindingsstatus.
import React, { useEffect, useState } from 'react';
import Web3 from 'web3';
function App() {
const [web3, setWeb3] = useState(null);
const [isConnected, setIsConnected] = useState(false);
useEffect(() => {
const initWeb3 = async () => {
if (window.ethereum) {
try {
// Request account access
await window.ethereum.request({ method: 'eth_requestAccounts' });
const web3Instance = new Web3(window.ethereum);
setWeb3(web3Instance);
setIsConnected(true);
console.log('Web3 connected!');
} catch (error) {
console.error('User denied or connection error:', error);
}
} else {
console.log('MetaMask not detected. Install it!');
}
};
initWeb3();
}, []); // Runs once on component mount
return (
<div>
<h1>DApp Frontend</h1>
{isConnected ? (
<p>Connected to Ethereum!</p>
) : (
<p>Not connected. Please install MetaMask.</p>
)}
</div>
);
}
export default App;Het adres van het gebruikersaccount ophalen
Nadat we verbinding hebben gemaakt met de Ethereum-provider, kunnen we onze web3-instantie gebruiken om de verbonden wallet-adressen van de gebruiker op te halen. Dit is een fundamentele stap voor elke DApp die gebruikersspecifieke gegevens moet weergeven of transacties moet voorbereiden.
Meestal halen we het eerste account op uit de lijst die door web3.eth.getAccounts() wordt geretourneerd.
Het account in de React-status weergeven
Om het adres van het verbonden account in onze React-applicatie weer te geven, slaan we het op in de status van React met de hook useState. Hierdoor wordt de gebruikersinterface automatisch bijgewerkt wanneer het account is opgehaald.
Laten we onze App.js bijwerken om het verbonden account weer te geven:
import React, { useEffect, useState } from 'react';
import Web3 from 'web3';
function App() {
const [web3, setWeb3] = useState(null);
const [account, setAccount] = useState(null);
const [isConnected, setIsConnected] = useState(false);
useEffect(() => {
const initWeb3 = async () => {
if (window.ethereum) {
try {
await window.ethereum.request({ method: 'eth_requestAccounts' });
const web3Instance = new Web3(window.ethereum);
setWeb3(web3Instance);
setIsConnected(true);
const accounts = await web3Instance.eth.getAccounts();
setAccount(accounts[0]); // Store the first account
console.log('Connected account:', accounts[0]);
} catch (error) {
console.error('Connection error:', error);
setAccount(null);
setIsConnected(false);
}
} else {
console.log('MetaMask not detected.');
setAccount(null);
setIsConnected(false);
}
};
initWeb3();
}, []); // Empty dependency array means this runs once on mount
return (
<div>
<h1>My DApp</h1>
{isConnected && account ? (
<p>Connected account: <code>{account}</code></p>
) : (
<p>Please connect your wallet.</p>
)}
</div>
);
}
export default App;Controle van Web3-integratie
Wat is het belangrijkste doel van een Web3-bibliotheek, zoals Web3.js of Ethers.js, in een React-DApp?
Samenvatting: React en Web3 integreren
Vandaag hebben we onze eerste stappen gezet bij het bouwen van DApp-front-ends. We hebben geleerd dat React uitstekend geschikt is voor het bouwen van dynamische gebruikersinterfaces en dat Web3-bibliotheken zoals Web3.js essentieel zijn om deze gebruikersinterfaces met de Ethereum-blockchain te verbinden.
We hebben behandeld hoe je een React-project instelt, Web3.js installeert, een verbinding initialiseert met de provider window.ethereum en het verbonden wallet-adres van de gebruiker ophaalt om dit in onze app weer te geven.
Deze basiskennis is belangrijk om je DApps interactief en gebruiksvriendelijk te maken. Vervolgens gaan we dieper in op het afhandelen van walletverbindingen en transacties.
Leer De basis van Web3- en DApp-ontwikkeling met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 29
- Lessen
- 105
Veelgestelde vragen
Is de les “React- en Web3-frameworks” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad De basis van Web3- en DApp-ontwikkeling, waaronder “React- en Web3-frameworks”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus De basis van Web3- en DApp-ontwikkeling bevat in totaal 3 lessen.
Wat leer ik in “React- en Web3-frameworks”?
Integreer front-endframeworks zoals React met Web3-bibliotheken om dynamische gebruikersinterfaces voor DApps te maken. Je oefent met De basis van Web3- en DApp-ontwikkeling door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met De basis van Web3- en DApp-ontwikkeling te beginnen?
Ervaring vooraf is niet nodig. De basis van Web3- en DApp-ontwikkeling op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 3.
Hoe lang duurt de les “React- en Web3-frameworks”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over De basis van Web3- en DApp-ontwikkeling?
Ja. Elke les over De basis van Web3- en DApp-ontwikkeling bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- React- en Web3-frameworks
- Wallets integreren
- Transacties en events afhandelen