• Un ex alunno di freeCodeCamp che ha fondato la sua azienda di successo Web3 ha donato 1 milione di dollari a freeCodeCamp
• Ha chiesto di utilizzare alcuni di questi fondi per sviluppare un curriculum Web3 a emissioni zero
• Stiamo creando un curriculum Web3 interattivo in cui puoi imparare costruendo più di una dozzina di progetti. Questo curriculum gratuito insegnerà i fondamenti dei contratti intelligenti e dello sviluppo di applicazioni distribuite.
• Questo sarà un curriculum separato che puoi scegliere di affrontare nel momento in cui ti senti pronto. I prerequisiti riguarderanno l'apprendimento dello sviluppo web full stack attraverso le prime 7 certificazioni freeCodeCamp. (Sebbene, come per tutti gli aspetti di freeCodeCamp, sei libero di saltare.)
• Il nostro obiettivo è aiutare le persone ad apprendere queste competenze in modo che possano ottenere uno dei migliaia dei posti di lavoro disponibili che richiedono queste tecnologie o avviare propri progetti imprenditoriali.

La storia di Nathan

Nathan Flickinger ha abbandonato il college. Dopo un periodo di grosse difficoltà, ha promesso di rimettere insieme la sua vita. Ha iniziato con l'utilizzo della sua certificazione CompTIA che aveva conseguito al liceo per ottenere un lavoro con un salario minimo nel supporto tecnico.

Da lì, Nathan ha deciso di imparare a programmare da solo. Dopo diversi mesi di studio su freeCodeCamp, è stato in grado di ottenere il suo primo lavoro in software engineering.

È diventato appassionato dallo sviluppo di Web3 e alla fine ha fatto il grande passo e ha creato la propria startup. Ha aiutato a scrivere il codice degli smart contract per diversi progetti Web3. In particolare, KaijuKingz, una collezione di simpatiche lucertole ispirata ai mostri, ognuna con caratteristiche bizzarre. Invece del caffè, bevono fanghi radioattivi.

Le persone della comunità di KaijuKingz acquistano e scambiano queste opere artistiche attraverso un sistema chiamato Token non fungibili, essenzialmente atti di proprietà.

Invece di essere archiviati in un database centralizzato, questi atti vengono salvati nei computer di tutto il mondo attraverso un database distribuito.

All'inizio, Nathan ha deciso che se il suo progetto avesse avuto successo, avrebbe voluto donare una grande quantità di denaro a freeCodeCamp per aiutare altre persone a imparare a sfruttare la tecnologia per realizzare le proprie ambizioni di carriera.

E oggi, lui e KaijuKingz l'hanno fatto. Hanno donato un milione di dollari alla nostra organizzazione no-profit, da utilizzare per la nostra missione di creare risorse di apprendimento gratuite per le persone in tutto il mondo.

Sono estremamente grato a Nathan e ai suoi colleghi di KaijuKingz e alla loro disponibilità a supportare l'istruzione gratuita e open source. Puoi leggere di più su Nathan e il suo viaggio nella programmazione qui .

Il curriculum Web3

Questo curriculum gratuito insegnerà i fondamenti dei contratti intelligenti e dello sviluppo di applicazioni distribuite.

Sarà un curriculum autonomo che puoi scegliere di affrontare ogni volta che ti senti pronto. I prerequisiti riguarderanno l'apprendimento dello sviluppo web full stack attraverso le prime 7 certificazioni freeCodeCamp.

Costruiremo questo curriculum utilizzando gli stessi strumenti che abbiamo utilizzato per creare il curriculum del database relazionale di freeCodeCamp . Ti insegnerà lo sviluppo di Web3 attraverso la costruzione di più di una dozzina di progetti.

Domande frequenti

In che modo questo sarà carbon neutral?

Poiché tutto lo sviluppo avverrà sul tuo computer e utilizzerà blockchain locali, non ci saranno emissioni di carbonio. Tutti i server cloud di freeCodeCamp sono già a emissioni zero.

Tutto questo sarà gratuito? Comprese le transazioni blockchain?

Sì. Ancora una volta, questo curriculum utilizzerà blockchain locali. Non dovrai mai acquistare monete o token.

Questo curriculum discuterà aspetti della speculazione?

No. Questo curriculum sarà incentrato al 100% sull'ingegneria del software.

Quando sarà pubblicato questo curriculum?

Ci auguriamo che parti di questo curriculum siano disponibili già nell'estate 2022. Nel frattempo, consigliamo di apprendere lo sviluppo web utilizzando il curriculum freeCodeCamp esistente.

Un modo per pensare allo sviluppo di Web3 è che si tratta principalmente di uno sviluppo Web tradizionale con molti strumenti aggiuntivi per l'utilizzo di reti distribuite. Quindi tutto ciò che impari per lo sviluppo web tradizionale sarà applicabile anche qui.

E il curriculum di Data Science?

Il curriculum di Data Science sta andando alla grande e speriamo di pubblicarne parti nei prossimi mesi. Il curriculum Web3 non influisce sullo sviluppo del curriculum di Data Science: vengono creati da team separati di insegnanti e sviluppatori.

In questo articolo, ti mostrerò come realizzare un NFT senza competenze di ingegneria del software. Quindi impareremo come creare NFT personalizzabili illimitati con Brownie , Python e Chainlink . E vedremo come rendere e vendere la nostra creazione sul mercato NFT di OpenSea .

Se stai cercando un tutorial che utilizzi Truffle, JavaScript e divertenti personaggi medievali, dai un'occhiata a come costruire, distribuire e vendere il tuo NFT qui .

Cos'è un NFT?

Gli NFT (Non-Fungible Tokens) possono essere riassunti in una parola: "unico". Si tratta di contratti intelligenti distribuiti su una blockchain che rappresentano qualcosa di unico.

ERC20 vs ERC721

Gli NFT sono uno standard di token blockchain simile a ERC20 , come AAVE, SNX e LINK (tecnicamente un ERC677). Gli ERC20 sono token "fungibili", che significa "sostituibili" o "intercambiabili".

Ad esempio, la tua banconota da un dollaro varrà 1 $ indipendentemente dalla banconota da un dollaro che usi. Il numero di serie sulla banconota da un dollaro potrebbe essere diverso, ma le banconote sono intercambiabili e varranno sempre 1 $, qualunque cosa accada.

Gli NFT, d'altra parte, sono "non fungibili" e seguono il proprio standard di token, l'ERC721. Ad esempio, la Gioconda è "non fungibile". Anche se qualcuno può farne una copia, ci sarà sempre solo una Monna Lisa. Se la Gioconda fosse creata su una blockchain, sarebbe una NFT.

A cosa servono gli NFT?

Gli NFT forniscono valore a creatori, artisti, progettisti di giochi e altro avendo una cronologia permanente di distribuzione archiviata sulla chain.

Saprai sempre chi ha creato la NFT, chi possedeva la NFT, da dove proveniva e altro ancora, dando loro molto valore rispetto all'arte tradizionale. Nell'arte tradizionale, può essere difficile capire cosa sia un "falso", mentre sulla chain la storia è facilmente tracciabile.

E poiché i contratti intelligenti e gli NFT sono programmabili al 100%, gli NFT possono anche avere royalties integrate e qualsiasi altra funzionalità aggiunta. Ricompensare gli artisti è sempre stato un problema, poiché spesso il lavoro di un artista viene distribuito senza alcuna attribuzione.

Sempre più artisti e ingegneri stanno saltando su questo enorme valore aggiunto, perché è finalmente un ottimo modo per gli artisti di essere ricompensati per il loro lavoro. Oltre a questo, gli NFT sono un modo divertente per mostrare la tua creatività e diventare un collezionista in un mondo digitale.

Il valore degli NFT

Gli NFT hanno fatto molta strada e continuiamo a vedere vendite di NFT da record, come "Everydays: The First 5.000 Days" venduto per $ 69,3 milioni.

Quindi c'è molto valore qui, ed è anche un modo divertente, dinamico e coinvolgente di creare arte nel mondo digitale oltre che di a imparare la creazione di contratti intelligenti. Quindi ora ti insegnerò tutto ciò che devi sapere sulla creazione di NFT.

Come fare un NFT

Cosa non tratteremo

Ora, il modo più semplice per creare un NFT è semplicemente andare su una piattaforma come Opensea , Rarible o Mintible e seguire la loro guida passo passo per l'implementazione sulla loro piattaforma.

Puoi prendere questa strada al 100%, tuttavia potresti rimanere legato alla piattaforma e bloccato nelle sue funzionalità. Non puoi ottenere la personalizzazione illimitata o utilizzare davvero nessuno dei vantaggi offerti dagli NFT. Ma se sei un ingegnere del software alle prime armi, o non molto tecnico, questa è la strada che fa per te.

Invece se stai cercando di diventare un ingegnere del software più forte, imparare un po' di solidity e ottenere le capacità di creare qualcosa con creatività illimitata, continua a leggere!

Se sei nuovo nell'usare solidity, non ti preoccupare, parleremo delle basi anche in questo caso.

Come creare un NFT con personalizzazione illimitata

Ti farò fare un salto di qualità con questo Brownie Mix NFT . Questo è un repository funzionante con molto codice boilerplate.

Prerequisiti

Per iniziare abbiamo bisogno di alcune cose installate:

• Python
• Nodejs e npm
• Metamask

Se non hai familiarità con Metamask, puoi seguire questo tutorial per configurarlo.

Rinkeby Testnet ETH e LINK

Lavoreremo anche sul testnet Rinkeby di Ethereum, quindi implementeremo i nostri contratti su una vera blockchain, gratuitamente!

I testnet sono ottimi modi per testare come si comportano i nostri contratti intelligenti nel mondo reale. Abbiamo bisogno di Rinkeby ETH e Rinkeby LINK, che possiamo ottenere gratuitamente dai link agli ultimi faucet dalla documentazione di Chainlink .

Dovremo anche aggiungere il token LINK rinkeby al nostro metamask, cosa che possiamo fare seguendo la documentazione di acquisizione LINK .

Se sei ancora confuso, puoi seguire questo video , assicurati di usare Rinkeby invece di Ropsten.

Quando lavoriamo con una piattaforma di smart contract come Ethereum, dobbiamo pagare un po' di ETH e quando riceviamo dati da off-chain, dobbiamo pagare un po' di LINK. Questo è il motivo per cui abbiamo bisogno di testnet LINK ed ETH.

Fantastico, iniziamo. Questa è l'NFT che implementeremo su OpenSea.

Avvio rapido

git clone https://github.com/PatrickAlphaC/nft-mix
cd nft-mix

Stupendo! Ora dobbiamo installare ganache-cli e eth-brownie.

pip install eth-brownie
npm install -g ganache-cli

Ora possiamo impostare le nostre variabili d'ambiente . Se non hai familiarità con le variabili di ambiente, puoi semplicemente aggiungerle al tuo file .env e quindi eseguire:

source .env

Un esempio di file .env dovrebbe essere nel repository che hai appena clonato con le variabili di ambiente commentate. Decommentale per usarle!

Avrai bisogno di un WEB3_INFURA_PROJECT_ID e un PRIVATE_KEY. WEB3_INFURA_PROJECT_ID puoi trovarlo registrando gratuitamente un account Infura. Questo ci darà un modo per inviare transazioni alla blockchain.

Avremo anche bisogno di una chiave privata, che puoi ottenere dal tuo Metamask. Premi i 3 puntini e fai clic su Account Details ed Export Private Key. Per favore NON condividere questa chiave con nessuno se ci metti soldi veri!

export PRIVATE_KEY=YOUR_KEY_HERE
export WEB3_INFURA_PROJECT_ID=YOUR_PROJECT_ID_HERE

Ora possiamo distribuire il nostro contratto NFT e creare il nostro primo oggetto da collezione con i seguenti due comandi.

brownie run scripts/simple_collectible/deploy_simple.py --network rinkeby
brownie run scripts/simple_collectible/create_collectible.py --network rinkeby

Il primo script distribuisce il nostro contratto NFT sulla blockchain di Rinkeby e il secondo crea il nostro primo oggetto da collezione.

Hai appena implementato il tuo primo contratto intelligente!

Non fa molto, ma non preoccuparti: ti mostrerò come renderizzarlo su OpenSea nella parte avanzata di questo tutorial. Ma prima, diamo un'occhiata allo standard del token ERC721.

Lo standard del token ERC721

Diamo un'occhiata al contratto che abbiamo appena distribuito, nel file SimpleCollectible.sol.

// SPDX-License-Identifier: MIT
pragma solidity 0.6.6;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";

contract SimpleCollectible is ERC721 {
    uint256 public tokenCounter;
    constructor () public ERC721 ("Dogie", "DOG"){
        tokenCounter = 0;
    }

    function createCollectible(string memory tokenURI) public returns (uint256) {
        uint256 newItemId = tokenCounter;
        _safeMint(msg.sender, newItemId);
        _setTokenURI(newItemId, tokenURI);
        tokenCounter = tokenCounter + 1;
        return newItemId;
    }

}

Stiamo usando il pacchetto OpenZepplin per il token ERC721. Questo pacchetto che abbiamo importato ci consente di utilizzare tutte le funzioni di un tipico token ERC721. Questo definisce tutte le funzionalità che avranno i nostri token, come transfer che sposta i token a nuovi utenti, safeMint che crea nuovi token e altro ancora.

Puoi trovare tutte le funzioni che vengono fornite al nostro contratto controllando il contratto token OpenZepplin ERC721 . Il nostro contratto eredita queste funzioni su questa riga:

