React- och Web3-ramverk
Integrera frontendramverk som React med Web3-bibliotek för att skapa dynamiska användargränssnitt för DApps.
React- och Web3-ramverk är en gratis lektion i Grunderna i Web3- och DApp-utveckling på CoddyKit. Detta är lektion 1 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Grunderna i Web3- och DApp-utveckling, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Grunderna i Web3- och DApp-utveckling innehåller totalt 3 lektioner.
DApps behöver användargränssnitt
Decentraliserade applikationer (DApps) består inte bara av smarta kontrakt som körs på en blockkedja. Precis som traditionella appar behöver de ett användargränssnitt (UI) som människor kan interagera med.
Det här gränssnittet är det som användarna ser och klickar på. Det ansluter till deras kryptoplånbok (till exempel MetaMask) och kommunicerar med blockkedjan för att visa information eller skicka transaktioner.
React för dynamiska användargränssnitt
React är ett mycket populärt JavaScript-bibliotek för att bygga moderna användargränssnitt. Det är känt för sin komponentbaserade arkitektur, där användargränssnittet delas upp i små, återanvändbara delar.
Med React kan utvecklare skapa dynamiska, responsiva och komplexa DApp-gränssnitt mer effektivt.
Web3-bibliotek: blockkedjebryggan
För att få din React-app att kommunicera med Ethereum-blockkedjan behöver du ett ”Web3-bibliotek”. Dessa bibliotek fungerar som en viktig brygga genom att översätta din JavaScript-kod till kommandon som blockkedjan förstår.
- Web3.js: Ett omfattande och välanvänt bibliotek för att interagera med Ethereum-blockkedjan.
- Ethers.js: Ett modernt, lättviktigt och ofta föredraget alternativ till Web3.js, känt för sitt rena API.
Konfigurera ett React-projekt
Vi börjar med att skapa ett nytt React-projekt. Vi använder create-react-app, ett vanligt verktyg som konfigurerar en ny React-applikation med en bra grundstruktur.
Öppna terminalen och kör följande kommando:
npx create-react-app my-dapp-frontendInstallera ett Web3-bibliotek
När du har skapat ditt React-projekt och gått till dess katalog är nästa steg att installera ett Web3-bibliotek. I den här lektionen använder vi Web3.js.
Kör det här kommandot i projektets terminal:
npm install web3Ansluta till en Ethereum-provider
Din DApp behöver en anslutning till Ethereum-nätverket. Den här anslutningen tillhandahålls vanligtvis av användarens plånbok i webbläsaren, till exempel MetaMask. MetaMask injicerar ett globalt window.ethereum-objekt i webbläsaren.
Vi använder objektet window.ethereum för att initiera vår Web3.js-instans, så att appen kan läsa från och skriva till blockkedjan.
Kodexempel: initiera Web3
Den här React-komponenten initierar Web3.js när komponenten monteras. Den kontrollerar om det finns en MetaMask-provider och försöker ansluta, samtidigt som användargränssnittet uppdateras utifrån anslutningsstatusen.
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;Hämta användarens adress
När vi har anslutit till Ethereum-providern kan vi använda vår web3-instans för att hämta adresserna till användarens anslutna plånböcker. Detta är ett grundläggande steg för alla DApp:ar som behöver visa användarspecifika data eller förbereda transaktioner.
Vanligtvis hämtar vi det första kontot från listan som returneras av web3.eth.getAccounts().
Visa kontot i React state
För att visa adressen till det anslutna kontot i vår React-applikation sparar vi den i Reacts state med hooken useState. Då uppdateras användargränssnittet automatiskt när kontot har hämtats.
Vi uppdaterar App.js så att det anslutna kontot visas:
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;Kontroll av Web3-integrationen
Vilket av följande är det huvudsakliga syftet med ett Web3-bibliotek (till exempel Web3.js eller Ethers.js) i en React-DApp?
Sammanfattning: integrera React och Web3
I dag tog vi våra första steg mot att bygga DApp-gränssnitt! Vi lärde oss att React är utmärkt för att bygga dynamiska användargränssnitt och att Web3-bibliotek som Web3.js är avgörande för att ansluta dessa gränssnitt till Ethereum-blockkedjan.
Vi gick igenom hur man konfigurerar ett React-projekt, installerar Web3.js, initierar en anslutning med providern window.ethereum och hämtar användarens anslutna plånboksadress för att visa den i appen.
Den här grundläggande kunskapen är viktig för att göra dina DApp:ar interaktiva och användarvänliga. Nästa steg är att gå djupare in på hur man hanterar plånboksanslutningar och transaktioner.
Lär dig Grunderna i Web3- och DApp-utveckling med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 29
- Lektioner
- 105
Vanliga frågor
Är lektionen ”React- och Web3-ramverk” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Grunderna i Web3- och DApp-utveckling, inklusive ”React- och Web3-ramverk”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Grunderna i Web3- och DApp-utveckling innehåller totalt 3 lektioner.
Vad lär jag mig i ”React- och Web3-ramverk”?
Integrera frontendramverk som React med Web3-bibliotek för att skapa dynamiska användargränssnitt för DApps. Ni övar på Grunderna i Web3- och DApp-utveckling med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Grunderna i Web3- och DApp-utveckling?
Du behöver inga förkunskaper. Utbildningen i Grunderna i Web3- och DApp-utveckling på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.
Hur lång tid tar lektionen ”React- och Web3-ramverk”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Grunderna i Web3- och DApp-utveckling-lektionen?
Ja. Varje Grunderna i Web3- och DApp-utveckling-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- React- och Web3-ramverk
- Integrera plånböcker
- Hantera transaktioner och händelser