React- og Web3-rammeverk
Integrer front-end-rammeverk som React med Web3-biblioteker for å opprette dynamiske brukergrensesnitt for DApps.
React- og Web3-rammeverk er en gratis leksjon i Grunnleggende om Web3- og DApp-utvikling på CoddyKit. Dette er leksjon 1 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Grunnleggende om Web3- og DApp-utvikling, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Grunnleggende om Web3- og DApp-utvikling inneholder totalt 3 leksjoner.
DApp-er trenger brukergrensesnitt
Desentraliserte applikasjoner (DApp-er) er ikke bare smartkontrakter som kjører på en blokkjede. Akkurat som tradisjonelle apper trenger de et brukergrensesnitt (UI) som brukerne kan samhandle med.
Dette brukergrensesnittet er det brukerne ser og klikker på. Det kobler seg til kryptolommeboken deres (for eksempel MetaMask) og kommuniserer med blokkjeden for å vise informasjon eller sende transaksjoner.
React for dynamiske brukergrensesnitt
React er et svært populært JavaScript-bibliotek for å bygge moderne brukergrensesnitt. Det er kjent for sin komponentbaserte arkitektur, der brukergrensesnittet deles opp i små, gjenbrukbare deler.
Ved å bruke React kan utviklere lage dynamiske, responsive og komplekse DApp-grensesnitt mer effektivt.
Web3-biblioteker: blokkjede-broen
For at React-appen skal kunne kommunisere med Ethereum-blokkjeden, trenger De et «Web3-bibliotek». Disse bibliotekene fungerer som en viktig bro ved å oversette JavaScript-koden til kommandoer blokkjeden forstår.
- Web3.js: Et omfattende og mye brukt bibliotek for samhandling med Ethereum-blokkjeden.
- Ethers.js: Et moderne og lett alternativ til Web3.js, som ofte foretrekkes på grunn av sitt ryddige API.
Sette opp et React-prosjekt
La oss begynne med å opprette et nytt React-prosjekt. Vi bruker create-react-app, et vanlig verktøy som setter opp en ny React-applikasjon med en god standardstruktur.
Åpne terminalen og kjør følgende kommando:
npx create-react-app my-dapp-frontendInstallere et Web3-bibliotek
Etter at De har opprettet React-prosjektet og gått til prosjektmappen, er neste trinn å installere et Web3-bibliotek. I denne leksjonen bruker vi Web3.js.
Kjør denne kommandoen i prosjektets terminal:
npm install web3Koble til en Ethereum-provider
DApp-en trenger en tilkobling til Ethereum-nettverket. Denne tilkoblingen leveres vanligvis av brukerens nettleserlommebok, for eksempel MetaMask. MetaMask injiserer et globalt window.ethereum-objekt i nettleseren.
Vi bruker dette window.ethereum-objektet til å initialisere Web3.js-instansen, slik at appen kan lese fra og skrive til blokkjeden.
Kodedemonstrasjon: Initialisere Web3
Denne React-komponenten initialiserer Web3.js når komponenten monteres. Den ser etter en MetaMask-provider og forsøker å koble til, samtidig som brukergrensesnittet oppdateres basert på tilkoblingsstatusen.
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;Hente brukerens kontoadresse
Når vi er koblet til Ethereum-provideren, kan vi bruke web3-instansen til å hente adressene til brukerens tilkoblede lommebøker. Dette er et grunnleggende trinn for alle DApp-er som trenger å vise brukerspesifikke data eller klargjøre transaksjoner.
Vanligvis henter vi den første kontoen fra listen som returneres av web3.eth.getAccounts().
Vise kontoen i React-tilstand
For å vise adressen til den tilkoblede kontoen i React-applikasjonen lagrer vi den i React-tilstanden ved hjelp av useState-hooken. Dette gjør at brukergrensesnittet oppdateres automatisk når kontoen er hentet.
La oss oppdatere App.js slik at den tilkoblede kontoen vises:
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-integrasjon
Hva er hovedformålet med et Web3-bibliotek (for eksempel Web3.js eller Ethers.js) i en React-DApp?
Oppsummering av integrasjonen av React og Web3
I dag tok vi våre første steg mot å bygge DApp-grensesnitt! Vi lærte at React er utmerket for å bygge dynamiske brukergrensesnitt, og at Web3-biblioteker som Web3.js er avgjørende for å koble disse grensesnittene til Ethereum-blokkjeden.
Vi gikk gjennom hvordan man setter opp et React-prosjekt, installerer Web3.js, initialiserer en tilkobling ved hjelp av window.ethereum-provideren og henter brukerens tilkoblede lommebokadresse for å vise den i appen.
Denne grunnleggende kunnskapen er viktig for å gjøre DApp-ene interaktive og brukervennlige. Deretter skal vi gå dypere inn i håndtering av lommeboktilkoblinger og transaksjoner.
Lær deg Grunnleggende om Web3- og DApp-utvikling med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 29
- Leksjoner
- 105
Ofte stilte spørsmål
Er leksjonen «React- og Web3-rammeverk» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Grunnleggende om Web3- og DApp-utvikling, inkludert «React- og Web3-rammeverk», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Grunnleggende om Web3- og DApp-utvikling inneholder totalt 3 leksjoner.
Hva lærer jeg i «React- og Web3-rammeverk»?
Integrer front-end-rammeverk som React med Web3-biblioteker for å opprette dynamiske brukergrensesnitt for DApps. Du øver på Grunnleggende om Web3- og DApp-utvikling med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Grunnleggende om Web3- og DApp-utvikling?
Ingen tidligere erfaring er nødvendig. Grunnleggende om Web3- og DApp-utvikling på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 3.
Hvor lang tid tar leksjonen «React- og Web3-rammeverk»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Grunnleggende om Web3- og DApp-utvikling-leksjonen?
Ja. Alle Grunnleggende om Web3- og DApp-utvikling-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- React- og Web3-rammeverk
- Integrere lommebøker
- Håndtere transaksjoner og hendelser