contract SimpleCollectible is ERC721 {

È così che solidity fa eredità. Quando distribuiamo un contratto, il  constructor viene chiamato automaticamente e richiede alcuni parametri.

constructor () public ERC721 ("Dogie", "DOG"){
        tokenCounter = 0;
    }

Usiamo anche il costruttore di ERC721, nel nostro costruttore, e dobbiamo solo dargli un nome e un simbolo. Nel nostro caso, sono "Dogie" e "DOG". Ciò significa che ogni NFT che creiamo sarà di tipo Dogie/DOG.

Questo è come il caso delle carte di Pokemon in cui ognuna di essa è ancora un pokemon, o ogni giocatore di baseball su una carta collezionabile è ancora un giocatore di baseball. Ogni giocatore di baseball è unico, ma rimangono comunque tutti giocatori di baseball. Stiamo solo usando il tipo DOG.

Abbiamo tokenCounter in alto che conta quanti NFT abbiamo creato di questo tipo. Ogni nuovo token ottiene un tokenId basato sul tokenCounter corrente .

Possiamo effettivamente creare un NFT con la funzione createCollectible. Questo è ciò che chiamiamo nel nostro script create_collectible.py.

function createCollectible(string memory tokenURI) public returns (uint256) {
        uint256 newItemId = tokenCounter;
        _safeMint(msg.sender, newItemId);
        _setTokenURI(newItemId, tokenURI);
        tokenCounter = tokenCounter + 1;
        return newItemId;
    }

La funzione _safeMint crea il nuovo NFT e lo assegna a chi ha chiamato createdCollectible, alias the msg.sender, con un newItemId derivato da tokenCounter. In questo modo possiamo tenere traccia di chi possiede cosa, controllando il proprietario del tokenId.

Noterai che chiamiamo anche _setTokenURI. Parliamo di questo.

Cosa sono i metadati NFT e TokenURI?

Quando vennero creati i contratti intelligenti e quindi creati gli NFT, le persone si sono subito rese conto che è davvero costoso distribuire molti dati sulla blockchain. Immagini di appena un KB possono facilmente costare oltre 1 milione di dollari per l'archiviazione .

Questo è chiaramente un problema per gli NFT, poiché avere un'arte creativa significa che devi archiviare queste informazioni da qualche parte. Volevano anche un modo leggero per archiviare gli attributi su un NFT, ed è qui che entrano in gioco tokenURI e metadati.

TokenURI

Il tokenURI su un NFT è un identificatore univoco di come "sembra" il token. Un URI potrebbe essere una chiamata API su HTTPS, un hash IPFS o qualsiasi altra cosa univoca.

Seguono uno standard di visualizzazione dei metadati simile a questo:

{
    "name": "name",
    "description": "description",
    "image": "https://ipfs.io/ipfs/QmTgqnhFBMkfT9s8PHKcdXBn1f5bG3Q5hmBaR4U6hoTvb1?filename=Chainlink_Elf.png",
    "attributes": [
        {
            "trait_type": "trait",
            "value": 100
        }
    ]
}

Questi mostrano l'aspetto di un NFT e i suoi attributi. La sezione image punta a un altro URI di come appare l'NFT. Ciò rende facile per le piattaforme NFT come Opensea, Rarible e Mintable eseguire il rendering di NFT sulle loro piattaforme, poiché sono tutti alla ricerca di questi metadati.

Metadati off-chain vs metadati on-chain

Ora potresti pensare "aspetta... se i metadati non sono on-chain, significa che il mio NFT potrebbe andare via a un certo punto"? E avresti ragione.

Avresti anche ragione nel pensare che avere i metadati off-chain significa che non puoi utilizzare quei metadati per far interagire i tuoi contratti intelligenti tra loro.

Questo è il motivo per cui vogliamo concentrarci sui metadati on-chain, in modo da poter programmare i nostri NFT per interagire tra loro.

Tuttavia, abbiamo ancora bisogno della parte image dei metadati off-chain, poiché non abbiamo un ottimo modo per archiviare immagini di grandi dimensioni on-chain. Ma non preoccuparti, possiamo farlo gratuitamente su una rete decentralizzata usando ancora IPFS .

Ecco un esempio di imageURI di IPFS che mostra l' Elfo Chainlink creato nel tutorial di Dungeons and Dragons.

Non abbiamo impostato un tokenURI per il semplice NFT perché volevamo mostrare solo un esempio di base.

Passiamo ora all'NFT avanzato, così possiamo vedere alcune delle straordinarie funzionalità che possiamo ottenere con i metadati on-chain, avere il rendering NFT su opensea e creare Dogie!

Se vuoi un video di ripasso sulla sezione che abbiamo appena esaminato, segui la distribuzione di un semplice video NFT.

NFT dinamici e avanzati

Gli NFT dinamici sono NFT che possono cambiare nel tempo o avere funzionalità a catena che possiamo utilizzare per farli interagire tra loro. Questi sono gli NFT che nel nostro caso, hanno la personalizzazione illimitata per creare interi giochi, mondi o opere d'arte interattive di qualche tipo. Passiamo alla sezione avanzata.

Avvio rapido avanzato

Assicurati di avere abbastanza testnet ETH e LINK nel tuo metamask, quindi esegui quanto segue:

brownie run scripts/advanced_collectible/deploy_advanced.py --network rinkeby
brownie run scripts/advanced_collectible/create_collectible.py --network rinkeby

Il nostro oggetto da collezione qui è una razza di cane casuale restituita dal Chainlink VRF. Chainlink VRF è un modo per ottenere numeri casuali dimostrabili e quindi una vera rarità nei nostri NFT. Quindi vogliamo creare i suoi metadati.

brownie run scripts/advanced_collectible/create_metadata.py --network rinkeby

Possiamo quindi caricare facoltativamente questi dati su IPFS in modo da poter avere un tokenURI. Ti mostrerò come farlo più tardi. Per ora, useremo solo il tokenURI di esempio di:

https://ipfs.io/ipfs/Qmd9MCGtdVz2miNumBHDbvj8bigSgTwnr4SbyH6DNnpWdt?filename=1-PUG.json

Se scarichi IPFS Companion nel tuo browser, puoi utilizzare quell'URL per vedere cosa restituisce l'URI. Assomiglierà  a qualcosa del genere:

{
    "name": "PUG",
    "description": "An adorable PUG pup!",
    "image": "https://ipfs.io/ipfs/QmSsYRx3LpDAb1GZQm7zZ1AuHZjfbPkD6J7s9r41xu1mf8?filename=pug.png",
    "attributes": [
        {
            "trait_type": "cuteness",
            "value": 100
        }
    ]
}

Quindi possiamo eseguire il nostro script  set_tokenuri.py:

brownie run scripts/advanced_collectible/set_tokenuri.py --network rinkeby

E otterremo un output come questo:

Running 'scripts/advanced_collectible/set_tokenuri.py::main'...
Working on rinkeby
Transaction sent: 0x8a83a446c306d6255952880c0ca35fa420248a84ba7484c3798d8bbad421f88e
  Gas price: 1.0 gwei   Gas limit: 44601   Nonce: 354
  AdvancedCollectible.setTokenURI confirmed - Block: 8331653   Gas used: 40547 (90.91%)

Awesome! You can view your NFT at https://testnets.opensea.io/assets/0x679c5f9adC630663a6e63Fa27153B215fe021b34/0
Please give up to 20 minutes, and hit the "refresh metadata" button

E possiamo premere il link fornito per vedere come appare su Opensea! Potrebbe essere necessario premere il pulsante refresh metadata e attendere qualche minuto.

La razza casuale

Parliamo di quello che abbiamo appena fatto. Ecco il nostro AdvancedCollectible.sol:

pragma solidity 0.6.6;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@chainlink/contracts/src/v0.6/VRFConsumerBase.sol";

contract AdvancedCollectible is ERC721, VRFConsumerBase {
    uint256 public tokenCounter;
    enum Breed{PUG, SHIBA_INU, BRENARD}
    // add other things
    mapping(bytes32 => address) public requestIdToSender;
    mapping(bytes32 => string) public requestIdToTokenURI;
    mapping(uint256 => Breed) public tokenIdToBreed;
    mapping(bytes32 => uint256) public requestIdToTokenId;
    event requestedCollectible(bytes32 indexed requestId); 


    bytes32 internal keyHash;
    uint256 internal fee;
    uint256 public randomResult;
    constructor(address _VRFCoordinator, address _LinkToken, bytes32 _keyhash)
    public 
    VRFConsumerBase(_VRFCoordinator, _LinkToken)
    ERC721("Dogie", "DOG")
    {
        tokenCounter = 0;
        keyHash = _keyhash;
        fee = 0.1 * 10 ** 18;
    }

    function createCollectible(string memory tokenURI, uint256 userProvidedSeed) 
        public returns (bytes32){
            bytes32 requestId = requestRandomness(keyHash, fee, userProvidedSeed);
            requestIdToSender[requestId] = msg.sender;
            requestIdToTokenURI[requestId] = tokenURI;
            emit requestedCollectible(requestId);
    }

    function fulfillRandomness(bytes32 requestId, uint256 randomNumber) internal override {
        address dogOwner = requestIdToSender[requestId];
        string memory tokenURI = requestIdToTokenURI[requestId];
        uint256 newItemId = tokenCounter;
        _safeMint(dogOwner, newItemId);
        _setTokenURI(newItemId, tokenURI);
        Breed breed = Breed(randomNumber % 3); 
        tokenIdToBreed[newItemId] = breed;
        requestIdToTokenId[requestId] = newItemId;
        tokenCounter = tokenCounter + 1;
    }

    function setTokenURI(uint256 tokenId, string memory _tokenURI) public {
        require(
            _isApprovedOrOwner(_msgSender(), tokenId),
            "ERC721: transfer caller is not owner nor approved"
        );
        _setTokenURI(tokenId, _tokenURI);
    }
}

Usiamo il Chainlink VRF per creare una razza casuale da un elenco di PUG, SHIBA_INU, BRENARD. Questa volta chiamando createCollectible, abbiamo effettivamente avviato una richiesta al nodo Chainlink VRF off-chain e siamo tornati con un numero casuale per creare l'NFT con una di quelle 3 razze.

L'uso della vera casualità nei tuoi NFT è un ottimo modo per creare una vera rarità e l'uso di un numero casuale di un oracolo Chainlink significa che il tuo numero è probabilmente casuale e non può essere influenzato dai minatori.

Puoi saperne di più su Chainlink VRF nella documentazione .

Il nodo Chainlink risponde chiamando la funzione fulfillRandomness e crea l'oggetto da collezione in base al numero casuale. Quindi dobbiamo ancora chiamare _setTokenURI per dare al nostro NFT l'aspetto di cui ha bisogno.

Qui non abbiamo fornito i nostri attributi NFT, ma gli attributi sono un ottimo modo per far combattere e interagire i nostri NFT. Puoi vedere un ottimo esempio di NFT con attributi in questo esempio di Dungeons and Dragons .

Metadati da IPFS

Stiamo usando IPFS per memorizzare due file:

1. L'immagine dell'NFT (l'immagine del carlino)
2. Il file tokenURI (il file JSON che include anche il collegamento dell'immagine)

Usiamo IPFS perché è una piattaforma decentralizzata gratuita. Possiamo aggiungere i nostri tokenURI e immagini a IPFS scaricando IPFS desktop e premendo il pulsante import.

Quindi, possiamo condividere l'URI premendo i 3 punti accanto al file che vogliamo condividere, premendo share link e copiando il collegamento fornito. Possiamo quindi aggiungere questo collegamento nel nostro file  set_tokenuri.py per modificare l'URI del token che vogliamo utilizzare.

Persistenza

Tuttavia, se il tokenURI è solo sul nostro nodo, significa che quando il nostro nodo è inattivo, nessun altro può visualizzarlo. Quindi vogliamo che altri pin siano nel nostro NFT. Possiamo utilizzare un servizio di pinning come Pinata per mantenere in vita i nostri dati anche quando il nostro nodo IPFS è inattivo.

Immagino che in futuro sempre più metadati verranno archiviati su IPFS e altre piattaforme di archiviazione decentralizzate. I server centralizzati possono non funzionare e significherebbe che l'arte di quegli NFT è persa per sempre. Assicurati di controllare dove si trova il tokenURI dell'NFT che usi!

Mi aspetto anche che più persone utilizzeranno piattaforme dStorage come Filecoin, poiché anche l'utilizzo di un servizio di pinning non è decentralizzato come dovrebbe essere.

Andando avanti

Se desideri una video guida sull'NFT avanzato, puoi guardare il video NFT avanzato .

Ora hai le capacità per creare NFT divertenti, personalizzabili e interattivi e renderli su un mercato.

Gli NFT sono modi divertenti e potenti per avere artisti accuratamente compensati per tutto il duro lavoro che fanno. Buona fortuna e ricordati di divertirti!

Quando sviluppi siti Web e applicazioni utilizzando React e qualsiasi framework React, vorrai aggiungere alcune funzionalità per aiutare i tuoi utenti a navigare nel tuo sito.

Queste funzionalità includono i pulsanti di scorrimento verso l'alto e verso il basso, nonché la possibilità di scorrere in qualsiasi punto della pagina. Queste funzionalità sono semplici da implementare e non è nemmeno necessario utilizzare una libreria esterna.

Ecco cosa costruiremo:

Come scorrere verso l'alto con React

Esistono diverse librerie e plug-in che puoi utilizzare per aggiungere semplicemente la funzione di scorrimento verso l'alto in React. Ma qui, vedremo come implementare facilmente la funzionalità di scorrimento verso l'alto senza utilizzare alcuna libreria.

Iniziamo…

Come implementare la logica

In questo tutorial, sfrutteremo gli hook React useState() e useEffect() per gestire rapidamente questa logica.

Ti consiglio di rendere riutilizzabile questa funzionalità creando un nuovo componente per gestirla. Ad esempio, creerò un componente chiamato ScrollToTop.js .

In questo componente, importeremo prima gli hook useState() e useEffect() di React, seguiti dalla creazione di uno stato per controllare la visibilità del pulsante di scorrimento verso l'alto. Tieni presente che questo è utile solo se desideri che il pulsante venga visualizzato dopo che l'utente ha eseguito uno scorrimento verso il basso per un po' e poi scompaia quando l'utente scorre di nuovo verso l'alto.

Questo stato verrà impostato su false come valore predefinito.

const [showTopBtn, setShowTopBtn] = useState(false);

Il passaggio successivo consiste nell'utilizzare l'hook  useEffect() per gestire la logica che decide quando il pulsante deve essere visualizzato e quando deve scomparire.

Quando l'utente scorre la pagina, utilizzeremo addEventListener() per ascoltare un evento di scorrimento. La funzione di callback visualizzerà il pulsante impostando lo stato showTopBtn su true se la posizione di scorrimento verticale è maggiore del valore specificato (in questo caso, 400), altrimenti lo imposterà false e non lo visualizzerà.

useEffect(() => {
  window.addEventListener('scroll', () => {
    if (window.scrollY > 400) {
      setShowTopBtn(true);
    } else {
      setShowTopBtn(false);
    }
  });
}, []);

Tieni presente che questo continuerà a funzionare mentre scorri verso il basso nel sito Web. Di conseguenza, il secondo parametro dell'hook useEffect()  è un array vuoto ([]).

Finora, siamo stati in grado di controllare quando appare il nostro pulsante "scorri verso l'alto" e quando no. Il passo successivo è scrivere la logica fondamentale che fa scorrere la pagina verso l'alto una volta cliccato il pulsante.

Per fare ciò, scriveremo una funzione che verrà chiamata ogni volta che l'utente fa clic sul pulsante di scorrimento verso l'alto. Useremo il metodo window.scrollTo() di JavaScript per farlo. È una tecnica per scorrere una pagina Web fino a un determinato insieme di coordinate nel documento.

const goToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
};

Nota: window.scrollTo() supporta anche un'opzione behavior, che specifica se lo scorrimento deve muoversi dolcemente (in modo fluido) o avvenire istantaneamente in un solo salto (il valore predefinito auto).

A questo punto, abbiamo implementato con successo tutta la logica necessaria per creare un pulsante di “scorri verso l'alto” con React. Successivamente aggiungeremo il metodo onclick() al pulsante nel nostro markup.

Se hai seguito correttamente i passaggi, il tuo codice finale dovrebbe assomigliare a questo:

import React, { useState, useEffect } from 'react';
import { FaAngleUp } from 'react-icons/fa';

import './index.css';

const ScrollToTop = () => {
  const [showTopBtn, setShowTopBtn] = useState(false);
  useEffect(() => {
    window.addEventListener('scroll', () => {
      if (window.scrollY > 400) {
        setShowTopBtn(true);
      } else {
        setShowTopBtn(false);
      }
    });
  }, []);
  const goToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };

  return (
    <div className="top-to-btm">
      {showTopBtn && (
        <FaAngleUp className="icon-position icon-style" onClick={goToTop} />
      )}
    </div>
  );
};
export default ScrollToTop;

Ho incluso il markup, quindi puoi vedere dove ho aggiunto la funzione onClick().

Il passaggio successivo consiste nell'aggiungere questo componente a qualsiasi pagina del tuo sito Web in cui desideri che funzioni. Se vuoi che funzioni su tutte le pagine della tua applicazione React, aggiungilo semplicemente al tuo file App.js.

Questo viene fatto importando prima il componente (ScrollToTop.js) e quindi aggiungendo il componente da qualche parte all'interno del tuo file App.js:

import ScrollToTop from './ScrollToTop.js';

const App = () => {
    return (
        <div className="App">
            <ScrollToTop />
            <div className="section section1"></div>
            <div className="section section2"></div>
            <div className="section section3"></div>
            <div className="section section4"></div>
            <div className="section section5"></div>
        </div>
    );
}

export default App;

Come scorrere verso il basso con React

Questa è la funzionalità più semplice da aggiungere poiché tutto ciò che devi fare è scrivere una funzione per gestire la logica e quindi chiamarla quando viene premuto il pulsante. Ecco come apparirà la logica:

const scrollToBottom = () => {
  window.scrollTo({
    top: document.documentElement.scrollHeight,
    behavior: 'smooth',
  });
};

Semplicemente, quello che stiamo facendo è impostare la posizione scrollTo come altezza dell'intera pagina. Il prossimo passo sarebbe includere il metodo onclick() nel nostro markup per il pulsante.

<div className="link btn" onClick={scrollToBottom}>
  Scroll to bottom <MdArrowDropDownCircle />
</div>

Come scorrere a una sezione particolare con React

Questo è comunemente usato nelle NavBar su siti Web a pagina singola quando gli utenti desiderano andare a una determinata sezione della pagina Web usando la barra di navigazione. Questo è abbastanza simile a quello che abbiamo fatto.

Spiegherò l'idea e poi scriveremo una funzione riutilizzabile per eliminare la ripetizione non necessaria del codice.

Come implementare la logica

Useremo useRef() per questo, che è un hook integrato di React che accetta un argomento o parametro come valore iniziale e restituisce un riferimento.

Il riferimento ha una proprietà interessante e utile denominata current. L'hook useRef() è simile all'hook JavaScript getElementById().

Il primo passo è installare useRef() e quindi creare un ref per accedere alla parte a cui vogliamo scorrere. useRef() accetta un valore che è null.

const aboutSection = useRef(null);

Il prossimo passo sarebbe aggiungere il ref che abbiamo dichiarato alla sezione in cui desideriamo scorrere:

<div className="section section2" ref={aboutSection}>
  <h2>About Us</h2>
</div>

Una volta completato, passeremo alla logica effettiva responsabile di questa funzionalità. Lo faremo scrivendo una funzione che verrà chiamata ogni volta che un utente preme il Nav-link/pulsante. Quindi il metodo window.scrollTo() scorrerà ora nella posizione specificata.

In questa funzione, utilizzeremo il metodo window.scrollTo() di JavaScript che viene utilizzato per scorrere una pagina Web fino a un determinato insieme di coordinate nel documento.

const scrollDown = () => {
  window.scrollTo({
    top: aboutSection.current.offsetTop,
    behavior: 'smooth',
  });
};

Vedrai che forniremo la parte superiore (dove vogliamo andare) come aboutSection.current.offsetTop. aboutSection è la sezione che abbiamo appena acquisito usando ref e ref ha una proprietà chiamata current che abbiamo usato per ottenere l'elemento specifico. Infine abbiamo usato offsetTop per ottenere il confine esterno del particolare elemento/sezione su cui vogliamo scorrere.

A questo punto, abbiamo implementato con successo tutta la logica necessaria per aiutarci a scorrere verso un punto specifico della nostra homepage usando React. Successivamente, aggiungeremo il metodo onclick() al pulsante nel nostro markup.

<li className="link" onClick={scrollDown}>
  About Us
</li>

Come rendere il nostro codice riutilizzabile

Quando sono necessari così tanti Navlink per navigare in aree diverse di una singola pagina web, è naturale voler ripetere la logica per gestire ogni sezione. Questo è l'approccio sbagliato.

Possiamo rendere la logica riutilizzabile in questo modo:

const scrollDown = (ref) => {
  window.scrollTo({
    top: ref.current.offsetTop,
    behavior: 'smooth',
  });
};

Nel codice sopra, stiamo passando il valore del ref dalla funzione che viene attivata nel pulsante individuale.

Ecco come potrebbe apparire la tua pagina web:

<div className="section section1">
  <div className="link btn">
    Scroll to bottom <MdArrowDropDownCircle />
  </div>
  <ul className="nav-links">
    <li className="link" onClick={() => scrollDown(aboutSection)}>
      About Us
    </li>
    <li className="link" onClick={() => scrollDown(servcesSection)}>
      Services
    </li>
    <li className="link" onClick={() => scrollDown(contactSection)}>
      Contact
    </li>
  </ul>
</div>

<div className="section section2" ref={aboutSection}>
  <h2>About Us</h2>
</div>
<div className="section section3" ref={servcesSection}>
  <h2>Services</h2>
</div>
<div className="section section4" ref={contactSection}>
  <h2>Contact</h2>
</div>

Conclusione

In questo articolo, abbiamo visto come implementare lo scorrimento in alto, in basso e in una posizione specifica con React. Abbiamo usato vari hook React per aiutarci a farlo.

Puoi controllare questo repository per vedere il codice di implementazione completo. Ecco anche il collegamento a un esempio live.

In React esistono molti modi per recuperare i dati da un'API esterna. Ma quale dovresti usare per le tue applicazioni nel 2021?

In questo tutorial, esamineremo cinque dei modelli più comunemente utilizzati per recuperare i dati con React effettuando una richiesta HTTP a una API REST.

Non vedremo solo come recuperare i dati, ma anche come gestire al meglio il caricamento e lo stato di errore durante il recupero dei dati.

Iniziamo!

Per tutti questi esempi, utilizzeremo un endpoint della popolare API Placeholder JSON, ma puoi utilizzare una API che hai creato (come un'API Node con Express) o qualsiasi altra API pubblica.

1. Come recuperare i dati in React utilizzando l'API Fetch

Il modo più accessibile per recuperare i dati con React è utilizzare l'API Fetch.

L'API Fetch è uno strumento integrato nella maggior parte dei browser moderni sull'oggetto window (window.fetch) e ci consente di effettuare richieste HTTP molto facilmente utilizzando promesse JavaScript.

Per fare una semplice richiesta GET con fetch dobbiamo solo includere l'URL endpoint a cui vogliamo fare la nostra richiesta. Vogliamo fare questa richiesta una volta che il nostro componente React è stato montato.

Per fare ciò, facciamo la nostra richiesta all'interno dell'hook useEffect e ci assicuriamo di fornire un array di dipendenze vuoto come secondo argomento, in modo che la nostra richiesta venga effettuata solo una volta (supponendo che non dipenda da nessun altro dato nel nostro componente).

Durante la prima callback  .then(), controlliamo se riceviamo la risposta corretta (response.ok). In tal caso, restituiamo la nostra risposta per passarla alla funzione successiva, quindi la richiamiamo come dati JSON, poiché sono i dati che otterremo dalla nostra API di Random User.

Se non è una risposta corretta, si presume che si sia verificato un errore durante la richiesta. Usando fetch, dobbiamo gestire noi stessi gli errori, quindi lanciamo un errore response affinché venga gestito dal nostro callback catch.

Qui nel nostro esempio stiamo mettendo i nostri dati relativi all'errore nello stato con setError. Se c'è un errore, restituiamo il testo "Error!".

Nota che puoi anche visualizzare un messaggio di errore dall'oggetto errore che abbiamo inserito nello stato usando error.message.

Usiamo la callback .finally() come funzione che viene sempre chiamata sia che la nostra promessa si è risolta con successo che non. In essa, abbiamo impostato loading su false, in modo da non vedere più il nostro testo di caricamento.

Quindi vediamo o i nostri dati sulla pagina se la richiesta è stata effettuata con successo, o in caso contrario, che c'è stato un errore nell'effettuare la richiesta .

2. Come recuperare i dati in React utilizzando Axios

Il secondo approccio per fare richieste con React consiste nell'usare la libreria axios.

In questo esempio, modificheremo semplicemente il nostro esempio Fetch installando prima axios usando npm:

npm install axios

Quindi lo importeremo nella parte superiore del file del nostro componente.

Ciò che axios ci consente di fare è utilizzare la stessa identica sintassi di promessa di fetch, ma invece di utilizzare il nostro primo callback per determinare manualmente se la risposta è corretta e in caso contrario,  generare un errore, axios si occupa di questo per noi.

Inoltre, ci consente in quel primo callback di ottenere i dati JSON da response.data.

La cosa conveniente dell'utilizzo di axios è che ha una sintassi molto più breve, cosa che ci consente di ridurre il codice, oltre a includere molti strumenti e funzionalità che mancano nella API fetch.

Tutte queste ragioni sono il motivo per cui è diventata la libreria HTTP di riferimento per gli sviluppatori React.

3. Come recuperare i dati in React utilizzando la sintassi async/await

In ES7 è diventato possibile risolvere le promesse utilizzando la sintassi async / await.

Il vantaggio di questo approccio è che ci consente di rimuovere le nostre callback .then(), .catch(), e .finally() e di recuperare semplicemente i nostri dati risolti in modo asincrono scrivendo del codice sincrono e tutto ciò senza promesse.

In altre parole, non dobbiamo fare affidamento sulle funzioni di callback quando utilizziamo async / await con React.

Dobbiamo essere consapevoli del fatto che quando usiamo useEffect, la funzione effetto (il primo argomento) non può essere trasformata in una funzione async.

Se diamo un'occhiata all'errore di linting che React ci dà se abbiamo usato Create React per costruire il nostro progetto, ci verrà detto che questa funzione non può essere asincrona per prevenire la race condition.

Di conseguenza, invece di rendere quella funzione asincrona, possiamo semplicemente creare nel nostro componente  una funzione asincrona separata, che possiamo chiamare in modo sincrono. Cioè, senza anteporre la parola chiave await .

In questo esempio, creiamo una funzione asincrona chiamata getData. Chiamandola in modo sincrono all'interno di useEffect, possiamo recuperare i nostri dati come ci aspetteremmo.

4. Come recuperare i dati in React utilizzando un hook React personalizzato (useFetch)

Nel tempo, potresti renderti conto che diventa un po' noioso e dispendioso in termini di tempo continuare a scrivere l'hook useEffect con tutto il suo boilerplate all'interno di ogni componente in cui desideri recuperare i dati.

Per ridurre il nostro codice riutilizzato, possiamo usare un hook personalizzato come un'astrazione speciale, che possiamo scrivere noi stessi da una libreria di terze parti (come se fossimo qui, usando la libreria react-fetch-hook).

Un hook personalizzato che effettua la nostra richiesta HTTP ci consente di rendere i nostri componenti molto più concisi. Tutto quello che dobbiamo fare è chiamare il nostro hook nella parte superiore del nostro componente.

In questo caso, otteniamo tutti i dati, il caricamento e lo stato di errore di cui abbiamo bisogno per poter utilizzare la stessa struttura per il nostro componente come prima, ma senza dover usare useEffect. Inoltre, non abbiamo più bisogno di scrivere imperativamente come risolvere la nostra promessa dalla nostra richiesta GET ogni volta che vogliamo fare una richiesta.

5. Come recuperare i dati in React utilizzando la libreria di Query React

L'uso di hook personalizzati è un ottimo approccio per scrivere richieste HTTP molto più concise per ottenere i nostri dati e tutti i relativi stati. Ma una libreria che porta davvero il recupero dei dati con gli hook al livello successivo è React Query.

React Query non solo ci consente di utilizzare hook personalizzati che possiamo riutilizzare tra i nostri componenti in modo conciso, ma ci offre anche una grande quantità di strumenti di gestione dello stato per essere in grado di controllare quando, come e con quale frequenza i nostri dati vengono recuperati .

In particolare, la query React ci fornisce una cache, che puoi vedere di seguito tramite React Query Devtools. Questo ci consente di gestire facilmente le richieste che abbiamo fatto in base al valore della chiave che specifichiamo per ogni richiesta.

Per le richieste seguenti, la nostra query per i nostri dati utente casuali è identificata dalla stringa 'random-user' (fornita come primo argomento per useQuery).

Facendo riferimento a quella chiave, possiamo fare cose potenti come recuperare, convalidare o ripristinare le nostre varie query.

Se ci affidiamo alla nostra soluzione di hook personalizzata o useEffect, recupereremo i nostri dati ogni volta che il nostro componente viene montato. Fare questo nella maggior parte dei casi non è necessario. Se il nostro stato esterno non è cambiato, idealmente non dovremmo mostrare lo stato di caricamento ogni volta che visualizziamo il nostro componente.

React Query migliora notevolmente la nostra esperienza utente provando a servire prima i nostri dati dalla sua cache e quindi aggiornando i dati in background per visualizzare le modifiche se il nostro stato API è cambiato.

Ciò offre anche un arsenale di potenti strumenti per gestire meglio le nostre richieste in base a come i nostri dati cambiano attraverso la nostra richiesta.

Ad esempio, se la nostra applicazione ci ha consentito di aggiungere un utente diverso, potremmo voler recuperare quella query, una volta che l'utente è stato aggiunto. Se sappiamo che la query viene modificata molto frequentemente, potremmo voler specificare che dovrebbe essere aggiornata ogni minuto circa. O essere aggiornata ogni volta che l'utente clicca sulla la scheda della finestra.

In breve, React Query è la soluzione ideale non solo per effettuare richieste in modo conciso, ma anche per gestire in modo efficiente ed efficace i dati che vengono restituiti per le nostre richieste HTTP attraverso i componenti della nostra app.

Se hai difficoltà a capire l'hook useEffect, non sei il solo.

Sia i principianti che gli sviluppatori esperti trovano che sia uno degli hook più difficili da capire, perché richiede la comprensione di alcuni concetti di programmazione non familiari.

In questa guida rapida, illustreremo il motivo per cui esiste questo hook, come comprenderlo meglio e come utilizzarlo correttamente oggi nei tuoi progetti React.

Perché si chiama useEffect?

Quando quando i principali Hook di React sono stati aggiunto alla libreria nel 2018 (useState, useEffect e così via), molti sviluppatori sono rimasti disorientati dal nome di questo hook: "useEffect".

Che cos'è esattamente un "effetto"?

La parola effetto si riferisce a un termine di programmazione funzionale chiamato "effetto collaterale" .

Ma per capire davvero cos'è un effetto collaterale, dobbiamo prima cogliere il concetto di funzione pura.

Potresti non saperlo, ma la maggior parte dei componenti di React sono pensati per essere funzioni pure.

Può essere strano pensare ai componenti di React come funzioni, ma lo sono.

Lo si capisce vedendo come un normale componente funzione di React venga dichiarato come una funzione JavaScript:

function MyReactComponent() {}

La maggior parte dei componenti React sono funzioni pure, il che significa che ricevono un input e producono un output prevedibile in JSX.

Per una funzione JavaScript l'input sono gli argomenti. Invece, qual è l'input per un componente React? Le proprietà!

Qui abbiamo un componente User che ha dichiarata una proprietà name. All'interno di User, il valore della proprietà viene visualizzato in un elemento di intestazione.

export default function App() {
  return <User name="John Doe" />   
}
  
function User(props) {
  return <h1>{props.name}</h1>; // John Doe
}

Questo è una funzione pura perché, dato lo stesso input, restituirà sempre lo stesso output.

Se passiamo a User una proprietà name con valore "John Doe", il nostro output sarà sempre John Doe.

Potresti dire: "Chi se ne frega? Perché c'è un nome anche per questo?"

Le funzioni pure hanno il grande vantaggio di essere prevedibili, affidabili e facili da testare.

Questo è comparato a quando dobbiamo eseguire un effetto collaterale nel nostro componente.

Quali sono gli effetti collaterali di React?

Gli effetti collaterali non sono prevedibili perché sono azioni che vengono eseguite con il "mondo esterno".

Eseguiamo un effetto collaterale quando dobbiamo raggiungere l'esterno dei nostri componenti React per fare qualcosa. L'esecuzione di un effetto collaterale, tuttavia, non ci darà un risultato prevedibile.

Pensa se dovessimo richiedere dati (come i post di un blog) da un server che ha fallito e invece dei dati dei nostri post, ci fornisce una risposta con codice di stato 500.

Praticamente tutte le applicazioni si basano sugli effetti collaterali per funzionare in un modo o nell'altro, a parte le applicazioni più semplici.

Gli effetti collaterali comuni includono:

• Effettuare una richiesta a un'API per i dati da un server back-end
• Interagire con le API del browser (ovvero  utilizzare direttamente document o window)
• Utilizzare funzioni di temporizzazione imprevedibili come setTimeout o setInterval

Questo è il motivo per cui esiste useEffect: per fornire un modo per gestire l'esecuzione di questi effetti collaterali in quelli che altrimenti sarebbero componenti React puri.

Ad esempio, se volessimo modificare il tag meta del titolo per visualizzare il nome dell'utente nella scheda del browser, potremmo farlo all'interno del componente stesso, ma non dovremmo.

function User({ name }) {
  document.title = name; 
  // Questo è un effetto collaterale. Non farlo nel corpo del componente!
    
  return <h1>{name}</h1>;   
}

Se eseguiamo un effetto collaterale direttamente nel corpo del nostro componente, interferisce con il rendering del nostro componente React.

Gli effetti collaterali dovrebbero essere separati dal processo di rendering. Se abbiamo bisogno di eseguire un effetto collaterale, dovrebbe essere fatto rigorosamente dopo il rendering del nostro componente.

Questo è ciò che ci offre useEffect.

In breve, useEffect è uno strumento che ci consente di interagire con il mondo esterno ma non influisce sul rendering o sulle prestazioni del componente in cui si trova.

Come si usa useEffect?

La sintassi di base di useEffect è la seguente:

// 1. importa useEffect
import { useEffect } from 'react';

function MyComponent() {
  // 2. chiamalo prima che il JSX venga restituito
  // 3. passagli due argomenti: una funzione e un array
  useEffect(() => {}, []);
  
  // return ...
}

Il modo corretto per eseguire l'effetto collaterale nel nostro componente User è il seguente:

1. Importiamo useEffect  da "react"
2. Lo chiamiamo nel nostro componente prima che il JSX venga restituito
3. Gli passiamo due argomenti: una funzione e un array

import { useEffect } from 'react';

function User({ name }) {
  useEffect(() => {
    document.title = name;
  }, [name]);
    
  return <h1>{name}</h1>;   
}

La funzione passata a useEffect è una funzione di callback che verrà chiamata dopo il rendering del componente.

In questa funzione possiamo eseguire l'effetto collaterale, o multipli effetti colllaterali se lo desideriamo.

Il secondo argomento è un array, chiamato array delle dipendenze, che dovrebbe includere tutti i valori su cui si basa il effetto collaterale.

Nel nostro esempio sopra, poiché stiamo cambiando il titolo in base a un valore nell'ambito esterno, name, dobbiamo includerlo all'interno dell'array delle dipendenze.

Quello che farà questo array è controllare e vedere se un valore (in questo caso il nome) è cambiato tra i rendering. In tal caso, eseguirà nuovamente la nostra funzione di utilizzo dell'effetto.

Questo ha senso perché se il nome cambia, vogliamo visualizzare il nuovo nome e quindi eseguire nuovamente il nostro effetto collaterale.

Come correggere gli errori comuni con useEffect

Ci sono alcuni dettagli sottili di cui essere consapevoli per evitare errori con useEffect.

Se non fornisci affatto l'array delle dipendenze e fornisci solo una funzione per useEffect, questa verrà eseguita dopo ogni rendering .

Ciò può causare problemi quando si tenta di aggiornare lo stato all'interno dell'hook useEffect.

Se dimentichi di fornire le tue dipendenze correttamente e stai impostando un pezzo di stato locale quando lo stato viene aggiornato, il comportamento predefinito di React è di rieseguire il rendering del componente. E quindi, poiché useEffect viene eseguito dopo ogni singolo rendering senza l'array delle dipendenze, avremo un ciclo infinito.

function MyComponent() {
  const [data, setData] = useState([])  
    
  useEffect(() => {
    fetchData().then(myData => setData(myData))
    // Errore! useEffect viene eseguito dopo ogni rendering senza l'array delle dipendenze, causando un ciclo infinito
  }); 
}

Dopo il primo rendering, useEffect verrà eseguito, lo stato verrà aggiornato, il che provocherà un re-render, che farà sì che useEffect venga eseguito nuovamente, riavviando il processo all'infinito.

Questo è chiamato un ciclo infinito e questo effettivamente interrompe la nostra applicazione.

Se stai aggiornando lo stato all'interno di useEffect, assicurati di fornire un array di dipendenze vuoto. Se fornisci un array vuoto, cosa che ti consiglio di fare per impostazione predefinita ogni volta che usi useEffect, ciò farà sì che la funzione dell'effetto venga eseguita solo una volta dopo che il componente è stato renderizzato la prima volta.

Un esempio comune per questo è il recupero dei dati. Per un componente, potresti voler recuperare i dati una volta, metterli nello stato e quindi visualizzarli nel tuo JSX.

function MyComponent() {
  const [data, setData] = useState([])  
    
  useEffect(() => {
    fetchData().then(myData => setData(myData))
    // Corretta! Viene eseguito una volta dopo il rendering con array vuoto
  }, []); 
   
  return <ul>{data.map(item => <li key={item}>{item}</li>)}</ul>
}

Qual è la funzione di pulizia in useEffect?

La parte finale dell'esecuzione corretta degli effetti collaterali in React è la funzione di pulizia degli effetti .

A volte i nostri effetti collaterali devono essere eliminati. Ad esempio, se hai un timer per il conto alla rovescia che utilizza la funzione setInterval, quell'intervallo non si interromperà a meno che non utilizziamo la funzione clearInterval.

Un altro esempio è utilizzare la sottoscrizione con WebSocket. Le sottoscrizioni devono essere "disattivate" quando non le utilizziamo più, ed è a questo che serve la funzione di pulizia.

Se stiamo impostando lo stato usando  setInterval e l'effetto collaterale non viene eliminato, quando il nostro componente si smonta e non lo stiamo più utilizzando, lo stato viene distrutto con il componente, ma la funzione setInterval continuerà a funzionare.

function Timer() {
  const [time, setTime] = useState(0);
    
  useEffect(() => {
    setInterval(() => setTime(1), 1000); 
    // conta fino a 1 ogni secondo
    // dobbiamo smettere di usare setInterval quando il componente viene smontato
  }, []);
}

Il problema con questo se il componente si sta distruggendo, è che setInterval proverà ad aggiornare una variabile, un pezzo di stato time che non esiste più. Questo è un errore chiamato perdita di memoria.

Per utilizzare la funzione di pulizia, è necessario restituire una funzione dall'interno della funzione useEffect.

All'interno di questa funzione possiamo eseguire la nostra pulizia, in questo caso utilizzare clearInterval e interrompere setInterval.

function Timer() {
  const [time, setTime] = useState(0);
    
  useEffect(() => {
    let interval = setInterval(() => setTime(1), 1000); 

    return () => {
      // setInterval azzerato quando il componente viene smontato
      clearInterval(interval);
    }
  }, []);
}

La funzione di pulizia verrà chiamata quando il componente viene smontato.

Un esempio comune di smontaggio di un componente è il passaggio a una nuova pagina o un nuovo percorso nella nostra applicazione in cui il componente non viene più visualizzato.

Quando un componente viene smontato, la nostra funzione di pulizia viene eseguita, il nostro intervallo viene cancellato e non viene più visualizzato un errore nel tentativo di aggiornare una variabile di stato che non esiste.

Infine, la pulizia degli effetti collaterali non è richiesta in tutti i casi. È richiesto solo in alcuni casi, ad esempio quando è necessario interrompere un effetto collaterale ripetuto quando il componente si smonta.

Uno dei concetti più essenziali che qualsiasi sviluppatore JavaScript moderno deve comprendere è lo stato.

Se non capisci lo stato, non sarai in grado di utilizzare e sfruttare appieno le potenti librerie come React per costruire le tue applicazioni.

Vediamo esattamente cosa è lo stato, come esiste già ora nelle tue applicazioni JavaScript e come React ci consente di gestirlo molto più facilmente con gli hook integrati come useState.

Cos'è lo stato?

Qualcosa che potrebbe sorprenderti è che qualsiasi sito Web o applicazione che crei con semplice JavaScript coinvolge già lo stato, anche se non è ovvio dove vive.

Ecco un semplice esempio:

Diciamo che stiamo costruendo un'applicazione contatore con JavaScript. Vogliamo che questa applicazione sia in grado di visualizzare il conteggio corrente e di aumentare e diminuire il conteggio di uno.

Consisterà solo nel conteggio corrente e in due pulsanti che rispettivamente aumentano e diminuiscono il conteggio di uno.

Ecco come apparirà la versione finale della nostra app:

Ecco il markup iniziale per la nostra applicazione:

<!DOCTYPE html>
<html>
  <head>
    <title>Counter App</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>
      <button>+ 1</button>
      <span>0</span>
      <button>- 1</button>
    </div>
  </body>
</html>

In poche parole, lo stato sono i dati che dobbiamo gestire nel tempo all'interno della nostra applicazione.

Lo stato viene spesso modificato tramite l'input dell'utente come in questo caso, all'interno della nostra applicazione.

Qual è lo stato nella app contatore? È il numero del conteggio.

L'utente può aumentare o diminuire il valore dello stato facendo clic sull'apposito pulsante. La cosa importante è che vogliamo mostrare queste modifiche al nostro utente.

Problemi con lo stato in JavaScript semplice

Sebbene lo stato sembri un concetto semplice, ci sono due problemi con la sua gestione quando si utilizza solo normale JavaScript:

1. Non è ovvio cosa sia lo stato o dove viva.
2. La lettura e l'aggiornamento dello stato sono un processo innaturale e spesso ripetitivo quando si utilizzano API browser native come document.

Come faremmo per aggiornare lo stato del contatore quando l'utente fa clic su uno dei pulsanti?

Per prima cosa dobbiamo ottenere un riferimento a ciascun elemento. Per fare ciò in normale JavaScript, è pratica comune aggiungere un attributo id univoco a ciascun elemento, selezionare ogni elemento in JavaScript con il metodo document.querySelector e memorizzare il riferimento in una variabile locale:

<!DOCTYPE html>
<html>
  <head>
    <title>Counter App</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>
      <button id="increment">+ 1</button>
      <span id="count">0</span>
      <button id="decrement">- 1</button>
    </div>

    <script>
      const increment = document.querySelector("#increment");
      const count = document.querySelector("#count");
      const decrement = document.querySelector("#decrement");
    </script>
  </body>
</html>

Ora che abbiamo i riferimenti a ogni elemento HTML, come facciamo a far funzionare il pulsante di incremento?

Per prima cosa dobbiamo ascoltare un evento di clic sul nostro pulsante di incremento. Quindi, quando si fa clic sul pulsante, è necessario ottenere il valore di conteggio corrente dall'elemento con id "count".

Per fare ciò, ci immergiamo nel documento HTML usando l'API document e otteniamo quel valore con count.innerText. Il valore innerText è una stringa, quindi lo convertiamo in un numero, aggiungiamo 1 e riscriviamo quel valore in count.innerText .

Per far funzionare il pulsante di decremento, eseguiamo nuovamente gli stessi passaggi con la differenza che usiamo l'espressione Number(count.innerText - 1).

<!DOCTYPE html>
<html>
  <head>
    <title>Counter App</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>
      <button id="increment">+ 1</button>
      <span id="count">0</span>
      <button id="decrement">- 1</button>
    </div>

    <script>
      const increment = document.querySelector("#increment");
      const count = document.querySelector("#count");
      const decrement = document.querySelector("#decrement");

      increment.addEventListener("click", () => {
        count.innerText = Number(count.innerText) + 1;
      });

      decrement.addEventListener("click", () => {
        count.innerText = Number(count.innerText) - 1;
      });
    </script>
  </body>
</html>

Non sono molte righe di codice, ma qui puoi vedere che ci sono una serie di passaggi che sono ripetitivi e altri che non sono molto intuitivi:

• Aggiungere un ID arbitrario agli elementi HTML
• Eseguire una query per l'elemento utilizzando JavaScript
• Memorizzare il riferimento all'elemento nella variabile
• Ascoltare l'evento appropriato sull'elemento
• Ottenere il valore dello stato corrente utilizzando l'API document
• Riscrivere il nuovo valore di stato nella pagina con .innerText

Queste sono le molte istruzioni di basso livello necessarie per il funzionamento del programma, ma non ci aiutano a pensare allo stato sottostante.

Come abbiamo visto, lo stato vive nel browser. Ciò significa che dobbiamo prima "trovare" lo stato e poi imperativamente (in un modo che il computer capisce meglio di noi) aggiornare quel valore.

Fortunatamente, React ci offre un modo molto più semplice per aggiornare lo stato e pensare allo stato.

In che modo React ci aiuta a gestire lo stato?

Un vantaggio significativo nell'utilizzo di React e il motivo per cui è nel tuo interesse utilizzare React per sviluppare le tue applicazioni JavaScript è che offre schemi molto più semplici per aggiornare lo stato.

A differenza del normale JavaScript, React si occupa del difficile lavoro di aggiornare ciò che l'utente vede. Tutto quello che dobbiamo fare è dirgli quale stato stiamo gestendo e quale dovrebbe essere il nuovo valore.

Invece di avere lo stato che vive all'interno del browser e doverlo trovare ogni volta che dobbiamo leggerlo o aggiornarlo, possiamo semplicemente inserirlo in una variabile e quindi aggiornare il valore di quella variabile. Dopo averlo fatto, l'aggiornamento e il nuovo valore verranno visualizzati agli utenti.

Questo è l'intero concetto di gestione dello stato in React.

Invece di usare un documento HTML, possiamo scrivere tutto il nostro markup all'interno di un componente React.

È scritto in modo identico a una normale funzione JavaScript e visualizza gli stessi elementi HTML utilizzando una sintassi identica chiamata JSX.

export default function Counter() {
  return (
    <div>
      <button>+ 1</button>
      <span>0</span>
      <button>- 1</button>
    </div>
  );
}

Come possiamo fare la stessa applicazione contatore con React?

Nell'app React, una volta identificato qual è lo stato, lo controlliamo utilizzando una variabile JavaScript.

Questa variabile può essere dichiarata in molti modi. Il modo più diffuso per gestire lo stato dei componenti è con l'hook useState .

Un hook in React funziona in modo molto simile alle normali funzioni JavaScript. Ciò significa che possiamo richiamarlo nella parte superiore del nostro componente e passargli il valore predefinito come valore iniziale per la nostra app contatore.

Poiché il valore iniziale del nostro valore di conteggio è zero, chiamiamo semplicemente il nostro hook e gli passiamo il valore 0 e quel valore viene inserito nella nostra variabile di stato.

import { useState } from 'react';

export default function Counter() {
  // il valore count vive ed è gestito qui!
  const [count] = useState(0);  
    
  return (
    <div>
      <button>+ 1</button>
      <span>{count}</span> {/* usa le parentesi graffe per aggiungere il valore di count in JSX: 0 */}
      <button>- 1</button>
    </div>
  );
}

Non c'è più bisogno di usare count.innerText. Possiamo semplicemente stampare e leggere il valore del nostro stato usando count.

Proprio come qualsiasi variabile JavaScript, possiamo nominarla come vogliamo, non deve essere necessariamente chiamata count: potresti  letteralmente chiamarla con qualsiasi altra parola purché sia ​​un nome JavaScript valido.

Il valore restituito da useState è un array, quando lo destrutturiamo, il primo valore destrutturato è la variabile di stato. il secondo è la funzione per aggiornare lo stato.

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);  
    
  return (
    <div>
      <button>+ 1</button>
      <span>{count}</span>
      <button>- 1</button>
    </div>
  );
}

