React- ja Web3-kehykset
Integroikaa Reactin kaltaiset käyttöliittymäkehykset Web3-kirjastoihin DApp-sovellusten dynaamisten käyttöliittymien luomiseksi.
React- ja Web3-kehykset on ilmainen Web3:n ja DApp-sovellusten kehityksen perusteet-oppitunti CoddyKitissä. Tämä on oppitunti 1/3. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Web3:n ja DApp-sovellusten kehityksen perusteet-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Web3:n ja DApp-sovellusten kehityksen perusteet-kurssilla on yhteensä 3 oppituntia.
DApp-sovellukset tarvitsevat käyttöliittymiä
Hajautetut sovellukset (DApp-sovellukset) eivät ole vain lohkoketjussa toimivia älysopimuksia. Perinteisten sovellusten tavoin ne tarvitsevat käyttöliittymän (UI), jonka avulla käyttäjät voivat käyttää niitä.
Käyttöliittymä on se, minkä käyttäjät näkevät ja mitä he napsauttavat. Se muodostaa yhteyden heidän kryptolompakkoonsa, kuten MetaMaskiin, ja viestii lohkoketjun kanssa näyttääkseen tietoja tai lähettääkseen transaktioita.
React dynaamisille käyttöliittymille
React on erittäin suosittu JavaScript-kirjasto nykyaikaisten käyttöliittymien rakentamiseen. Se tunnetaan komponenttipohjaisesta arkkitehtuuristaan, jossa käyttöliittymä jaetaan pieniin, uudelleenkäytettäviin osiin.
Reactin avulla kehittäjät voivat luoda dynaamisia, responsiivisia ja monimutkaisia DApp-käyttöliittymiä tehokkaammin.
Web3-kirjastot: lohkoketjusilta
Jotta React-sovelluksesi voi kommunikoida Ethereum-lohkoketjun kanssa, tarvitset Web3-kirjaston. Nämä kirjastot toimivat tärkeänä siltana muuntaen JavaScript-koodisi lohkoketjun ymmärtämiksi komennoiksi.
- Web3.js: Monipuolinen ja laajasti käytetty kirjasto Ethereum-lohkoketjun kanssa toimimiseen.
- Ethers.js: Nykyaikainen, kevyt ja usein suositeltu vaihtoehto Web3.js:lle, joka tunnetaan selkeästä rajapinnastaan.
React-projektin määrittäminen
Aloitetaan luomalla uusi React-projekti. Käytämme työkalua create-react-app, joka määrittää uuden React-sovelluksen ja sille hyvän oletusrakenteen.
Avaa pääte ja suorita seuraava komento:
npx create-react-app my-dapp-frontendWeb3-kirjaston asentaminen
Kun React-projekti on luotu ja olet siirtynyt sen hakemistoon, seuraava vaihe on Web3-kirjaston asentaminen. Tässä oppitunnissa käytämme kirjastoa Web3.js.
Suorita tämä komento projektisi päätteessä:
npm install web3Yhteyden muodostaminen Ethereum-palveluntarjoajaan
DApp-sovelluksesi tarvitsee yhteyden Ethereum-verkkoon. Tämän yhteyden tarjoaa yleensä käyttäjän selaimen lompakko, kuten MetaMask. MetaMask lisää selaimeen globaalin window.ethereum-objektin.
Käytämme tätä window.ethereum-objektia Web3.js-instanssimme alustamiseen, jolloin sovelluksemme voi lukea tietoja lohkoketjusta ja kirjoittaa niitä sinne.
Koodiesimerkki: Web3:n alustaminen
Tämä React-komponentti alustaa Web3.js:n komponentin liittämisen yhteydessä. Se tarkistaa MetaMask-palveluntarjoajan olemassaolon ja yrittää muodostaa yhteyden päivittäen käyttöliittymän yhteyden tilan perusteella.
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;Käyttäjän tiliosoitteen hakeminen
Kun yhteys Ethereum-palveluntarjoajaan on muodostettu, voimme käyttää web3-instanssiamme käyttäjän yhdistettyjen lompakko-osoitteiden hakemiseen. Tämä on olennainen vaihe kaikissa DApp-sovelluksissa, joiden on näytettävä käyttäjäkohtaisia tietoja tai valmistauduttava transaktioihin.
Haemme yleensä luettelon ensimmäisen tilin kutsulla web3.eth.getAccounts().
Tilin näyttäminen Reactin tilassa
Jotta yhdistetyn tilin osoite voidaan näyttää React-sovelluksessamme, tallennamme sen Reactin tilaan useState-hookin avulla. Tällöin käyttöliittymä päivittyy automaattisesti, kun tili on haettu.
Päivitetään App.js näyttämään yhdistetty tili:
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;Web3-integraation tarkistus
Mikä seuraavista on Web3-kirjaston, kuten Web3.js:n tai Ethers.js:n, ensisijainen tarkoitus React-DApp-sovelluksessa?
Reactin ja Web3:n integroinnin yhteenveto
Tänään otimme ensimmäiset askeleemme DApp-käyttöliittymien rakentamisessa! Opimme, että React soveltuu erinomaisesti dynaamisten käyttöliittymien rakentamiseen ja että Web3.js:n kaltaiset Web3-kirjastot ovat ratkaisevan tärkeitä näiden käyttöliittymien yhdistämisessä Ethereum-lohkoketjuun.
Käsittelimme React-projektin määrittämisen, Web3.js:n asentamisen, yhteyden alustamisen window.ethereum-palveluntarjoajan avulla sekä käyttäjän yhdistetyn lompakko-osoitteen hakemisen sovelluksessa näyttämistä varten.
Nämä perustiedot ovat keskeisiä, kun DApp-sovelluksista halutaan tehdä vuorovaikutteisia ja käyttäjäystävällisiä. Seuraavaksi perehdymme tarkemmin lompakkoyhteyksien ja transaktioiden käsittelyyn.
Opi Web3:n ja DApp-sovellusten kehityksen perusteet tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 29
- Oppitunnit
- 105
Usein kysytyt kysymykset
Onko oppitunti ”React- ja Web3-kehykset” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Web3:n ja DApp-sovellusten kehityksen perusteet-oppimispolun 3 oppituntia, myös oppitunnin “React- ja Web3-kehykset”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Web3:n ja DApp-sovellusten kehityksen perusteet-kurssilla on yhteensä 3 oppituntia.
Mitä opin oppitunnilla ”React- ja Web3-kehykset”?
Integroikaa Reactin kaltaiset käyttöliittymäkehykset Web3-kirjastoihin DApp-sovellusten dynaamisten käyttöliittymien luomiseksi. Harjoittelet Web3:n ja DApp-sovellusten kehityksen perusteet-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Web3:n ja DApp-sovellusten kehityksen perusteet-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Web3:n ja DApp-sovellusten kehityksen perusteet-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/3.
Kuinka kauan ”React- ja Web3-kehykset”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Web3:n ja DApp-sovellusten kehityksen perusteet-oppitunnilla?
Kyllä. Jokainen Web3:n ja DApp-sovellusten kehityksen perusteet-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- React- ja Web3-kehykset
- Lompakoiden integrointi
- Transaktioiden ja tapahtumien käsittely