Come facciamo a far funzionare il pulsante di incremento?

Ecco cosa non dobbiamo fare:

• Non abbiamo bisogno di aggiungere un id agli elementi HTML
• Non abbiamo bisogno di esaminare il DOM e capire quale pulsante è
• Non è necessario ascoltare un evento di clic con document.addEventListener

Per aggiornare lo stato quando fai clic su un pulsante, aggiungi la prop onClick a ciascun pulsante, in questo modo puoi chiamare una funzione quando il pulsante viene premuto dall'utente.

Per il pulsante di incremento, aggiorneremo lo stato passando count + 1 a setCount, e per il pulsante di decremento, passeremo count - 1 a setCount.

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);  
    
  function incrementCount() {
    setCount(count + 1);
  }
    
  function decrementCount() {
    setCount(count - 1);   
  }
    
  return (
    <div>
      <button onClick={incrementCount}>+ 1</button>
      <span>{count}</span>
      <button onClick={decrementCount}>- 1</button>
    </div>
  );
}

Questo è tutto il codice di cui abbiamo bisogno per creare un'app contatore funzionante con React.

Quando ogni pulsante viene premuto e lo stato viene aggiornato, React eseguirà tutto il lavoro di aggiornamento della pagina in modo che l'utente possa vedere il nuovo stato.

Questo è il grande vantaggio dell'utilizzo di React rispetto al normale JavaScript: quando lo stato è gestito utilizzando hook come useState e React si occupa di aggiornare in modo efficiente ciò che l'utente vede, possiamo creare app più semplici e affidabili in cui lo stato è facile da vedere, leggere e aggiornare.

Oggi creerai una delle app più importanti che puoi costruire per te stesso: il tuo portfolio da sviluppatore.

Ogni sviluppatore React o sviluppatore web in generale, deve essere in grado di mostrare ciò che può fare a qualsiasi potenziale cliente o datore di lavoro.

Questo è esattamente ciò che costruiremo in questa guida, con l'aiuto di una serie di strumenti standard del settore, tra cui React, Tailwind CSS e Netlify.

Iniziamo!

Come sarà il Portfolio?

Questa è la versione finale del portfolio che creerai.

Conterrà informazioni su di te, quali progetti hai realizzato, quali abilità hai utilizzato per realizzare quei progetti e includerà un modulo di contatto per i clienti o i datori di lavoro per contattarti.

Quali strumenti utilizzeremo?

• Useremo React per creare l'interfaccia utente dell'app. Ci consentirà di comporre ogni parte della nostra landing page attraverso componenti riutilizzabili ed estendere la nostra app se vogliamo aggiungere funzionalità aggiuntive, come un blog.
• Per definire lo stile della nostra applicazione, utilizzeremo Tailwind CSS. Per dare alla nostra app un aspetto professionale, Tailwind ci consentirà di applicare facilmente più stili combinando i nomi delle classi sui nostri elementi React.
• Per pubblicare la nostra app sul web, utilizzeremo il servizio gratuito Netlify. Servirà il nostro progetto su un dominio personalizzato per gli utenti molto rapidamente con l'aiuto di una CDN (rete di distribuzione dei contenuti).

Come iniziare

Puoi scaricare i file di partenza per il nostro progetto qui.

Quando prendi il codice, tutto ciò che dovrai fare è trascinare la cartella del progetto (decompresso) nell'editor di codice ed eseguire il comando:

npm install

E sei a posto!

Di quali strumenti ho bisogno per costruire il mio portfolio?

Per eseguire l'intero processo di creazione della nostra app dall'inizio alla distribuzione, dovrai disporre di quanto segue:

1. Node.js installato sul tuo computer. Puoi scaricarlo su nodejs.org.
2. Git installato sul tuo computer. Puoi scaricarlo su git-scm.com.
3. Consiglierei di utilizzare VS Code come editor di codice. Puoi scaricarlo su code.visualstudio.com.
4. Un account Netlify gratuito su netlify.com.
5. Un account GitHub gratuito su github.com.

Come costruire la struttura del Portfolio

Il vantaggio dell'utilizzo di React è che potremmo espandere la nostra app a tutte le pagine che vogliamo, molto semplicemente, e aggiungere molti contenuti aggiuntivi.

Tuttavia, poiché stiamo lavorando solo con una pagina, all'interno del nostro componente app possiamo immaginare  molto rapidamente i diversi componenti di cui avremo bisogno. Avremo una barra di navigazione in cima con tutti i collegamenti per passare alle diverse sezioni del nostro portfolio.

Successivamente, includeremo una sezione informazioni, una sezione per i nostri progetti, testimonianze e infine il nostro modulo di contatto.

Questa rapida pianificazione ci consente di capire come devono essere nominati i nostri componenti e in quale ordine. Possiamo andare avanti e aggiungerli tutti al nostro file App.js (in src):

// src/App.js

import React from "react";

export default function App() {
  return (
    <main>
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

Come creare i nostri componenti

Ora che abbiamo elencato tutti questi componenti, dobbiamo andare avanti e crearli.

All'interno della nostra cartella di origine (src), creeremo una cartella chiamata components con tutti i file di cui abbiamo bisogno:

my-portfolio
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.js
    ├── data.js
    ├── index.css
    ├── index.js
    └── components
        ├── About.js
        ├── Contact.js
        ├── Navbar.js
        ├── Projects.js
        ├── Skills.js
        └── Testimonials.js

Quindi creeremo la struttura di base di ogni componente React e la esporteremo da quel file con export default:

// src/components/About.js

export default function About() {}

// ripetere la stessa struttura di base per tutti e 6 i componenti

E infine assicurati di importarlo di nuovo in App.js:

// src/App.js

import React from "react";
import About from "./components/About";
import Contact from "./components/Contact";
import Navbar from "./components/Navbar";
import Projects from "./components/Projects";
import Skills from "./components/Skills";
import Testimonials from "./components/Testimonials";

export default function App() {
  return (
    <main>
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

Nota che ci dovrebbero essere sei componenti in totale.

Introduzione a Tailwind CSS

Una volta fatto, possiamo cominciare a lavorare con Tailwind CSS, in modo da iniziare a dare alla nostra app un aspetto di base.

Il vantaggio dell'utilizzo di Tailwind CSS è che non è necessario scrivere manualmente alcuno stile in un foglio di stile CSS. Tutto quello che dobbiamo fare è combinare più classi per creare l'aspetto che vogliamo.

Ad esempio, per dare al nostro portfolio uno sfondo scuro con testo grigio applicato a tutti i nostri componenti figlio, puoi aggiungere le seguenti classi al nostro elemento main:

// src/App.js

import React from "react";
import About from "./components/About";
import Contact from "./components/Contact";
import Navbar from "./components/Navbar";
import Projects from "./components/Projects";
import Skills from "./components/Skills";
import Testimonials from "./components/Testimonials";

export default function App() {
  return (
    <main className="text-gray-400 bg-gray-900 body-font">
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

Come costruire il componente About

Iniziamo dalla nostra prima sezione, la sezione About. Questo consisterà in un'introduzione di base a noi stessi e alle competenze in cui siamo specializzati.

Includerà anche alcuni collegamenti al modulo di contatto e ai nostri progetti passati. Poiché questi collegamenti saranno in parti diverse della stessa pagina, possiamo utilizzare gli hash: "/#projects" e "/#contact".

Per far funzionare questi collegamenti e per poter saltare a ciascuna sezione, imposteremo l'attributo id della sezione progetti su "projects" e quelli della sezione contatti su "contact".

// src/components/About.js

import React from "react";

export default function About() {
  return (
    <section id="about">
      <div className="container mx-auto flex px-10 py-20 md:flex-row flex-col items-center">
        <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
            Hi, I'm Reed.
            <br className="hidden lg:inline-block" />I love to build amazing
            apps.
          </h1>
          <p className="mb-8 leading-relaxed">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui
            laborum quasi, incidunt dolore iste nostrum cupiditate voluptas?
            Laborum, voluptas natus?
          </p>
          <div className="flex justify-center">
            <a
              href="#contact"
              className="inline-flex text-white bg-green-500 border-0 py-2 px-6 focus:outline-none hover:bg-green-600 rounded text-lg">
              Work With Me
            </a>
            <a
              href="#projects"
              className="ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg">
              See My Past Work
            </a>
          </div>
        </div>
        <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
          <img
            className="object-cover object-center rounded"
            alt="hero"
            src="./coding.svg"
          />
        </div>
      </div>
    </section>
  );
}

Per l'immagine sul lato destro della sezione, sto usando un file svg dalla cartella public, coding.svg.

Questa immagine funge semplicemente da segnaposto temporaneo. Consiglio vivamente di utilizzare un'immagine reale di te stesso.

Come costruire il componente Projects

La nostra sezione progetti sarà composta da un elemento section con una id di "projects". Questo conterrà una galleria di tutti i progetti che abbiamo creato, che includerà immagini.

Avrà il titolo del progetto, insieme alle tecnologie che abbiamo utilizzato per realizzarlo, e un collegamento ad esso (se è distribuito).

// src/components/Projects.js

import { CodeIcon } from "@heroicons/react/solid";
import React from "react";
import { projects } from "../data";

export default function Projects() {
  return (
    <section id="projects" className="text-gray-400 bg-gray-900 body-font">
      <div className="container px-5 py-10 mx-auto text-center lg:px-40">
        <div className="flex flex-col w-full mb-20">
          <CodeIcon className="mx-auto inline-block w-10 mb-4" />
          <h1 className="sm:text-4xl text-3xl font-medium title-font mb-4 text-white">
            Apps I've Built
          </h1>
          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo
            facilis repellat ab cupiditate alias vero aliquid obcaecati quisquam
            fuga dolore.
          </p>
        </div>
        <div className="flex flex-wrap -m-4">
          {projects.map((project) => (
            <a
              href={project.link}
              key={project.image}
              className="sm:w-1/2 w-100 p-4">
              <div className="flex relative">
                <img
                  alt="gallery"
                  className="absolute inset-0 w-full h-full object-cover object-center"
                  src={project.image}
                />
                <div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
                  <h2 className="tracking-widest text-sm title-font font-medium text-green-400 mb-1">
                    {project.subtitle}
                  </h2>
                  <h1 className="title-font text-lg font-medium text-white mb-3">
                    {project.title}
                  </h1>
                  <p className="leading-relaxed">{project.description}</p>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Nota che useremo anche la libreria @heroicons/react per poter scrivere alcune icone SVG come componenti di React.

Stiamo importando una serie di progetti da un file data.js nella stessa cartella. Lì stiamo esportando una serie di oggetti che includono ciascuno i dati di un singolo progetto:

// src/data.js

export const projects = [
  {
    title: "React Reserve",
    subtitle: "MERN Stack",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-1.gif",
    link: "https://reactbootcamp.com",
  },
  {
    title: "React Tracks",
    subtitle: "React and Python",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-2.gif",
    link: "https://reedbarger.com",
  },
  {
    title: "DevChat",
    subtitle: "React and Firebase",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-3.gif",
    link: "https://jsbootcamp.com",
  },
  {
    title: "Epic Todo App",
    subtitle: "React Hooks",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-4.gif",
    link: "https://pythonbootcamp.com",
  },
];

Come costruire il componente delle Skills

Compiliamo la sezione per tutte le competenze e le tecnologie che conosciamo.

Questo consisterà in un semplice elenco di tutti i principali strumenti con cui abbiamo familiarità e che possiamo utilizzare nei progetti dei nostri datori di lavoro o clienti.

Ancora una volta, importeremo un array dalla nostra cartella dati. Ma questo array è costituito da un numero di stringhe che rappresentano ciascuna delle abilità che conosciamo come JavaScript, React e Node:

// src/components/Skills.js

import { BadgeCheckIcon, ChipIcon } from "@heroicons/react/solid";
import React from "react";
import { skills } from "../data";

export default function Skills() {
  return (
    <section id="skills">
      <div className="container px-5 py-10 mx-auto">
        <div className="text-center mb-20">
          <ChipIcon className="w-10 inline-block mb-4" />
          <h1 className="sm:text-4xl text-3xl font-medium title-font text-white mb-4">
            Skills &amp; Technologies
          </h1>
          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi sit
            ipsa delectus eum quo voluptas aspernatur accusantium distinctio
            possimus est.
          </p>
        </div>
        <div className="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
          {skills.map((skill) => (
            <div key={skill} className="p-2 sm:w-1/2 w-full">
              <div className="bg-gray-800 rounded flex p-4 h-full items-center">
                <BadgeCheckIcon className="text-green-400 w-6 h-6 flex-shrink-0 mr-4" />
                <span className="title-font font-medium text-white">
                  {skill}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Come costruire il componente Testimonials

Nella componente Testimonials, elencheremo un paio di testimonianze, magari di clienti passati o di persone che hanno familiarità con il nostro lavoro.

Questi consisteranno in un paio di cards che mostreranno la testimonianza stessa, come anche da chi proviene e l'azienda da cui proviene questa persona.

Stiamo anche importando una array di testimonianze con una serie di oggetti che presentano la citazione, l'immagine, il nome e l'azienda.

// src/components/Testimonials

import React from "react";
import { TerminalIcon, UsersIcon } from "@heroicons/react/solid";
import { testimonials } from "../data";

export default function Testimonials() {
  return (
    <section id="testimonials">
      <div className="container px-5 py-10 mx-auto text-center">
        <UsersIcon className="w-10 inline-block mb-4" />
        <h1 className="sm:text-4xl text-3xl font-medium title-font text-white mb-12">
          Client Testimonials
        </h1>
        <div className="flex flex-wrap m-4">
          {testimonials.map((testimonial) => (
            <div className="p-4 md:w-1/2 w-full">
              <div className="h-full bg-gray-800 bg-opacity-40 p-8 rounded">
                <TerminalIcon className="block w-8 text-gray-500 mb-4" />
                <p className="leading-relaxed mb-6">{testimonial.quote}</p>
                <div className="inline-flex items-center">
                  <img
                    alt="testimonial"
                    src={testimonial.image}
                    className="w-12 rounded-full flex-shrink-0 object-cover object-center"
                  />
                  <span className="flex-grow flex flex-col pl-4">
                    <span className="title-font font-medium text-white">
                      {testimonial.name}
                    </span>
                    <span className="text-gray-500 text-sm uppercase">
                      {testimonial.company}
                    </span>
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Come costruire il componente Contact

Alla fine della nostra landing page, includeremo il nostro modulo di contatto per consentire ai potenziali datori di lavoro di contattarci.

Questo modulo avrà 3 campi di inserimento: un nome, un'e-mail e un campo per scrivere il messaggio.

Per gestire questi invii di moduli, utilizzeremo lo strumento Netlify Forms per occuparci molto facilmente del salvataggio di quei messaggi.

// src/components/Contact.js

import React from "react";

export default function Contact() {
  return (
    <section id="contact" className="relative">
      <div className="container px-5 py-10 mx-auto flex sm:flex-nowrap flex-wrap">
        <div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
          <iframe
            width="100%"
            height="100%"
            title="map"
            className="absolute inset-0"
            frameBorder={0}
            marginHeight={0}
            marginWidth={0}
            style={{ filter: "opacity(0.7)" }}
            src="https://www.google.com/maps/embed/v1/place?q=97+warren+st+new+york+city&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
          />
          <div className="bg-gray-900 relative flex flex-wrap py-6 rounded shadow-md">
            <div className="lg:w-1/2 px-6">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                ADDRESS
              </h2>
              <p className="mt-1">
                97 Warren St. <br />
                New York, NY 10007
              </p>
            </div>
            <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                EMAIL
              </h2>
              <a className="text-indigo-400 leading-relaxed">
                reedbarger@email.com
              </a>
              <h2 className="title-font font-semibold text-white tracking-widest text-xs mt-4">
                PHONE
              </h2>
              <p className="leading-relaxed">123-456-7890</p>
            </div>
          </div>
        </div>
        <form
          netlify
          name="contact"
          className="lg:w-1/3 md:w-1/2 flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
          <h2 className="text-white sm:text-4xl text-3xl mb-1 font-medium title-font">
            Hire Me
          </h2>
          <p className="leading-relaxed mb-5">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum
            suscipit officia aspernatur veritatis. Asperiores, aliquid?
          </p>
          <div className="relative mb-4">
            <label htmlFor="name" className="leading-7 text-sm text-gray-400">
              Name
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
            />
          </div>
          <div className="relative mb-4">
            <label htmlFor="email" className="leading-7 text-sm text-gray-400">
              Email
            </label>
            <input
              type="email"
              id="email"
              name="email"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
            />
          </div>
          <div className="relative mb-4">
            <label
              htmlFor="message"
              className="leading-7 text-sm text-gray-400">
              Message
            </label>
            <textarea
              id="message"
              name="message"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
            />
          </div>
          <button
            type="submit"
            className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
            Submit
          </button>
        </form>
      </div>
    </section>
  );
}

Come incorporare una posizione di Google Maps

A sinistra del modulo includeremo una mappa di Google incorporata in Google Maps di dove ci troviamo.

Possiamo farlo con l'aiuto di uno strumento online: embed-map.com. Tutto quello che devi fare è inserire la tua posizione e premere "Generate HTML code".

Nel riga che ci viene fornita, non copiare tutto il codice, solo l'attributo src dell'elemento iframe. Sostituiremo quel valore con il valore src predefinito che abbiamo nel nostro iframe.

Per inviare i dati dei moduli a Netlify, Netlify Forms deve riconoscere un modulo come HTML statico. Poiché la nostra app React è controllata da JavaScript e non è costituita da comune HTML, è necessario aggiungere un modulo nascosto al nostro file index.html nella cartella pubblica.

<!-- public/index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- contenuto di head saltato -->
  </head>
  <body>

  <form name="contact" netlify netlify-honeypot="bot-field" hidden>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <textarea name="message"></textarea>
  </form>
  
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Abbiamo bisogno di nascondere questo modulo, perché non è necessario che venga visualizzato dall'utente ma solo da Netlify.

Gli daremo l'attributo hidden e  l'attributo name che corrisponde al modulo JSX in Contact.js. Dobbiamo anche assegnargli l'attributo netlify in modo che Netlify Forms lo riconosca. Infine, dobbiamo includere tutti gli stessi campi di input del nostro modulo JSX:  name, email, message.

Come inviare il modulo di contatto

Una volta fatto, torneremo a Contact.js. Useremo JavaScript per inviare questo modulo.

Prima di tutto, creeremo uno stato dedicato per ciascuno dei valori digitati nel modulo per name, email, message:

const [name, setName] = React.useState("");
const [email, setEmail] = React.useState("");
const [message, setMessage] = React.useState("");

Memorizziamo ciò che l'utente digita in ciascuno degli input nello stato con l'aiuto dell'handler  onChange.

Per gestire l'invio del modulo, aggiungeremo il prop onSubmit ad esso. La funzione che verrà chiamata, handleSubmit, effettuerà una richiesta di post all'endpoint "/" con tutti i nostri dati del modulo.

Imposteremo le intestazioni della richiesta per indicare che stiamo inviando i dati del modulo. Per il corpo della richiesta, includeremo il nome del modulo e tutti i dati del modulo tramite le variabili di stato  name, email e message.

// src/components/Contact.js

import React from "react";

export default function Contact() {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [message, setMessage] = React.useState("");

  function encode(data) {
    return Object.keys(data)
      .map(
        (key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
      )
      .join("&");
  }

  function handleSubmit(e) {
    e.preventDefault();
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", name, email, message }),
    })
      .then(() => alert("Message sent!"))
      .catch((error) => alert(error));
  }

  return (
    <section id="contact" className="relative">
      <div className="container px-5 py-10 mx-auto flex sm:flex-nowrap flex-wrap">
        <div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
          <iframe
            width="100%"
            height="100%"
            title="map"
            className="absolute inset-0"
            frameBorder={0}
            marginHeight={0}
            marginWidth={0}
            style={{ filter: "opacity(0.7)" }}
            src="https://www.google.com/maps/embed/v1/place?q=97+warren+st+new+york+city&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
          />
          <div className="bg-gray-900 relative flex flex-wrap py-6 rounded shadow-md">
            <div className="lg:w-1/2 px-6">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                ADDRESS
              </h2>
              <p className="mt-1">
                97 Warren St. <br />
                New York, NY 10007
              </p>
            </div>
            <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                EMAIL
              </h2>
              <a className="text-indigo-400 leading-relaxed">
                reedbarger@email.com
              </a>
              <h2 className="title-font font-semibold text-white tracking-widest text-xs mt-4">
                PHONE
              </h2>
              <p className="leading-relaxed">123-456-7890</p>
            </div>
          </div>
        </div>
        <form
          netlify
          name="contact"
          onSubmit={handleSubmit}
          className="lg:w-1/3 md:w-1/2 flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
          <h2 className="text-white sm:text-4xl text-3xl mb-1 font-medium title-font">
            Hire Me
          </h2>
          <p className="leading-relaxed mb-5">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum
            suscipit officia aspernatur veritatis. Asperiores, aliquid?
          </p>
          <div className="relative mb-4">
            <label htmlFor="name" className="leading-7 text-sm text-gray-400">
              Name
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              onChange={(e) => setName(e.target.value)}
            />
          </div>
          <div className="relative mb-4">
            <label htmlFor="email" className="leading-7 text-sm text-gray-400">
              Email
            </label>
            <input
              type="email"
              id="email"
              name="email"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
          <div className="relative mb-4">
            <label
              htmlFor="message"
              className="leading-7 text-sm text-gray-400">
              Message
            </label>
            <textarea
              id="message"
              name="message"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
              onChange={(e) => setMessage(e.target.value)}
            />
          </div>
          <button
            type="submit"
            className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
            Submit
          </button>
        </form>
      </div>
    </section>
  );
}

Come puoi vedere sopra, stiamo codificando i dati del modulo con una funzione speciale encode che vedi qui.

Se il messaggio viene inviato correttamente, visualizzeremo un avviso che dice "Message sent". Altrimenti, se si verifica un errore, avviseremo l'utente di tale situazione.

Come costruire il componente Navbar

L'ultimo passaggio è creare il nostro componente Navbar.

Vogliamo che questa barra di navigazione rimanga in cima alla nostra app su dispositivi di grandi dimensioni e non sia ferma sullo schermo su dispositivi mobili.

Inoltre, vogliamo includere collegamenti a ciascuna delle nostre sezioni importanti per il nostro progetto come capacità, testimonianze e il nostro modulo di contatto:

// src/components/Navbar.js

import { ArrowRightIcon } from "@heroicons/react/solid";
import React from "react";

export default function Navbar() {
  return (
    <header className="bg-gray-800 md:sticky top-0 z-10">
      <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
        <a className="title-font font-medium text-white mb-4 md:mb-0">
          <a href="#about" className="ml-3 text-xl">
            Reed Barger
          </a>
        </a>
        <nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-700	flex flex-wrap items-center text-base justify-center">
          <a href="#projects" className="mr-5 hover:text-white">
            Past Work
          </a>
          <a href="#skills" className="mr-5 hover:text-white">
            Skills
          </a>
          <a href="#testimonials" className="mr-5 hover:text-white">
            Testimonials
          </a>
        </nav>
        <a
          href="#contact"
          className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">
          Hire Me
          <ArrowRightIcon className="w-4 h-4 ml-1" />
        </a>
      </div>
    </header>
  );
}

In che modo questo componente rimane in cima alla pagina su un dispositivo più grande? Con l'aiuto della classe md:sticky sul nostro elemento header.

Questa classe significa che avrà la regola di stile position: sticky; applicata a partire da un punto di interruzione di medie dimensioni (768px).

Come distribuire il tuo Portfolio

Ora per rendere attivo il nostro portfolio, dobbiamo trasferire la nostra applicazione su GitHub.

Se non hai familiarità con Git e GitHub, sarebbe necessario un po' di tempo solo per imparare a come inviare il tuo codice al tuo account GitHub per la prima volta. È un'abilità essenziale che qualsiasi sviluppatore deve conoscere.

Dopo aver acquisito familiarità con questo processo, possiamo prima creare un nuovo repository Github. Successivamente, eseguiremo git add ., git commit -m "Deploy", creando il nostro git remoto e quindi git push -u origin master.

Una volta che il nostro progetto è su GitHub, possiamo andare su Netlify e selezionare l'opzione "Choose Site from Git". Quindi sceglieremo GitHub per la nostra distribuzione continua e selezioneremo il repository GitHub in cui abbiamo appena inviato il nostro codice.

Dopodiché, il nostro progetto verrà pubblicato automaticamente sul web!

Cosa viene dopo

Congratulazioni! Ora hai un'app  portfolio live sul Web che mostra tutti i tuoi progetti e le tue abilità ai potenziali datori di lavoro.

Il prossimo passo da fare sarebbe impostare un dominio personalizzato, preferibilmente con il tuo nome (es. reedbarger.com ). Poiché Netlify include un DNS, puoi facilmente configurare un dominio personalizzato con loro.

Cerca di aggiungere un blog alla tua app React per mostrare ancora di più la tua conoscenza da sviluppatore ai potenziali datori di lavoro.

Rendi il tuo portfolio personale un'espressione di te stesso e di ciò che ti appassiona come sviluppatore e avrai successo!

Vuoi il modo n. 1 per imparare React?

Il Bootcamp React prende tutto ciò che dovresti sapere sull'apprendimento di React e lo raggruppa in un unico pacchetto completo, inclusi video, cheatsheet e bonus speciali.

Ottieni le informazioni privilegiate che centinaia di sviluppatori hanno già utilizzato per padroneggiare React, per trovare il lavoro dei loro sogni e assumere il controllo del loro futuro:

Clicca qui per essere avvisato quando apre.

Se stai tentando di implementare operazioni CRUD utilizzando gli endpoint API, potresti scoprire che è difficile gestire i dati su più componenti.

O forse hai un modale, ma vuoi attivarlo da un componente diverso.

Capire come affrontare questi scenari può essere difficile.

In questo tutorial, ti mostrerò come puoi farlo.

Come passare i dati tra un componente padre e un componente figlio

In primo luogo, passiamo i dati tra un componente padre e un componente figlio. .

Innanzitutto, dovrai creare due componenti, un Parent e un Child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Successivamente, importerai il componente Child nel componente Parent e lo restituirai.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Quindi creerai una funzione e un pulsante per attivare quella funzione. Inoltre, creerai uno stato utilizzando l'Hook useState  per gestire i dati.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Come puoi vedere qui, stiamo chiamando la funzione parentToChild sul pulsante Click Parent . Quando si fa clic sul pulsante Parent, esso memorizzerà "This is data from Parent Component to the Child Component" nella variabile data .

Passiamo ora lo stato dei dati ai nostri componenti figlio. Puoi farlo usando i props.

Passa i dati come props quando chiami il componente figlio, in questo modo:

<Child parentToChild={data}/>

Qui stiamo passando i dati nel componente figlio come data .

data è il dato che dobbiamo trasmettere, e parentToChild è il nome del prop.

Successivamente, è il momento di acquisire i dati nel componente figlio. Ed è molto semplice.

Qui, ci possono essere due casi.

Caso 1: se stai utilizzando un componente funzionale, prendi semplicemente parentToChild nei parametri.

import React from 'react'

export default function Child({parentToChild}) {
    return (
        <div>
            {parentToChild}
        </div>
    )
}

Caso 2: se hai un componente di classe, usa semplicemente this.props.parentToChild.

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        return (
            <div>
                {this.props.parentToChild}
            </div>
        )
    }
}

In ogni caso, otterrai gli stessi risultati:

Quando facciamo clic sul pulsante Click Parent, vedremo i dati come output sullo schermo.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child parentToChild={data}/>
      
      <div className="child">
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Sopra vedrai il codice completo per Parent Component.

Come passare i dati tra un componente figlio e un componente padre

Questo è un po' più complicato.

Innanzitutto, devi creare una funzione nel componente padre chiamata   childToParent e uno stato vuoto chiamato data.

const [data, setData] = useState('');

const childToParent = () => {
   
}

Quindi, passa la funzione childToParent come supporto al componente figlio.

<Child childToParent={childToParent}/>

Ora, nel nostro componente figlio, accetta questa chiamata di funzione come prop e assegnala a un evento onClick.

Inoltre, dichiara uno stato che contiene alcuni dati sotto forma di stringa o numero.

Passa i dati nella funzione parentToChild come parametri.

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    const data = "This is data from Child Component to the Parent Component."
    return (
        <div>
            <Button primary onClick={() => childToParent(data)}>Click Child</Button>
        </div>
    )
}

Successivamente, nel componente padre, accetta questi dati nella funzione childToParent come parametro. Quindi imposta i dati usando l'hook useState.

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
      <div>
        <Child/>
      </div>
    </div>
  );
}

export default Parent;

Quindi, mostra quella variabile di dati nella funzione di ritorno.

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
     {data}
      <div>
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

I dati figlio sovrascriveranno i dati padre quando si fa clic sul pulsante  Click Child .

Ora puoi passare i dati da Child a Parent e da Parent a Child come un professionista.

Puoi anche trasmettere eventi come onClick o OnChange

Basta chiamare un metodo di avviso nella funzione childToParent e passare quella funzione come supporto al componente figlio .

import './App.css';
import Child from './Child';

function Parent() {
  const childToParent = () => {
    alert("This is an alert from the Child Component")
  }

  return (
    <div className="App">
      <div className="child">
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

E nel componente figlio , accetta la funzione childToParent come prop. Quindi assegnalo a un evento onClick su un pulsante.

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    return (
        <div>
            <Button primary onClick={() => childToParent()}>Click Child</Button>
        </div>
    )
}

La tua funzione nel componente padre verrà richiamata quando fai clic sul pulsante nel componente figlio e vedrai questo avviso:

Questo è tutto!

Puoi trovare il codice su Github se vuoi ulteriormente sperimentare.

Bene, questo è tutto gente. Buon apprendimento.

Sei interessato a imparare React? Ottieni il mio manuale React

React è una libreria JavaScript che mira a semplificare lo sviluppo di interfacce visive.

Sviluppato da Facebook e rilasciato pubblicamente nel 2013, è usato in alcuni dei codici più utilizzati al mondo. Alimenta Facebook e Instagram tra molte, molte altre società di software.

Il suo obiettivo principale è semplificare il ragionamento su un'interfaccia e sul suo stato in qualsiasi momento dividendo l'interfaccia utente in una raccolta di componenti.

React viene utilizzato per creare applicazioni Web a pagina singola, insieme a molte altre librerie e framework disponibili già prima che React prendesse vita.

Perché React è così popolare?

React ha preso d'assalto il mondo dello sviluppo web front end. Come mai?

Meno complesso delle alternative

Al momento dell'annuncio di React, Ember.js e Angular 1.x erano le scelte predominanti per i framework. Entrambi hanno imposto troppe convenzioni sul codice è ciò ha fatto si che il porting di un'app esistente non fosse affatto conveniente.

React è stato creato per essere molto facile da integrare in un progetto esistente. È così che hanno dovuto fare su Facebook per introdurlo nella codebase già esistente. Inoltre, questi due framework hanno portato troppo al tavolo, mentre React ha scelto solo di implementare il livello View invece dell'intero stack MVC.

Tempismo perfetto

Allo stesso tempo, Angular 2.x è stato annunciato da Google, insieme all'incompatibilità con le versioni precedenti e ai grandi cambiamenti che avrebbe portato. Passare da Angular 1 a 2 è stato come passare a un framework diverso. E quindi questo fatto, insieme ai miglioramenti della velocità di esecuzione che React prometteva, ha reso React qualcosa che gli sviluppatori erano ansiosi di provare.

Supportato da Facebook

Essere supportati da Facebook avvantaggia un progetto se si rivela un successo. Ma non è una garanzia, e ci sono molti progetti open source falliti sia da Facebook che da Google (tra gli altri).

React è davvero così semplice?

Anche se ho detto che React è più semplice dei framework alternativi, immergersi in React è comunque complesso. Ciò è dovuto principalmente alle tecnologie di contorno che possono essere integrate con React, come Redux, Relay o GraphQL.

React in sé ha un'API molto piccola.

Non c'è molto di più in React oltre a questi concetti:

• Componenti
• JSX
• State
• Props

Vedremo ognuno di loro nei miei prossimi paragrafi.

JSX

Molti sviluppatori, me compreso, a prima vista hanno pensato che JSX fosse orribile e hanno rapidamente respinto React.

Anche se dicevano che JSX non era richiesto, usare React senza JSX era penoso.

Mi ci sono voluti un paio d'anni per esaminarlo occasionalmente per iniziare a digerire JSX, e ora lo preferisco in gran parte all'alternativa (ovvero, usando i modelli).

Il principale vantaggio dell'utilizzo di JSX è che stai interagendo solo con oggetti JavaScript, non con modelli di stringhe.

JSX non è HTML incorporato.

Molti tutorial per i principianti di React preferiscono posticipare l'introduzione di JSX in un secondo momento, perché presumono che il lettore stia meglio senza di esso. Dato che ora sono un fan di JSX, tuttavia, ci entrerò immediatamente.

Ecco come definire un tag h1 contenente una stringa:

const element = <h1>Hello, world!</h1>

Sembra uno strano mix di JavaScript e HTML, ma in realtà è tutto JavaScript.

Quello che sembra HTML è in realtà zucchero sintattico per definire i componenti e il loro posizionamento all'interno del markup.

All'interno di un'espressione JSX, gli attributi possono essere inseriti molto facilmente:

const myId = 'test' 
const element = <h1 id={myId}>Hello, world!</h1>

Devi solo prestare attenzione a quando un attributo ha un trattino (-), che viene invece convertito nella sintassi camelCase, nonché a questi due casi speciali:

• class diventa className
• for diventa htmlFor

perché sono parole riservate in JavaScript.

Ecco uno frammento di codice JSX che racchiude due componenti in un tag  div:

<div> 
  <BlogPostsList />
  <Sidebar /> 
</div>

Un tag deve sempre essere chiuso, perché questo è più XML che HTML (se ricordi i giorni XHTML, questo sarà familiare, ma da allora la sintassi libera di HTML5 ha vinto). In questo caso viene utilizzato un tag a chiusura automatica.

JSX, una volta introdotto con React, non è più una tecnologia solo di React.

Componenti di React

Che cos'è un componente React?

Un componente è un pezzo isolato dell'interfaccia. Ad esempio, in una tipica home page di un blog, potresti trovare il componente Barra laterale e il componente Elenco post del blog. Sono a loro volta composti dai componenti stessi, quindi potresti avere un elenco di componenti dei post del blog, ciascuno per ogni post del blog e ognuno con le sue proprietà peculiari.

React lo rende molto semplice: tutto è un componente.

Anche i semplici tag HTML sono componenti a sé stanti e vengono aggiunti per impostazione predefinita.

Le due righe successive sono equivalenti: fanno la stessa cosa. Uno con JSX , uno senza, iniettando <h1>Hello World!</h1> in un elemento con id app.

import React from 'react' 
import ReactDOM from 'react-dom' 

ReactDOM.render( 
  <h1>Hello World!</h1>, 
  document.getElementById('app') 
)

ReactDOM.render( 
  React.DOM.h1(null, "Hello World!"), 
  document.getElementById('app') 
)

Vedi, React.DOM espone per noi un componente h1. Quali altri tag HTML sono disponibili? Tutti quelli possibili! Puoi controllare cosa offre React.DOM digitandolo nella Console del browser:

(l'elenco continua...)

I componenti integrati sono belli, ma li supererai rapidamente. Ciò in cui React eccelle è permetterci di comporre un'interfaccia utente componendo componenti personalizzati.

Componenti personalizzati

Ci sono 2 modi per definire un componente in React:

Un componente stateless non gestisce lo stato interno ed è solo una funzione:

const BlogPostExcerpt = () => {
 return (
    <div>
      <h1>Titolo</h1>
      <p>Descrizione</p>
    </div> 
  ) 
}

Un componente stateful è una classe, che gestisce lo stato nelle proprie proprietà:

import React, { Component } from 'react'

class BlogPostExcerpt extends Component { 
  render() { 
    return ( 
      <div>
        <h1>Titolo</h1> 
        <p>Descrizione</p> 
      </div> 
    ) 
  } 
}

Allo stato attuale, sono equivalenti perché non c'è ancora una gestione dello stato (cosa che vedremo nei prossimi paragrafi).

C'è una terza forma che usa la sintassi ES5/ES2015 senza le classi:

import React from 'react'

React.createClass({ 
  render() { 
    return ( 
      <div> 
        <h1>Titolo</h1>
        <p>Descrizione</p> 
      </div> 
    ) 
  } 
})

Raramente lo vedrai nelle moderne codebase > ES6.

Props è il modo in cui i componenti ottengono le loro proprietà. A partire dal componente superiore, ogni componente figlio riceve i suoi props dal genitore. In un componente stateless, props è tutto ciò che viene passato e sono accessibili aggiungendo props come argomento della funzione:

const BlogPostExcerpt = (props) => { 
  return ( 
    <div> 
      <h1>{props.titolo}</h1> 
      <p>{props.descrizione}</p> 
    </div> 
  ) 
}

In un componente stateful,  i props vengono passati per impostazione predefinita. Non è necessario aggiungere nulla di speciale e sono accessibili come this.props in un'istanza di Component.

import React, { Component } from 'react'

class BlogPostExcerpt extends Component { 
  render() { 
    return ( 
      <div>
        <h1>{this.props.titolo}</h1>  
        <p>{this.props.descrizione}</p> 
      </div> 
    ) 
  } 
}

PropTypes

Poiché JavaScript è un linguaggio tipizzato dinamicamente, non abbiamo davvero un modo per imporre il tipo di una variabile in fase di compilazione. Se passiamo tipi non validi, falliranno in fase di esecuzione o daranno risultati strani se i tipi sono compatibili ma non nel modo che ci aspettiamo.

Flow e TypeScript aiutano molto, ma React ha un modo per verificare direttamente i tipi di props. Anche prima di eseguire il codice, i nostri strumenti (editor, linter) possono rilevare quando stiamo passando i valori sbagliati:

import PropTypes from 'prop-types';
import React from 'react' 

class BlogPostExcerpt extends Component { 
  render() { 
    return ( 
      <div> 
        <h1>{this.props.titolo}</h1> 
        <p>{this.props.descrizione}</p> 
      </div> 
    ) 
  } 
}

BlogPostExcerpt.propTypes = { 
  titolo: PropTypes.string, 
  descrizione: PropTypes.string 
};

export default BlogPostExcerpt

Quali tipi possiamo usare

Questi sono i tipi fondamentali che possiamo accettare:

• PropTypes.array
• PropTypes.bool
• PropTypes.func
• PropTypes.number
• PropTypes.object
• PropTypes.string
• PropTypes.symbol

Possiamo accettare uno di due tipi:

PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),

Possiamo accettare uno dei tanti valori:

PropTypes.oneOf(['Test1', 'Test2']),

Possiamo accettare un'istanza di una classe:

PropTypes.instanceOf(Qualcosa)

Possiamo accettare qualsiasi nodo React:

PropTypes.node

o anche di qualsiasi tipo:

PropTypes.any

Gli array hanno una sintassi speciale che possiamo usare per accettare un array di un tipo particolare:

PropTypes.arrayOf(PropTypes.string)

Possiamo comporre una proprietà di un oggetto usando:

PropTypes.shape({ 
  color: PropTypes.string, 
  fontSize: PropTypes.number 
})

Proprietà richieste

L'aggiunta di isRequired a qualsiasi opzione PropTypes farà sì che React restituisca un errore se quella proprietà è mancante:

PropTypes.arrayOf(PropTypes.string).isRequired, PropTypes.string.isRequired,

Valori predefiniti per i props

Se un valore non è richiesto, è necessario specificare un valore predefinito per esso se manca quando il componente viene inizializzato.

BlogPostExcerpt.propTypes = { 
  title: PropTypes.string, 
  description: PropTypes.string 
}

BlogPostExcerpt.defaultProps = { 
  titolo: '', 
  descrizione: '' 
}

Alcuni strumenti, come ESLint, hanno la capacità di imporre la definizione dei defaultProps per un Component con alcuni propType non esplicitamente richiesti.

Come vengono passati i props

Quando si inizializza un componente, si passa il props in un modo simile agli attributi HTML:

const desc = 'Una descrizione'
//...
<BlogPostExcerpt title="Un post del blog" descrizione={desc} />

Abbiamo passato il titolo come una semplice stringa (cosa che possiamo fare solo con le stringhe!), e la descrizione come una variabile.

Children

Un prop speciale è children. Questo contiene il valore di tutto ciò che viene passato nel componente body. Per esempio:

<BlogPostExcerpt title="Un post del blog" descrizione={desc}> 
  Qualcosa 
</BlogPostExcerpt>

In questo caso, all'interno BlogPostExcerpt potremmo accedere a “Qualcosa” tramite l'utilizzo di  this.props.children.

Mentre Props consente a un componente di ricevere proprietà dal suo genitore (potrebbero essere "istruito" per stampare alcuni dati, ad esempio), lo stato consente a un componente di assumere una vita propria ed essere indipendente dall'ambiente circostante.

Ricorda: solo i componenti basati sulla classe possono avere uno stato. Quindi, se devi gestire lo stato in un componente senza stato (basato su funzioni), devi prima "aggiornarlo" a un componente di classe:

const BlogPostExcerpt = () => { 
  return ( 
    <div>
      <h1>Titolo</h1>
      <p>Descrizione</p> 
    </div> 
  )
}

diventa:

import React, { Component } from 'react'

class BlogPostExcerpt extends Component { 
  render() { 
    return (
      <div>  
        <h1>Titolo</h1> 
        <p>Descrizione</p>
      </div>
    ) 
  } 
}

Impostazione dello stato predefinito

Nel costruttore del componente, inizializza this.state. Ad esempio, il componente BlogPostExcerpt potrebbe avere uno stato cliccato:

class BlogPostExcerpt extends Component {
  constructor(props) { 
    super(props) 
    this.state = { cliccato: false } 
  }

  render() { 
    return (
      <div> 
        <h1>Titolo</h1>
        <p>Descrizione</p> 
      </div> 
    ) 
  } 
}

Accesso allo stato

È possibile accedere allo stato cliccato facendo riferimento a this.state.cliccato:

class BlogPostExcerpt extends Component {
  constructor(props) { 
    super(props)
    this.state = { cliccato: false }
  }

  render() { 
    return (
      <div> 
        <h1>Title</h1> 
        <p>Descrizione</p> 
        <p>Cliccato: {this.state.cliccato}</p> 
      </div> 
    ) 
  } 
}

Mutarne lo stato

Uno stato non dovrebbe mai essere mutato usando

this.state.cliccato = true

Invece, dovresti sempre usare setState(), passandolo come oggetto:

this.setState({ cliccato: true })

L'oggetto può contenere un sottoinsieme o un superinsieme dello stato. Solo le proprietà che passi saranno mutate. Quelle omesse verranno lasciate nel loro stato attuale.

Perché dovresti sempre usare setState()

Il motivo è che utilizzando questo metodo, React sa che lo stato è cambiato. Inizierà quindi la serie di eventi che porteranno al nuovo rendering del componente, insieme a eventuali aggiornamenti DOM.

Lo stato è incapsulato

Un genitore di un Component non può dire se il figlio è stateful o stateless. Lo stesso vale per i figli di un Component.

Essere stateful o stateless (basato su classi o funzionale) è solo un dettaglio di implementazione di cui gli altri componenti non devono preoccuparsi.

Questo ci porta al flusso di dati unidirezionale

Flusso di dati unidirezionale

Uno stato è sempre di proprietà di un componente. Tutti i dati interessati da questo stato possono interessare solo i componenti sotto di esso: i suoi figli.

La modifica di uno stato su un componente non influirà mai sul suo genitore, sui suoi fratelli o su qualsiasi altro componente nell'applicazione, solo sui suoi figli.

Questo è il motivo per cui, molte volte, lo stato viene spostato in alto nell'albero dei componenti.

Spostare lo stato nell'albero

A causa delle regole del flusso di dati unidirezionale, se due componenti devono condividere uno stato, lo stato deve essere spostato su un predecessore comune.

Spesso, l'antenato più vicino è il posto migliore per gestire lo stato, ma non è una regola obbligatoria.

Lo stato viene trasmesso ai componenti che necessitano di quel valore tramite props:

class Converter extends React.Component { 
  constructor(props) { 
    super(props)
    this.state = { currency: '€' } 
  }

  render() { 
    return ( 
      <div> 
        <Display currency={this.state.currency} />
        <CurrencySwitcher currency={this.state.currency} />
      </div> 
    ) 
  } 
}

Lo stato può essere mutato da un componente figlio passando una funzione mutante come prop:

class Converter extends React.Component { 
  constructor(props) { 
    super(props) 
    this.state = { currency: '€' } 
  }

  handleChangeCurrency = (event) => { 
    this.setState({ 
      currency: this.state.currency === '€' ? '$' : '€' 
    }) 
  }

  render() { 
    return ( 
      <div> 
        <Display currency={this.state.currency} /> 
        <CurrencySwitcher currency={this.state.currency} handleChangeCurrency={this.handleChangeCurrency} /> 
      </div> 
    ) 
  } 
}

const CurrencySwitcher = (props) => { 
  return ( 
    <button onClick={props.handleChangeCurrency}> 
      Current currency is {props.currency}. Change it! 
    </button> 
  ) 
}

const Display = (props) => { 
  return ( 
    <p>Current currency is {props.currency}.</p> 
  ) 
}

Eventi

React fornisce un modo semplice per gestire gli eventi. Preparati a salutare addEventListener :)

Nel precedente articolo sullo Stato hai visto questo esempio:

const CurrencySwitcher = (props) => { 
  return ( 
    <button onClick={props.handleChangeCurrency}> 
      Current currency is {props.currency}. Change it! 
    </button> 
  ) 
}

Se usi JavaScript da un po', è proprio come i vecchi gestori di eventi JavaScript. Ma questa volta stai definendo tutto in JavaScript, non nel tuo HTML, e stai passando una funzione, non una stringa.

I nomi degli eventi effettivi sono leggermente diversi, perché in React usi camelCase per tutto. Così onclick diventa onClick, onsubmit diventa onSubmit.

Per riferimento, questo è l'HTML della vecchia scuola con eventi JavaScript aggiunti:

<button onclick="handleChangeCurrency()"> ... <;/button>

Gestori di eventi

È una convenzione avere gestori di eventi definiti come metodi sulla classe Component:

class Converter extends React.Component { handleChangeCurrency = (event) => { this.setState({ currency: this.state.currency === '€' ? '$' : '€' }) } }

Tutti i gestori ricevono un oggetto evento che aderisce, cross-browser, alla specifica W3C UI Events .

Vincola this nei metodi

Non dimenticare di associare i metodi. I metodi delle classi ES6 per impostazione predefinita non sono vincolati. Ciò significa che this non è definito a meno che tu non definisca i metodi come:

class Converter extends React.Component { 
  handleClick = (e) => { /* ... */ } 
  //... 
}

quando si utilizza la sintassi dell'inizializzatore della proprietà con Babel (abilitata per impostazione predefinita in create-react-app).

Altrimenti devi associarlo manualmente nel costruttore:

class Converter extends React.Component { 
  constructor(props) { 
    super(props); 
    this.handleClick = this.handleClick.bind(this); 
  }

  handleClick(e) {} 
}

Il riferimento agli eventi

Ci sono molti eventi supportati, quindi ecco un elenco di riepilogo.

Appunti

• onCopy
• onCut
• onPaste

Composizione

• onCompositionEnd
• onCompositionStart
• onCompositionUpdate

Tastiera

• onKeyDown
• onKeyPress
• onKeyUp

Focus

• onFocus
• onBlur

Form

• onChange
• onInput
• onSubmit

Mouse

• onClick
• onContextMenu
• onDoubleClick
• onDrag
• onDragEnd
• onDragEnter
• onDragExit
• onDragLeave
• onDragOver
• onDragStart
• onDrop
• onMouseDown
• onMouseEnter
• onMouseLeave
• onMouseMove
• onMouseOut
• onMouseOver
• onMouseUp

Selezione

• onSelect

Touch

• onTouchCancel
• onTouchEnd
• onTouchMove
• onTouchStart

UI

• onScroll

Rotellina del mouse

• onWheel

Media

• onAbort
• onCanPlay
• onCanPlayThrough
• onDurationChange
• onEmptied
• onEncrypted
• onEnded
• onError
• onLoadedData
• onLoadedMetadata
• onLoadStart
• onPause
• onPlay
• onPlaying
• onProgress
• onRateChange
• onSeeked
• onSeeking
• onStalled
• onSuspend
• onTimeUpdate
• onVolumeChange
• onWaiting

Immagine

• onLoad
• onError

Animation

• onAnimationStart
• onAnimationEnd
• onAnimationIteration

Transizione

• onTransitionEnd

Approccio dichiarativo di React

Ti imbatterai in articoli che descrivono React come un approccio dichiarativo alla creazione di interfacce utente .

Per ulteriori informazioni sulla programmazione dichiarativa, vedi programmazione dichiarativa.

Approccio dichiarativo di React

React ha reso il suo "approccio dichiarativo" piuttosto popolare e in primo piano, quindi ha permeato il mondo del front end insieme a React.

Non è davvero un concetto nuovo, ma React ha reso la creazione di interfacce utente molto più dichiarative rispetto ai modelli HTML. Puoi creare interfacce Web senza nemmeno toccare direttamente il DOM e puoi avere un sistema di eventi senza dover interagire con gli eventi DOM effettivi.

Ad esempio, la ricerca di elementi nel DOM utilizzando jQuery o eventi DOM è un approccio iterativo.

L'approccio dichiarativo di React lo astrae per noi. Diciamo semplicemente a React che vogliamo che un componente venga renderizzato in un modo specifico e non dobbiamo mai interagire con il DOM per farvi riferimento in seguito.

Il DOM virtuale

Molti framework esistenti, prima che React entrasse in scena, manipolavano direttamente il DOM su ogni modifica.

Il “vero” DOM

Che cos'è il DOM, prima di tutto? Il DOM ( Document Object Model ) è una rappresentazione ad albero della pagina, partendo dal tag <html> , scendendo in ciascuno dei figli, detti nodi.

È conservato nella memoria del browser e collegato direttamente a ciò che vedi in una pagina. Il DOM ha un'API che puoi utilizzare per attraversarlo, accedere a ogni singolo nodo, filtrarli e modificarli.

L'API è la sintassi familiare che probabilmente hai visto molte volte, se non stavi utilizzando l'API astratta fornita da jQuery e amici:

document.getElementById(id) 
document.getElementsByTagName(name) 
document.createElement(name) 
parentNode.appendChild(node) 
element.innerHTML 
element.style.left 
element.setAttribute()
element.getAttribute() 
element.addEventListener() 
window.content 
window.onload 
window.dump()
window.scrollTo()

React conserva una copia della rappresentazione DOM, perché il Virtual DOM riguarda il rendering di React.

Il DOM virtuale

Ogni volta che il DOM cambia, il browser deve eseguire due operazioni intensive: repaint (modifiche visive o di contenuto a un elemento che non influiscono sul layout e sul posizionamento rispetto ad altri elementi) e reflow (ricalcola il layout di una porzione della pagina — o l'intero layout di pagina).

React utilizza un DOM virtuale per aiutare il browser a utilizzare meno risorse quando è necessario apportare modifiche a una pagina.

Quando si chiama setState() su un Component, specificando uno stato diverso dal precedente, React contrassegna quel Component come sporco . Questa è la chiave: reagire solo agli aggiornamenti quando un componente cambia lo stato in modo esplicito.

Quello che succede dopo è:

• React aggiorna il Virtual DOM relativo ai componenti contrassegnati come sporchi (con alcuni controlli aggiuntivi, come attivare shouldComponentUpdate())
• Esegue l'algoritmo divergente per riconciliare le modifiche
• Aggiorna il vero DOM

Perché il Virtual DOM è utile: batching

La cosa fondamentale è che React esegue in batch gran parte delle modifiche ed esegue un aggiornamento unico al vero DOM. Lo fa cambiando tutti gli elementi che devono essere modificati contemporaneamente, quindi il repaint e il reflow che il browser deve eseguire per attuare le modifiche, vengono eseguiti solo una volta.

Interessato a imparare React? Ottieni il mio manuale React

I cicli vengono utilizzati in JavaScript per eseguire attività ripetute in base a una condizione. Le condizioni in genere restituiscono true o false. Un ciclo continuerà a funzionare fino a quando la condizione da noi definita ritorna false.

Ciclo for

Sintassi

for (inizializzazione; condizione; espressioneFianle) {
  // codice
}

Il ciclo for è costituito da tre espressioni facoltative, seguite da un blocco di codice:

• inizializzazione - Questa espressione viene eseguita prima dell'esecuzione del primo ciclo e viene solitamente utilizzata per creare un contatore.
• condizione - Questa espressione viene controllata ogni volta prima dell'esecuzione del ciclo. Se restituisce true, l'istruzione o il codice nel ciclo viene eseguito. Se restituisce false, il ciclo si interrompe. E se questa espressione viene omessa, restituisce automaticamente true.
• espressioneFinale- Questa espressione viene eseguita dopo ogni iterazione del ciclo. Questa è solitamente usata per incrementare un contatore, ma può anche essere usata per decrementare un contatore.

È possibile omettere una qualsiasi di queste tre espressioni o le istruzioni nel blocco di codice.

I cicli for sono comunemente usati per eseguire il blocco di codice un determinato numero di volte. Inoltre, puoi usare break per uscire anticipatamente dal ciclo, prima che l'espressione condizione ritorni false.

Esempi

1. Iterare tra numeri interi da 0 a 8:

for (let i = 0; i < 9; i++) {
  console.log(i);
}

// Output:
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8

2. Utilizzare break per uscire da un ciclo for prima che la condizione sia false:

for (let i = 1; i < 10; i += 2) {
  if (i === 7) {
    break;
  }
  console.log('Elefanti totali: ' + i);
}

// Output:
// Elefanti totali: 1
// Elefanti totali: 3
// Elefanti totali: 5

Errore comune: superare i limiti di un Array

Quando si esegue l'iterazione su un array, è facile superare accidentalmente i limiti dell'array stesso.

Ad esempio, il tuo ciclo potrebbe provare a fare riferimento al 4° elemento di un array con solo 3 elementi:

const arr = [ 1, 2, 3 ];

for (let i = 0; i <= arr.length; i++) {
  console.log(arr[i]);
}

// Output:
// 1
// 2
// 3
// undefined

Esistono due modi per correggere questo codice: impostare la condizione su i < arr.length o i <= arr.length - 1.

Ciclo for...in

Sintassi

for (proprietà in oggetto) {
  // codice
}

Il ciclo  for...in esegue un'iterazione sulle proprietà di un oggetto. Per ogni proprietà viene eseguito il codice nel blocco di istruzioni.

Esempi

1. Iterare sulle proprietà di un oggetto e stampare il nome e il valore nella console:

const capitali = {
  a: "Atene",
  b: "Belgrado",
  c: "Cairo"
};

for (let key in capitali) {
  console.log(key + ": " + capitali[key]);
}

// Output:
// a: Atene
// b: Belgrado
// c: Cairo

Errore comune: comportamento imprevisto durante l'iterazione su un array

Sebbene sia possibile utilizzare un ciclo for...in per eseguire l'iterazione su un array, è consigliabile utilizzare invece un normale ciclo for o un ciclo for...of.

Il ciclo for...in può scorrere su array e oggetti simili a array, ma potrebbe non accedere sempre agli indici dell'array in ordine.

Inoltre, il ciclo for...in restituisce tutte le proprietà e le proprietà ereditate per un array o un oggetto simile a un array, e ciò può portare a comportamenti imprevisti.

Ad esempio, questo semplice ciclo funziona come previsto:

const array = [1, 2, 3];

for (const i in array) {
  console.log(i);
}

// 0
// 1
// 2

Ma se qualcosa come una libreria JS che stai usando modifica direttamente il prototipo dell' Array, un un ciclo  for...in  scorrerà anche su quello:

const array = [1, 2, 3];

Array.prototype.someMethod = true;

for (const i in array) {
  console.log(i);
}

// 0
// 1
// 2
// someMethod

Sebbene la modifica di prototipi di sola lettura come Array o Object vada direttamente contro le migliori pratiche, potrebbe essere un problema con alcune librerie o basi di codice.

Inoltre, poiché for...in è pensato per gli oggetti, è molto più lento con gli array rispetto ad altri cicli.

In breve, ricorda di usare solo i cicli for...in per scorrere gli oggetti, non gli array.

Ciclo for...of

Sintassi

for (variabile of oggetto) {
  // codice
}

Il ciclo for...of esegue un'iterazione sui valori di molti tipi di iterabili, inclusi gli array e i tipi di raccolta speciali come Set e Map. Per ogni valore nell'oggetto iterabile, viene eseguito il codice nel blocco di codice.

Esempi

1. Iterare su un array:

const arr = [ "Fred", "Tom", "Bob" ];

for (let i of arr) {
  console.log(i);
}

// Output:
// Fred
// Tom
// Bob

2. Iterare su  Map:

const m = new Map();
m.set(1, "nero");
m.set(2, "rosso");

for (let n of m) {
  console.log(n);
}

// Output:
// [1, nero]
// [2, rosso]

3. Iterare su  Set:

const s = new Set();
s.add(1);
s.add("rosso");

for (let n of s) {
  console.log(n);
}

// Output:
// 1
// rosso

Ciclo while

Sintassi

while (condizione) {
  // istruzione
}

Il ciclo while inizia valutando la condizione. Se condizione restituisce true, il codice nel blocco delle istruzioni viene eseguito. Se condizione restituisce false, il codice nel blocco delle istruzioni non viene eseguito e il ciclo termina.

Esempi:

1. Mentre una variabile è inferiore a 10, stampala sulla console e incrementala di 1:

let i = 1;

while (i < 10) {
  console.log(i);
  i++;
}

// Output:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

Ciclo do...while

Sintassi:

do {
  // istruzione
} while (condizione);

Il ciclo do...while è strettamente correlato al ciclo while. In un ciclo do...while, la condizione  viene verificata alla fine di ogni iterazione del ciclo, anziché all'inizio prima dell'esecuzione del ciclo.

Ciò significa che è garantito che il codice in un ciclo  do...while venga eseguito almeno una volta, anche se l'espressione condizione  restituisce già true.

Esempio:

1. Mentre una variabile è inferiore a 10, stampala sulla console e incrementala di 1:

let i = 1;

do {
  console.log(i);
  i++;
} while (i < 10);

// Output:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

2. Eseguire il push su un array, anche se la condizione restituisce true:

const myArray = [];
let i = 10;

do {
  myArray.push(i);
  i++;
} while (i < 10);

console.log(myArray);

// Output:
// [10]

I componenti funzionali non erano sempre il metodo preferito per dichiarare i componenti in React.

Prima dell'introduzione di React versione 16.8, i componenti funzionali erano trattati in modo molto simile ai cittadini di seconda classe. Non erano in grado di gestire lo stato, la logica e molte altre funzionalità di React e le abbiamo utilizzate solo per il rendering di componenti molto semplici nell'interfaccia utente.

React versione 16.8 ha risolto questi problemi introducendo gli Hook in React, che consentono agli sviluppatori di utilizzare queste funzionalità di React nei componenti funzionali.

In questo articolo imparerai:

• Cosa sono gli Hook di React
• Quattro comuni Hook di React con esempi di come scriverli nelle tue applicazioni
• Infine, daremo un'occhiata a come scrivere i tuoi Hook di React personalizzati

Gli hook sono funzioni integrate di React introdotte nella versione 16.8. Consentono di utilizzare le funzionalità della libreria React come i metodi del ciclo di vita, lo stato e il contesto nei componenti funzionali senza doversi preoccupare di riscriverli in una classe.

Ogni nome degli Hook di React è preceduto dalla parola "use". Ad esempio, useState o useEffect. Questo formato è stato scelto perché gli Hook consentono agli sviluppatori di utilizzare le funzionalità speciali della libreria React. Quindi stai usando ( use) quella caratteristica speciale della libreria di React.

Perché usare gli Hook di React?

Molti sviluppatori sono scettici sull'apprendimento degli Hook di React. Ma tu non dovresti esserlo. Ecco alcuni motivi per cui dovresti iniziare a usare gli Hook di React:

Le classi in React possono creare confusione

Le classi sono un ostacolo all'apprendimento corretto di React. Per usarli, devi capire come funziona la parola chiave this. È inoltre necessario ricordare costantemente di associare i gestori di eventi, nonché altri metodi ridondanti incontrati quando si lavora con le classi in React.

I componenti classe sono complessi e possono essere difficili da capire

I componenti classe sono generalmente di grandi dimensioni e cercano di eseguire molte operazioni. A lungo andare, diventano difficili da capire.

Gli hook risolvono questo problema consentendo di separare componenti di grandi dimensioni in varie funzioni più piccole, anziché dover forzare tutta la logica in un unico componente.

Gli Hook hanno componenti più corti e una migliore leggibilità

I componenti classe sono dotati di molto codice standard. Considera il componente Contatore qui seguito:

class Contatore extends Component {
    constructor(props) {
        super(props)
        this.state = {
        	conto: 1,
        }
    }
    render() {
        return (
            <div>
                Il Conteggio Attuale: {this.state.conto}
                <div>
                <button onClick={this.setState({ conto: this.state.conto + 1 })}>
                addiziona
                </button>
                <button onClick={this.setState({ conto: this.state.conto - 1 })}>
                sottrai
                </button>
                </div>
            </div>
    );
    }
}

Ecco il codice equivalente che utilizza il componente funzionale e React Hooks:

function Contatore ()  {
    const [conto, setConto] = useState(1);
    return (
        <div>
            Il Conteggio Attuale: {this.state.conto}
            <div>
                <button onClick={() => setConto(conto + 1)}>addiziona</button>
                <button onClick={() => setConto(conto - 1)}>sottrai</button>
            </div>
        </div>
    );
};

Nota come il componente della classe sia molto più complesso. Hai bisogno di una classe per estendere React, un costruttore per inizializzare lo stato e devi fare riferimento alla parola chiave this ovunque.

L'uso di componenti funzionali rimuove molto di questo, quindi il nostro codice diventa più breve e più facile da leggere e mantenere.

Regole per l'uso degli Hook di React

Quando si utilizzano gli Hook di React ci sono alcune regole a cui attenersi:

• Chiama solo hook al livello superiore di un componente : non dovresti usare hook all'interno di loop, condizioni o funzioni nidificate. Invece, usa sempre Hook al livello più alto della tua funzione React, prima di qualsiasi parola chiave di ritorno.
• Chiama solo hook da React Functions : non chiamare mai hook da normali funzioni JavaScript. Puoi:
  ✅ Chiamare Hook dai componenti funzionali di React.
  ✅ Chiama Hook da Hook personalizzati.

Hook di React più comuni

Ad oggi, React ha 10 hook integrati. Diamo un'occhiata ai quattro più comuni:

• useState
• useEffect
• useContext
• useReducer

L'Hook useState

L'Hook useState consente di creare, aggiornare e manipolare lo stato all'interno dei componenti funzionali.

React ha questo concetto di stato, che sono variabili che contengono dati da cui dipendono i nostri componenti e che possono cambiare nel tempo. Ogni volta che queste variabili cambiano, React aggiorna l'interfaccia utente eseguendo nuovamente il rendering del componente nel DOM con i valori correnti delle variabili di stato.

L'hook accetta un singolo argomento opzionale: un valore iniziale per lo stato. Quindi restituisce una matrice di due valori:

• La variabile di stato
• Una funzione per aggiornare lo stato

Come esempio, diamo un'occhiata a un componente contatore:

Per utilizzare un Hook, il primo passo è importare l'Hook nella parte superiore del file:

import { useState } from "react";

Quindi, inizializza Hook con un valore. Poiché restituisce un array, puoi utilizzare la destrutturazione dell'array per accedere ai singoli elementi nell'array, in questo modo:

const [conto, setConto] = useState(0);

Con ciò, il codice del componente sarà:

import { useState } from "react";

function Contatore() {
    // Dichiara una nuova variabile di stato, che chiameremo "conto"
    const [conto, setConto] = useState(0);
    return (
        <div>
        Current Cart Count: {count}
            <div>
            <button onClick={() => setConto(conto - 1)}>Add to cart</button>
            <button onClick={() => setConto(conto + 1)}>Remove from cart</button>
            </div>
        </div>
    );
}

Ecco come apparirà il componente una volta renderizzato.

Facendo clic sul pulsante Add to cart o Remove from cart, il valore del conteggio della variabile di stato cambierà e il componente verrà visualizzato nuovamente con il valore aggiornato dello stato.

L'Hook useEffect

Se hai familiarità con i metodi del ciclo di vita della classe React, puoi pensare a l'Hook  useEffect come ai metodi del ciclo di vita componentDidMount, componentDidUpdate, e componentWillUnmount tutti combinati in un'unica funzione. Ti consente di replicare i metodi del ciclo di vita di React nei componenti funzionali.

L'Hook useEffect ti consente di eseguire effetti collaterali nei componenti delle funzioni. Gli effetti collaterali sono azioni che possono essere eseguite insieme alle operazioni principali di un componente, come le interazioni con API esterne, la modifica delle variabili di stato e il recupero dei dati.

L'hook useEffect accetta 2 argomenti:

• Una funzione con il codice da eseguire
• Un array che contiene un elenco di valori dall'ambito del componente (props, contesto e variabili di stato), noto come array di dipendenza, che dice a l'Hook di essere eseguito ogni volta che il suo valore viene aggiornato. Se non viene fornito, l'Hook verrà eseguito dopo ogni rendering.

Ecco un esempio di utilizzo di Hook:

import { useState, useEffect } from "react";
function Contatore() {
    // Dichiara variabili di stato
    const [conto, setConto] = useState(0);
    const [prodotto, setProdotto] = useState("Eggs");
    useEffect(() => {
    	console.log(`${product} will rule the world!`);
    });
    return (
        <div>
        Current {product}'s count: {conto}
            <div>
                <button onClick={() => setConto(conto + 1)}>Add to cart</button>
                <button onClick={() => setconto(conto - 1)}>Remove from cart</button>
                Change Product:{" "}
                <input type="text" onChange={(e) => setProdotto(e.target.value)} />
            </div>
        </div>
    );
}

Nell'esempio, l'effetto verrà eseguito dopo ogni aggiornamento dello stato.

Come attivare condizionalmente un Effetto

Per eseguire l'Hook solo quando determinati valori sono cambiati, passare le variabili come dipendenza nell'array:

useEffect(() => {
	console.log(`${product} will rule the world!`);
}, [prodotto]); // Eseguire nuovamente l'effetto solo se il valore del prodotto cambia

Con questa modifica, Hook verrà eseguito solo al primo rendering e quando il valore del prodotto viene modificato.

Come eseguire una volta al primo rendering

Se vuoi che un effetto venga eseguito solo una volta al primo rendering, come fare chiamate API quando il componente viene renderizzato per la prima volta, puoi passare un array vuoto come sua dipendenza in questo modo:

useEffect(() => {
	console.log("Questo viene eseguito una volta al primo rendering");
}, []);

Fornendo un array vuoto, dice a Hook di rimanere in ascolto per zero cambiamenti di stato, quindi verrà eseguito solo una volta.

L'Hook useContext

L'Hook useContext funziona con l'API React Context. Fornisce un modo per rendere accessibili dati particolari a tutti i componenti dell'applicazione, indipendentemente dalla loro profondità di annidamento.

React ha un flusso di dati unidirezionale, in cui i dati possono essere passati solo da genitore a figlio. Per passare i dati (come lo stato) da un componente padre a un componente figlio, dovrai passarli manualmente come prop attraverso vari livelli a seconda di quanto profondamente è nidificato il componente figlio.

Per dati come la lingua preferita dall'utente, il tema o le proprietà dell'utente autenticato, è noioso doverli passare manualmente nell'albero dei componenti.

L'API Context di React e l'Hook useContext semplificano il passaggio dei dati tra tutti i componenti dell'app.

Accetta un oggetto di contesto creato utilizzando React.createContext e restituisce il contesto corrente in questo modo:

const valore = useContext(QualcheContesto);

Diamo un'occhiata a un esempio di come funziona l'Hook:

Innanzitutto, crea un contesto per utilizzare l'Hook. Ad esempio, ecco un UserContext per ottenere il valore degli utenti correnti:

import React from "react";
// alcuni valori di contesto fittizi
const utenti = [
{
    nome: "Harry Potter",
    occupazione: "Wizard",
},
{
    nome: "Kent Clark",
    occupazione: "Super hero,
},
];

export const UserContext = React.createContext(utenti);

Ogni contesto ha un wrapper Provider, che consente ai suoi componenti figli di sottoscrivere le modifiche nel contesto e trasmette il valore del contesto attraverso un valore prop.

Se il valore prop del provider viene aggiornato, i suoi componenti figlio ad esso collegato, verranno nuovamente visualizzati con il nuovo valore di contesto.

function Utenti() {
return (
    <UserContext.Provider valore={utenti}>
    <UserProfile />
    </UserContext.Provider>
);
}

Nell'esempio, UserProfile viene resa come componente di consumo del contesto.

import React, { useContext } from "react";
import { UserContext } from "./App";

export function UserProfile() {
    const utenti = useContext(UserContext);
    return (
        <div>
            {users.map((utente) => (
            <li>
            I am {utente.nome} and I am a {utente.occupazione
            ))}
        </div>
    );
}

Questo visualizzerà le proprietà degli utenti correnti:

L'Hook useReducer

L'Hook useReducer è un'alternativa all'Hook  useState. La differenza è che consente una logica più complessa e aggiornamenti di stato che coinvolgono più sottovalori.

Simile a useState, useReducer ti consente di creare variabili simili a uno stato che aggiornano l'interfaccia utente ogni volta che cambiano.

Questo Hook accetta 2 argomenti: una funzione riduttore e uno stato iniziale.

useReducer(riduttore, statoIniziale);

Restituisce una matrice di due valori che possono essere destrutturati nel valore corrente dello stato e una funzione di invio.

const [stato, spedizione] = useReducer(riduttore, statoIniziale);

Impariamo i suoi argomenti e i valori restituiti:

• stato : questo è il valore corrente di statoIniziale passato all'Hook.
• riduttore : il riduttore è una funzione che accetta lo stato e un'azione. Sulla base di questi argomenti determina come cambierà il valore di stato.
• spedizione: la funzione di spedizione è il modo in cui passiamo un'azione alla funzione di riduzione. Invia l'azione da utilizzare per aggiornare lo stato.

In genere, ripetiamo il tipo di azioni eseguite nella nostra app tramite un'istruzione switch per determinare come cambierà il valore dello stato. Ecco come Hook aggiorna i valori del suo stato.

function riduttore(stato, azione) {
    switch (azione.type) {
        case "CASE_1":
        return {
        	aggiornaStato,
        };
        case "CASE_2":
        return {
        	aggiornaStato,
        };
        default:
        	return stato;
    }
}

La funzione di spedizione di solito invia un oggetto nel formato:

spedizione({ type: "ACTION_TYPE", payload: argomentiOpzionali });

Dove type è la descrizione dell'azione e payload sono gli argomenti che vuoi passare al riduttore.

Come creare Hook personalizzati

Un Hook personalizzato è l'idea di estrarre la logica dei componenti comunemente usati dall'interfaccia utente in funzioni JavaScript utilizzando gli Hook di React già disponibili. Questo ti aiuta a prevenire la duplicazione del codice e ti consente di rendere tale logica riutilizzabile all'interno di più componenti.

Diamo un'occhiata a un esempio di hook personalizzato che restituirà una risposta da qualsiasi URL API valido che gli passiamo.

//useFetch.js
import { useState, useEffect } from "react";

export function useFetch(url) {
	//values
    const [data, setData] = useState(null);
    const [error, setError] = useState("");
    useEffect(() => {
        fetch(url)
        .then(res => {
            if (!res.ok) {
            throw Error("qualcosa di sbagliato, non è stato possibile connettersi alla risorsa");
        }
        setData(res.json());
        })
        .then(() => {
        	setError("");
        })
        .catch( error => {
            console.warn(`scusa si è verificato un errore, dovuto a ${error.message} `);
            setData(null);
            setError(error.message);
        });
    }, [url]);
    return [data, error];
}

Ora puoi usare questa logica ovunque nella tua app semplicemente importando la funzione e passando un percorso API come argomento, invece di scrivere tutto da zero.

Ricapitolando

Spero che tu abbia compreso quanto sono utili gli Hook di React. Ti consentono di creare al volo componenti efficaci senza preoccuparti dei problemi che derivano dall'uso dei componenti di classe.

Dal permetterti di concentrarti sulla scrittura del tuo codice principale al permetterti di creare i tuoi Hook personalizzati… Gli Hook di React sono così fantastici! Sono entusiasta che li possa provare tu stesso.

Se hai trovato utile questo articolo, condividilo con i tuoi amici e la tua rete. Inoltre, sentiti libero di connetterti con me su Twitter e sul mio blog dove condivido una vasta gamma di articoli e risorse didattici gratuite.

Grazie per la lettura e buona codifica!

di Sean Han

Secondo Wikipedia, una blockchain è:

Un database distribuito utilizzato per mantenere un elenco di record in continua crescita, chiamati blocchi .

Sembra carino, ma come funziona?

Per illustrare una blockchain, utilizzeremo un'interfaccia a riga di comando open source chiamata Blockchain CLI .

Ho anche creato una versione basata su browser di questo qui .

Installazione della versione dell'interfaccia della riga di comando

Se non lo hai già fatto, installa Node.js .

Quindi esegui quanto segue nel tuo terminale:

# Clona questo repository
$ git clone https://github.com/seanseany/blockchain-cli

# Vai nel repository
$ cd blockchain-cli

# Installa le dipendenze
$ npm install

# Avvia l'app
$ npm start

Dovresti vedere ? Welcome to Blockchain CLI! e il prompt  blockchain → pronto a ricevere comandi.

Che aspetto ha un blocco?

Per vedere la tua blockchain attuale, inserisci blockchain o bc nel prompt dei comandi. Dovresti vedere un blocco come l'immagine qui sotto.

• Indice (blocco n.): quale blocco è? (Il blocco Genesis ha indice 0)
• Hash: il blocco è valido?
• Hash precedente: il blocco precedente è valido?
• Timestamp: quando è stato aggiunto il blocco?
• Dati: quali informazioni sono memorizzate nel blocco?
• Nonce: quante iterazioni abbiamo passato prima di trovare un blocco valido?

Blocco Genesis

Ogni blockchain inizierà con ? Genesis Block. Come vedrai più avanti, ogni blocco sulla blockchain dipende dal blocco precedente. Quindi, il blocco Genesis è necessario per estrarre il nostro primo blocco.

Cosa succede quando viene estratto un nuovo blocco?

Estraiamo il nostro primo blocco.  Digita mine freeCodeCamp♥︎ nel prompt.

La blockchain esamina l'ultimo blocco sulla blockchain per l'indice e l'hash precedente. In questo caso il blocco Genesis è l'ultimo blocco.

• Indice: o+1 = 1
• Hash precedente: 0000018035a828da0…
• Timestamp: quando viene aggiunto il blocco
• Dati: freeCodeCamp❤
• Hash: ??
• Nonce: ??

Come viene calcolato l'hash?

Un valore hash è un valore numerico di lunghezza fissa che identifica i dati in modo univoco.

L'hash viene calcolato prendendo l'indice, l'hash del blocco precedente, il timestamp, i dati del blocco e nonce come input.

CryptoJS.SHA256(index + previousHash + timestamp + data + nonce)

L'algoritmo SHA256 calcolerà un hash univoco, dati questi input. Gli stessi input restituiranno sempre lo stesso hash.

Hai notato i quattro 0 iniziali nell'hash del blocco?

I quattro 0 iniziali sono un requisito minimo per un hash valido. Il numero di 0 iniziali richiesti è chiamato difficoltà .

function isValidHashDifficulty(hash, difficulty) {
  for (var i = 0, b = hash.length; i < b; i ++) {
      if (hash[i] !== '0') {
          break;
      }
  }
  return i >= difficulty;
}

Questo è anche noto come il sistema Proof-of-Work .

Cos'è un nonce?

Un nonce è un numero utilizzato per trovare un hash valido.

let nonce = 0;
let hash;
let input;

while(!isValidHashDifficulty(hash)) {     
  nonce = nonce + 1;
  input = index + previousHash + timestamp + data + nonce;
  hash = CryptoJS.SHA256(input)
}

Il nonce itera finché l'hash non è valido. Nel nostro caso, un hash valido ha almeno quattro 0 iniziali. Il processo per trovare un nonce che corrisponda a un hash valido è il mining .

All'aumentare della difficoltà, il numero di possibili hash validi diminuisce. Con meno hash validi possibili, ci vuole più potenza di elaborazione per trovare un hash valido.

Perché è importante?

È importante perché mantiene immutabile la blockchain.

Se abbiamo la seguente blockchain A → B → C, e qualcuno vuole cambiare i dati sul Blocco A. Ecco cosa succede:

1. Modifiche ai dati sul blocco A.
2. L'hash del blocco A cambia perché i dati vengono utilizzati per calcolare l'hash.
3. Il blocco A diventa non valido perché il suo hash non ha più quattro 0 iniziali.
4. L'hash del blocco B cambia perché l'hash del blocco A è stato utilizzato per calcolare l'hash del blocco B.
5. Il blocco B diventa non valido perché il suo hash non ha più quattro 0 iniziali.
6. L'hash del blocco C cambia perché l'hash del blocco B è stato utilizzato per calcolare l'hash del blocco C.
7. Il blocco C diventa non valido perché il suo hash non ha più quattro 0 iniziali.

L'unico modo per mutare un blocco sarebbe minare di nuovo il blocco e tutti i blocchi successivi. Poiché vengono sempre aggiunti nuovi blocchi, è quasi impossibile mutare la blockchain.

Spero che questo tutorial ti sia stato utile!

Se desideri provare una versione web della demo, vai su http://blockchaindemo.io

Se sei appassionato di tecnologia, ci sono buone possibilità che tu abbia sentito i termini Bitcoin, Crypto, Ethereum o anche "registri distribuiti e decentralizzati".

Probabilmente hai sentito parlare di criptovaluta e algoritmi di crittografia, della fine degli "intermediari" e così via.

Comunemente si è portati a pensare che le criptovalute (es: Bitcoin, Ripple, Ethereum, Litecoin, ecc.) e la Blockchain siano la stessa cosa. Ma non così.

Le criptovalute sono un'applicazione intelligente di una tecnologia molto più intelligente: la Blockchain .

In questo post tratterò alcuni dei concetti di base della Blockchain in modo da capire di cosa si tratta, come deve essere concettualizzata e cosa si può costruire su di essa.

Ma come per tutte le cose, ha più senso se capisci perché sono state inventate, prima di entrare in quello che fanno. In questo modo ti sarà più facile capire per quale problema da risolvere è stata progettata la blockchain.

Perché usare blockchain?

Ottima domanda. Sono così felice che tu l'abbia chiesto. Sediamoci e facciamo un piccolo esperimento mentale.

Cosa succede se tu e il tuo migliore amico conducete indipendentemente e separatamente la stessa campagna di petizioni? Diciamo che è per la causa "Liberate i criceti".

Diciamo che la conduci rispettando una sequenza identica al tuo amico e nello stesso sobborgo, ma tiri fuori un diverso numero di adesioni alla petizione. Quale versione della petizione firmata è la “fonte di verità”?

Dovresti risalire lungo i due elenchi di firme, una firma alla volta, per individuare l'ultima discrepanza. E poi dovresti lavorare più indietro per identificare il primo risultato che diverge tra le due liste. Prima di tale punto di origine della divergenza, tutte le altre firme nei due elenchi dovrebbero corrispondere.

Quindi una cosa è sicura. Prima di questo punto di divergenza, entrambe le liste sono in accordo, quindi quelle firme rappresentano il numero minimo di persone che hanno firmato per sostenere la liberazione dei criceti.

Sebbene possa funzionare bene per criceti e piccoli sondaggi suburbani, non funziona così bene nel mondo digitale. Oppure votazioni, operazioni bancarie, transazioni finanziarie, trasferimento di proprietà fondiarie, adempimento di obblighi contrattuali, ecc. Sono necessarie "terze parti di fiducia" indipendenti per verificare una catena di eventi e rassicurarti solennemente che la "catena di custodia" non è stata interrotta.

Una "catena di custodia" a volte può anche essere chiamata "provenienza" - entrambe significano la stessa cosa: la sequenza di eventi storici relativi ai dati in questione.

Ecco perché ci sono governi che hanno l'ultima parola sulla tua identità, e i voti devono essere contati fisicamente e ricontati da centinaia di volontari, e gli impiegati in uffici squallidi tengono registri e certificati per confermare se possiedi o meno la tua fattoria o la staccionata bianca del bungalow.

Ecco perché hai bisogno di intermediari finanziari per assicurarti che quando acquisti il tuo pupazzo da collezione di Darth Vader, utilizzando una carta di credito, il denaro (valore) venga "rimosso" dal tuo account e "immesso" sul conto del venditore.

Questo è tecnicamente chiamato il "problema della doppia spesa": come ci si assicura di non spendere gli stessi soldi due volte? Senza qualcuno che lo faccia, potresti spendere i soldi e allo stesso tempo continuare a possedere quei soldi stessi.

Quindi è davvero un grosso problema: la vita moderna richiede che ci affidiamo, ci fidiamo e paghiamo intermediari di terze parti "fidati" per garantire che il valore (il denaro) effettivamente "passi di mano" digitalmente. Ecco perché esistono Visa e MasterCard e perché PayPal e altri si collegano ai tuoi conti bancari.

Al centro del perché della Blockchain c'è questo problema: come fai a sapere che una sequenza di eventi non è stata manomessa per alterare lo stato attuale?

È qui che si inserisce la Blockchain. Chiaro finora?

Come funziona Blockchain

Allo scopo di comunicare un concetto con semplicità, posso prendermi delle libertà con alcuni degli aspetti tecnici e nascosti di questa tecnologia. Il mio obiettivo è farti capire di cosa si tratta e avere un modello mentale di come funziona. Per questo, potrei aver bisogno di essere un po' sciolto con la precisione al fine di migliorare le probabilità di comprensione, specialmente per i non madrelingua.

Per la precisione, è essenziale ricordare che la Blockchain è una tecnologia, un codice software matematicamente complesso. E Bitcoin (o Ethereum o qualsiasi altra criptovaluta offerta) sono solo applicazioni di questa tecnologia.

Quindi i principi chiave sono:

• Le blockchain vengono "estratte" (prodotte attraverso il dispendio di sforzi, come nell'estrazione dell'oro) da computer potenti e affamati di risorse – chiamati nodi, che si trovano sulla stessa rete.
• Catene di registrazioni di transazioni crittografate digitalmente e con timestamp sono raggruppate in "blocchi", che vengono mantenuti su un "registro" da ciascun nodo. Quando le transazioni vengono aggiunte a un blocco, i blocchi vengono collegati tra loro in modo lineare e cronologico come "catene". Quindi l'intero record/registro viene sincronizzato attraverso la rete di nodi in modo tale che tutte le "catene" di blocchi sui nodi dovrebbero raccontare la stessa identica cosa circa l'iter di una determinata transazione. Quindi otteniamo "blocco + catena = blockchain". È una lunga e complicata lista concatenata.
• Ogni blocco in una catena ha il proprio ID, un hash crittografico unico e specifico per ogni blocco. Quell'hash viene anche memorizzato nel blocco successivo della catena, causando un collegamento. Un blocco può memorizzare migliaia di transazioni e la più piccola modifica ai dati di quel blocco risulterebbe in un nuovo hash. Quindi, se un hash cambia ma il blocco successivo ha un hash diverso, sappiamo che alcuni dati nel blocco precedente sono stati manomessi.
• Man mano che centinaia diventano migliaia di nodi (e ne vengono aggiunti altri continuamente), ogni nodo deve "concordare" sulla cronologia dei blocchi/registro – questo è chiamato "consenso critico". Uno dei modi in cui si ottiene il consenso è attraverso l'hash crittografico di cui abbiamo parlato prima.
• In caso di discrepanze nel registro (ad esempio l'hash di un blocco non corrisponde al riferimento del blocco successivo all'hash del blocco precedente), il registro con la catena più lunga di transazioni valide incorporate sarà quello “corretto” – la fonte di verità. Eventuali nodi che lavorano su altri nodi (versioni più corte) della catena passano a quella più lunga. Ciò mantiene il consenso critico (questo concetto è estremamente semplificato, ma per ora sufficiente).
• Qualsiasi intercettazione o modifica malevola di un registro (di nuovo, ad esempio, quando l'hash di un blocco non corrisponde) creerebbe immediatamente una discrepanza con tutte le altre versioni. Avrebbe anche una "storia" di blocco più breve a confermarlo, il che rende quella versione manomessa un elemento sospetto nella rete blockchain dove la lunghezza conta (ehm).
• Replicare quella discrepanza su tutte le versioni registro - l'intera rete blockchain - è un compito così enorme che è poco pratico dal punto di vista computazionale e accadrebbe solo se i malintenzionati avessero improvvisamente il controllo sulla maggior parte dei nodi che estraggono blockchain e li cambiassero tutti piuttosto rapidamente. Questo tipo di attacco coordinato alla maggior parte dei nodi della rete è spesso chiamato attacco del 51% .

È interessante notare che Satoshi Nakamoto afferma nel white paper originale di Bitcoin ,

“ In quanto tale, la verifica è affidabile fintanto che i nodi onesti controllano la rete, ma è più vulnerabile se la rete è sopraffatta da un utente malintenzionato. "

Tuttavia, altrove lui/lei/l'organizzazione (non sappiamo chi sia "Satoshi") sottolinea con calma che modificare le passate transazioni nei blocchi, sull'intera rete di nodi, richiederebbe all'attaccante di rifare la catena di custodia in quei blocchi, e tutti i blocchi aggiunti dopo. Quindi dovrebbe correre come un pazzo per raggiungere e superare il lavoro dei nodi che non sono sotto il suo controllo (in modo che possa riscrivere il registro, per così dire).

E per questo motivo, la "probabilità che un attaccante lento recuperi il ritardo, diminuisce esponenzialmente man mano che vengono aggiunti blocchi successivi".

L'assoluta complessità programmatica, il ritmo e il volume delle attività nodali rendono difficile per i falsari/attaccanti recuperare il ritardo, per non parlare di superare i nuovi blocchi costantemente estratti.

Questo ha senso. È come la bugia che dici a un membro della famiglia sul motivo per cui non hai potuto partecipare al saggio di flauto dei loro figli. E poi devi inseguire pazzamente tutti gli altri membri della famiglia e assicurarti di aver detto loro la stessa bugia in modo che quando la persona interessata a cui hai mentito tira fuori l'argomento, tutti siano consapevoli di questa bugia e tengano il tuo gioco. Sembra estenuante.

Per concludere, la caratteristica distintiva di una blockchain è che è un registro distribuito su molti, molti nodi ed è estremamente intensivo dal punto di vista computazionale (costoso) aggiungere nodi a quella rete.

Pertanto, ogni registro deve essere "consapevole" di tutte le transazioni e deve avere una versione concordata (che avrà la "catena di custodia" più lunga dietro di sé) attraverso l'intera rete a cui verrà aggiunta la transazione successiva.

Come dichiara Satoshi Nakamoto nel white paper originale di Bitcoin, "L'unico modo per confermare l'assenza di una transazione è essere a conoscenza di tutte le transazioni."

È importante sottolineare che la blockchain "dis-intermediata" è fidata, quindi non dobbiamo pagare commissioni di transazione a "terze parti fidate" per essere affidabili e mantenerci onesti noi e le controparti con cui trattiamo . La blockchain garantisce in modo programmatico la verità (provenienza) della cronologia delle transazioni in essa contenute.

Allora perché dovremmo preoccuparci?

Ebbene, eliminando la necessità di “intermediari di fiducia” qualsiasi intermediario che fa pagare un compenso modesto per averci dato il dono della certezza ha bisogno di trovare un nuovo lavoro. E questo ha un impatto sulle banche che tradizionalmente offrono tali servizi assicurativi.

Significa anche che possiamo programmare "contratti intelligenti" tra il promittente e il promesso che si accorgono automaticamente (digitalmente) se quella promessa è stata mantenuta o meno.

Ciò ha consentito a un'artista davvero esperta di tecnologia come Imogen Heap di vendere la sua musica direttamente al suo pubblico di ascolto e di riscuotere le sue quote direttamente da loro piuttosto che perdere la maggior parte dei guadagni per etichette discografiche, manager e altri "intermediari di fiducia".

Probabilmente cambierà il modo in cui la proprietà intellettuale sarà protetta, accessibile, condivisa, distribuita e sviluppata su Internet.

Potrebbe anche significare che la flotta di conducenti di Uber effettua transazioni direttamente con le persone che desiderano un passaggio piuttosto che affidarsi a Uber per coordinare e controllare il flusso di informazioni e denaro.

Potrebbe significare che potrei inviarti direttamente piccole somme di denaro praticamente senza commissioni (microtransazioni). Potrebbe significare che i milioni di persone senza banca nel mondo che hanno uno smartphone possono iniziare a effettuare transazioni ben oltre i loro tradizionali confini del mondo fisico.

In modo sorprendente, i governi stanno guardando oltre la semplice criptovaluta pensando al modo con cui implementare questa tecnologia , ad esempio per registrare la proprietà terriera .

In effetti, potremmo creare un mondo di vere transazioni digitali peer-to-peer per il trasferimento di valore che sia distribuito, orizzontale, rimuova la necessità di fare affidamento sulla fiducia e soprattutto richieda una straordinaria potenza di calcolo per manometterlo. Queste transazioni potrebbero essere tra persone, macchine e dispositivi.

Potrebbe quindi offrire un nuovo paradigma di sicurezza per la protezione dei dati raccolti e trasferiti attraverso "l'internet delle cose".

Personalmente credo che la complessità del mondo moderno sia oscurata dietro i touchscreen intuitivi. La tecnologia blockchain sarà rapidamente integrata nel nostro universo tecnologico senza che noi ne saremo pienamente consapevoli, proprio come utilizziamo il DNA ricombinante del lievito per la produzione di insulina sintetica dagli anni '70.

I cambiamenti e i risparmi sui costi saranno ampiamente definiti cambiamenti tecnologici, come quella "cosa interweby" o qualche altra frase vaga e all-inclusive.

Un problema: funzionerà finché possiamo confidare che un "sistema senza fiducia" codificato e progettato dagli esseri umani (di chi ci fidiamo?) promuoverà la causa di processi senza-fiducia in un mondo diffidente e inaffidabile . Potrebbe essere necessario leggere questa frase più volte.

Ricapitolando

OK – ora dovresti essere ragionevolmente consapevole delle basi della blockchain. Ma se sei interessato c'è molto altro da imparare.

Puoi discutere se la blockchain sia utile o troppo pubblicizzata, rivoluzionaria o noiosa. Ma è difficile ignorare che è piuttosto interessante come concetto.

Ecco un video davvero fantastico di Anders Brownworth che spiega il tutto con un modello blockchain. Consiglio vivamente di guardarlo.

E come esercizio di apprendimento, puoi costruire la tua blockchain direttamente nel tuo browser o nella tua riga di comando. Ecco un breve tutorial su come costruire la tua blockchain.

Se hai commenti su questo articolo o pensi che avrei potuto spiegare meglio alcune parti di questo, twittami su @ZubinPratap

Se vuoi saperne di più sul mio viaggio nel codice, dai un'occhiata all'episodio 53 del podcast freeCodeCamp , dove Quincy (fondatore di freeCodeCamp) e io condividiamo le nostre esperienze come cambi di carriera che potrebbero aiutarti nel tuo viaggio. Puoi anche accedere al podcast su iTunes , Stitcher e Spotify.

Terrò anche alcuni AMA e webinar nei prossimi mesi. Se questo ti interessa, per favore fatemelo sapere andando qui . E, naturalmente, puoi anche twittarmi su @ZubinPratap .

Il flusso di codice condizionale è la capacità di modificare il modo in cui un pezzo di codice si comporta in base a determinate condizioni. In tali situazioni puoi usare le istruzioni if.

L'istruzione if è anche nota come dichiarazione decisionale, poiché prende una decisione sulla base di una data condizione o espressione. Il blocco di codice all'interno della dichiarazione if viene eseguito se la condizione restituisce true. Invece, il codice all'interno delle parentesi graffe viene ignorato se la condizione restituisce false e il codice dopo l'istruzione if viene eseguito.

Sintassi di un'istruzione if

if (condizioneTest) {
   // istruzioni
}

Un semplice esempio

Diamo un'occhiata a un esempio di quanto appena detto:

#include <stdio.h>
#include <stdbool.h>

int main(void) {
    if(true) {
        printf("La condizone è Vera!\n");
    }

    return 0;
}

Output:

La condizone è Vera!

Se il codice tra parentesi dell'istruzione if è vero, tutto ciò che è racchiuso tra le parentesi graffe viene eseguito. In questo caso, true restituisce vero, quindi il codice esegue la funzione printf.

Istruzioni if..else

In un'istruzione if...else, se il codice tra parentesi tonde dell'istruzione if è vero, viene eseguito il codice tra parentesi graffe. Ma se la condizione tra parentesi è falsa, viene eseguito tutto il codice all'interno delle parentesi graffe dell'istruzione  else.

Ovviamente, l'esempio sopra non è molto utile in questo caso perché true restituisce sempre vero. Eccone un altro un po' più pratico:

#include <stdio.h>

int main(void) {
    int n = 2;

    if(n == 3) { // compara n con 3
        printf("La condizione è Vera!\n");
    } 
    else { // se la prima condizione non è vera, vai a questo blocco di codice
        printf("La condizione è Falsa!\n");
    }

    return 0;
}

Output:

La condizione è Falsa!

Qui, ci sono alcune differenze importanti. Primo, stdbool.h non è stato incluso. Va bene perché true e false non vengono utilizzati come nel primo esempio. In C, come in altri linguaggi di programmazione, puoi utilizzare istruzioni che restituiscono vero o falso anziché utilizzare direttamente i valori booleani true o false.

Notare anche la condizione tra parentesi dell'istruzione if: n == 3. Questa condizione confronta n e il numero 3. == è l'operatore di confronto ed è una delle numerose operazioni di confronto in C.

if...else nidificato

Le istruzioni if...else consentono di scegliere tra due possibilità. Ma a volte devi scegliere tra tre o più possibilità.

Ad esempio, la funzione segno in matematica restituisce -1 se l'argomento è minore di zero, +1 se l'argomento è maggiore di zero e restituisce zero se l'argomento è zero.

Il codice seguente implementa questa funzione:

if (x < 0)
   segno = -1;
else
   if (x == 0)
      segno = 0;
   else
      segno = 1;

Come puoi vedere, una seconda istruzione if...else è annidata all'interno dell'istruzione else della prima if..else.

Se x è minore di 0, allora segno è impostato su -1. Invece, se x non è inferiore a 0, viene eseguita la seconda istruzione if...else. Lì, se x è uguale a 0, segno è anche impostato a 0. Ma se x è maggiore di 0, segno è invece impostato a 1.

Piuttosto che un'istruzione if...else nidificata, i principianti usano spesso una catena di istruzioni  if:

if (x < 0) {
   segno = -1;
}
   
if (x == 0) {
   segno = 0;
}
   
if (x > 0) {
   segno = 1;
}

Sebbene funzioni, non è consigliabile poiché non è chiaro che solo una delle istruzioni di assegnazione ( segno = ...) debba essere eseguita a seconda del valore di x. È anche inefficiente: ogni volta che il codice viene eseguito, tutte e tre le condizioni vengono verificate, anche se una o due non devono esserlo.

Istruzioni else...if

Le istruzioni if...else sono un'alternativa a una catena di istruzioni if. Considera quanto segue:

#include <stdio.h>

int main(void) {
    int n = 5;

    if(n == 5) {
        printf("n è uguale a 5!\n");
    } 
    else if (n > 5) {
        printf("n è maggiore di 5!\n");
    }

    return 0;
}

Output:

n è uguale a 5!

Se la condizione per l'istruzione if risulta falsa, la condizione per l'istruzione else...if  viene verificata. Se tale condizione restituisce vero, viene eseguito il codice all'interno delle parentesi graffe dell'istruzione else...if.

Operatori di confronto

Operatori logici

Potremmo voler eseguire un po' di codice se qualcosa non è vero, o se due cose sono vere. Per questo abbiamo gli operatori logici:

Per esempio:

#include <stdio.h>

int main(void) {
    int n = 5;
    int m = 10;

    if(n > m || n == 15) {
        printf("n è maggiore di m, oppure n è uguale a 15\n");
    } 
    else if( n == 5 && m == 10 ) {
        printf("n è uguale a 5 e m è uguale a 10!\n");
    } 
    else if ( !(n == 6)) {
        printf("Non è vero che n è uguale a 6!\n");
    }
    else if (n > 5) {
        printf("n è maggiore di 5!\n");
    }

    return 0;
}

Output:

n è uguale a 5 e m è uguale a 10!

Una nota importante sui confronti in C

Abbiamo accennato in precedenza che ogni confronto controlla se qualcosa è vero o falso, ma questo è vero solo in parte. C è molto leggero e vicino all'hardware su cui è in esecuzione. Con l'hardware è facile verificare se qualcosa è 0 o falso, ma verificare qualsiasi altra cosa è molto più difficile.

Invece è molto più accurato dire che i confronti stanno davvero controllando se qualcosa è 0 / false o se è un altro valore.

Ad esempio, questa istruzione if  è vera e valida:

if(12452) {
    printf("Questa è vera!\n")
}

In base alla progettazione, 0 è falso e, per convenzione, 1 è vero. Infatti, dando uno sguardo alla libreria stdbool.h:

#define false   0
#define true    1

Anche se c'è molto altro, questo è il fulcro di come funzionano i booleani e di come funziona la libreria. Queste due righe indicano al compilatore di sostituire la parola false con 0 e true con 1.

Gli identificatori di formato definiscono il tipo di dati da stampare sull'output standard. È necessario utilizzare gli identificatori di formato sia che si stampi l'output formattato con printf() e sia che si accetti l'input con scanf().

Alcuni degli identificatori % che puoi utilizzare in ANSI C sono i seguenti:

Esempi:

Identificatore di formato a carattere singolo %c:

#include <stdio.h> 

int main() { 
  char first_ch = 'f'; 
  printf("%c\n", first_ch); 
  return 0; 
} 

Output:

f

Identificatore di formato stringa %s:

#include <stdio.h> 

int main() { 
  char str[] = "freeCodeCamp"; 
  printf("%s\n", str); 
  return 0; 
} 

Output:

freeCodeCamp

Immissione di caratteri con l'identificatore di formato %c:

#include <stdio.h> 

int main() { 
  char user_ch; 
  scanf("%c", &user_ch); // l'utente inserisce Y
  printf("%c\n", user_ch); 
  return 0; 
} 

Output:

Y

Input stringa con l'identificatore di formato %s:

#include <stdio.h> 

int main() { 
  char user_str[20]; 
  scanf("%s", user_str); // l'utente inserisce fCC
  printf("%s\n", user_str); 
  return 0; 
} 

Output:

fCC

Identificatori di formato intero decimale %d e %i:

#include <stdio.h> 

int main() { 
  int found = 2015, curr = 2020; 
  printf("%d\n", found); 
  printf("%i\n", curr); 
  return 0; 
} 

Output:

2015
2020

Identificatori di formato dei numeri in virgola mobile %f e %e:

#include <stdio.h>

int main() { 
  float num = 19.99; 
  printf("%f\n", num); 
  printf("%e\n", num); 
  return 0; 
}

Output:

19.990000
1.999000e+01

Identificatore di formato intero ottale %o:

#include <stdio.h> 

int main() { 
  int num = 31; 
  printf("%o\n", num); 
  return 0; 
}

Output:

37

Identificatore di formato intero esadecimale %x :

#include <stdio.h> 

int main() { 
  int c = 28; 
  printf("%x\n", c); 
  return 0; 
} 

Output:

1c