Due anni fa, ho iniziato a imparare e a usare React, e oggi continuo a usarlo per il mio lavoro di sviluppatore software e per progetti personali.

In questo tempo ho incontrato un sacco ti problemi "tipici". Così ho cercato in giro e ho trovato alcune buone pratiche che ho integrato nel mio flusso di lavoro e che hanno reso più semplice la mia vita e quella dei miei colleghi.

Durante questo percorso ho anche affrontato sfide che all'inizio non ho risolto al meglio e a cui voglio approcciarmi in un modo migliore in futuro.

Questa è la ragione per cui ho scritto questa guida. A cui penso come a una raccolta di suggerimenti che avrei voluto dare a me stesso due anni fa, quando ho iniziato.

Indice:

• Le tre sfide che ogni sviluppatore React affronta
• Imparare gli elementi fondamentali di React
• Come realizzare dei componenti React puliti, prestanti e manutenibili
• Suggerimenti per scrivere del codice React migliore – La ciliegina sulla torta
• Conclusione

Innanzitutto, conoscerai le tre sfide principali che ogni sviluppatore React deve affrontare. Questo è importante perché quando sei cosciente delle potenziali sfide, capirai le ragioni alla base di queste buone pratiche in modo più profondo. Avere questa mentalità dall'inizio può essere d'aiuto anche quando stai progettando dei componenti o organizzando un progetto.

Dopo questo primo importante passo, ti parlerò di tre buone pratiche. Sono un mix di suggerimenti teorici e pratici con esempi di codice. Proverò a minimizzare i problemi in stile hello world e arrivare a ciò che ho visto nel mondo reale.

Le tre sfide che ogni sviluppatore React affronta

Durante i miei due anni di uso quotidiano di React, ho individuato tre sfide principali che uno sviluppatore React deve affrontare per realizzare le proprie app. Ignorare queste difficoltà potrebbe portare a momenti difficili che nuocciono alla crescita dell'app.

Quindi, tieni a mente questi problemi quando orchestri la tua app, perché ti risparmieranno tempo ed energie.

⚙️ Manutenibilità

Questo va a braccetto con la riusabilità. All'inizio, quando l'applicazione e i componenti sono molto leggeri, è semplice fare manutenzione. Ma una volta che le esigenze iniziano a crescere, i componenti tendono a diventare molto complessi e perciò più difficili da gestire.

Spesso ho visto un componente con molti casi diversi, ognuno che rappresenta un risultato diverso. Il JSX è inondato da rendering condizionale (operatori ternari e semplici operatori &&), classname applicati in modo condizionale o componenti che usano un'istruzione switch enorme. Ci sono molti possibili valori di prop e stati, ognuno responsabile di un risultato diverso.

Secondo me, non c'è niente di sbagliato in queste tecniche in quanto tali. Ma credo che tutti dovrebbero pensare a cosa fare quando un componente inizia a diventare poco manutenibile e quando queste tecniche vengono usate eccessivamente. Impareremo come controllare questo aspetto più avanti in questo articolo.

Il problema (e ne sono colpevole anch'io) è che maggiori sono la complessità e i diversi risultati di un componente (polimorfismo), più questo risulta difficile da gestire.

A essere onesto, la causa principale è spesso la pigrizia, esperienza insufficiente o mancanza di tempo per fare il refactoring di un componente in modo adeguato, così da renderlo più gestibile e pulito.

Un altro fattore chiave che ho visto è l'insufficienza o la mancanza di test. Lo so, non è un tipo di lavoro che molti sviluppatori amano, ma può davvero essere d'aiuto sul lungo termine.

🧠 Solida conoscenza di React

Un'altra causa principale dei problemi degli sviluppatori React è una scarsa comprensione del funzionamento di base di React. Ci sono passato anch'io.

Ho visto molte persone saltare troppo velocemente in concetti intermedi o avanzati senza avere basi solide. Ma questo non è specifico di React, bensì è un problema generale nella programmazione.

Non avere delle conoscenze solide di React può anche causare problemi a te come sviluppatore. Ricordo i mal di testa avuti quando volevo usare diversi cicli di vita di componenti senza sapere effettivamente come farlo. Quindi ho dovuto fare qualche passo indietro e poi approfondire l'argomento.

Dato che ritengo che sia uno degli aspetti più importanti, gli ho dedicato un intero capitolo all'interno di questo articolo.

📈 Scalabilità

Questa sfida va a braccetto con la manutenibilità. Non è specifica per React, ma si applica in genere ai software.

Ho imparato che per realizzare dei software eccellenti non contano solo esperienza utente, schemi di codice puliti o un'architettura ingegnosa. Per me, la qualità di un software aumenta o diminuisce in base alla possibilità di essere scalato.

Molte cose entrano in gioco nell'aumentare la scalabilità di un software. In questo articolo troverai dei suggerimenti utili a questo riguardo.

Credo che tenendo a mente la manutenibilità e la scalabilità quando orchestri i tuoi componenti e organizzi la struttura del progetto, sia meno probabile che tu finisca per avere un codice sorgente incasinato che ha bisogno di un refactoring.

Come imparare React

Bene, adesso affrontiamo approfonditamente delle buone pratiche per imparare a usare React.

Imparare gli elementi fondamentali di React

Come abbiamo già discusso brevemente, conoscere gli elementi fondamentali non è importante soltanto per React, ma anche per qualsiasi altra tecnologia o linguaggio di programmazione. Non puoi costruire un grattacielo su delle fondazioni di sabbia e aspettarti che sia stabile.

Potrebbe sembrare ovvio per molti di voi, ma ho visto sviluppatori saltare direttamente a concetti di React intermedi o avanzati senza comprenderne davvero le basi.

Questo è vero anche per JavaScript in generale. Credo fortemente che imparare React non ha senso se non hai delle solide basi di JavaScript vanilla (JS senza framework o librerie aggiuntive).

Se ti sembra qualcosa di familiare e stai pensando di imparare a usare React ma non ti senti ancora a tuo agio con JavaScript, dedica prima del tempo a rafforzare le tue conoscenze di JavaScript. In futuro, ti risparmierà un sacco di mal di testa e di tempo.

Ecco una guida utile per i concetti di JavaScript più importanti che devi conoscere prima di passare a React.

Ma, secondo me, conoscere soltanto le basi non è sufficiente. È in qualche modo obbligatorio conoscere il funzionamento di React dietro le quinte. Se vuoi diventare un bravo sviluppatore React (e immagino sia così, visto che stai leggendo questo articolo), devi conoscere gli strumenti che stai utilizzando. È un bene per te in quanto sviluppatore e per i tuoi clienti.

Da un lato può salvarti da un sacco di tempo dedicato al debugging della tua app. Inoltre ti rende più efficiente perché non devi fare dei passi indietro e imparare di nuovo le basi, ancora e ancora. In pratica, sai quello di cui stai parlando.

Naturalmente, non puoi sapere tutto e non dovresti stressarti per questo. Imparerai sempre di più quando ti troverai ad affrontare problemi pratici e costruire altri progetti, ma con delle conoscenze solide parti ben equipaggiato.

Direi che ha senso, ma potresti chiederti cosa hai bisogno di sapere esattamente per avere delle basi solide di React.

Lo stretto indispensabile è costituito da tutti gli argomenti presenti nei Concetti Chiave della documentazione sul sito ufficiale di React.

Un altro argomento con cui dovresti avere familiarità è quello sugli Hooks perché sono diventati una convenzione e sono usati ovunque, specialmente in pacchetti React di terze parti.

Di certo potresti usare più di frequente useState e useEffect, ma è essenziale anche conoscerne altri come useMemo, useCallback o useRef.

C'è anche un altro capitolo chiamato Guide Avanzate che non considererei obbligatorio all'inizio, ma di cui raccomanderei vivamente di apprendere i concetti durante il tuo viaggio in React.

Come sempre, è spesso più semplice comprendere argomenti avanzati quando possiedi già un po' di esperienza pratica. Ma più cose apprendi da subito, meglio è.

Naturalmente non devi limitarti a seguire soltanto la documentazione di React. Anche seguire corsi online che trattano gli elementi essenziali, guardare tutorial o leggere blog fa parte della costruzione di solide basi. Prova quello che funziona meglio per te.

Se dovessi indicare quali sono i concetti più importanti da conoscere indispensabilmente, sceglierei questi:

• cos'è uno "stato"?
• up e down di classe e componenti funzionali
• cosa i ri-rendering dei componenti e come funzionano?
• come attivare i ri-rendering
• differenti cicli di vita dei componenti e come interagire con essi
• DOM virtuale
• Benefici di CSR (Client Side Rendering) e SSR (Server Side Rendering) in generale e in React
• Componenti controllati vs non controllati
• Spostamento di stato
• almeno una tecnologia di gestione dello stato globale (Context API, Redux/Toolkit, Recoil)
• Pattern di componenti (soprattutto come scegliere il giusto pattern)

Come realizzare dei componenti React puliti, prestanti e manutenibili

Lo so – questo è il sogno di ogni programmatore (o almeno spero sia così). E per me, questa abilità distingue un buon programmatore da un ottimo programmatore. La parte divertente è che non è mai tutto completo perché c'è sempre qualcosa di nuovo da imparare e migliorare.

Seguire le buone pratiche non renderà le cose più semplici solo a te, ma anche ai tuoi colleghi. Ho visto team di sviluppo che hanno creato una guida di stile in cui hanno definito dei capisaldi su come scrivere il codice. Un'idea che apprezzo molto.

Alcuni di essi sono:

• usare componenti funzionali (come le funzioni freccia)
• non usare stili inline
• mantenere una struttura di importazione appropriata (prima import di terze parti --> poi import interni)
• formattare il codice prima di un commit

E via dicendo.

Naturalmente è possibile essere molti dettagliati a questo riguardo. Questo dipende dal tuo team. Personalmente, non amo le guide estremamente dettagliate perché penso che uno sviluppatore esperto dovrebbe avere una certa libertà e non dovrebbe essere troppo vincolato.

In ogni caso, una guida di stile è un buon modo per definire e mantenere delle buone pratiche e assicurarsi che il team sia allineato per quanto riguarda le questioni importanti. Credo che questo favorisca incredibilmente il lavoro di squadra e i risultati.

Diamo un'occhiata alle buone pratiche che riguardano la creazione di componenti puliti, prestanti e manutenibili. Mettiti comodo, tieni a portata qualcosa per prendere appunti e buon divertimento!

📁 Creare una buona struttura di cartelle

Organizzare i tuoi file e cartelle all'interno di un'app React è obbligatorio per la manutenibilità e la scalabilità.

Una buona struttura di cartella dipende dalla dimensione dell'applicazione e del team, quindi non esiste una soluzione generale per questo. Soprattutto perché si tratta di un argomento molto discusso e dipende anche dalle preferenze personali.

Col tempo, però, si sono sviluppate alcune buone pratiche per le varie dimensioni di un'applicazione.

Questo ottimo post (risorsa in inglese) passa in rassegna cinque diverse dimensioni di un'app e introduce buone idee su come organizzare file e cartelle. Avere queste cose in mente quando pianifichi o avvii la tua applicazione può fare una differenza enorme sul lungo termine.

Non sovra-ingegnerizzarla, ma fai del tuo meglio per mantenere una strutturata appropriata che si adatti alla dimensione dell'applicazione e del team.

👇 Mantenere un ordine di import strutturato

Se hai già un po' di esperienza con React, potresti aver visto file rigonfi di istruzioni import. Potrebbero anche essere mescolati a import esterni da pacchetti di terze parti e import interni come altri componenti, funzioni di utilità, stili e molto altro.

Un esempio reale (tagliato):

import React, { useState, useEffect, useCallback } from "react";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import Title from "../components/Title";
import Navigation from "../components/Navigation";
import DialogActions from "@material-ui/core/DialogActions"
import { getServiceURL } from '../../utils/getServiceURL";
import Grid from "@material-ui/core/Grid";
import Paragraph from "../components/Paragprah";
import { sectionTitleEnum } from "../../constants";
import { useSelector, useDispatch } from "react-redux";
import Box from "@material-ui/core/Box";
import axios from 'axios';
import { DatePicker } from "@material-ui/pickers";
import { Formik } from "formik";
import CustomButton from "../components/CustomButton";
...

Probabilmente ti sei accorto del problema qui. È difficile distinguere quali sono gli import di terze parti e quelli locali (interni). Non sono raggruppati e sembrano essere ovunque.

Una versione migliore:

import React, { useState, useEffect, useCallback } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Formik } from "formik";
import axios from 'axios';
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import Box from "@material-ui/core/Box";
import DialogActions from "@material-ui/core/DialogActions";
import Grid from "@material-ui/core/Grid";
import { DatePicker } from "@material-ui/pickers";

import { getServiceURL } from '../../utils/getServiceURL";
import { sectionTitleEnum } from "../../constants";
import CustomButton from "../components/CustomButton";
import Title from "../components/Title";
import Navigation from "../components/Navigation";
import Paragraph from "../components/Paragraph";
...

La struttura è più chiara ed è molto semplice distinguere dove si trovano gli import esterni e interni. Certamente è possibile ottimizzare questa disposizione se stai usando più import (nel caso sia possibile :) ). Questo ti permette di importare tutti i componenti derivanti da material-ui tutti in una sola riga.

Ho visto altri sviluppatori a cui piace dividere la struttura degli import in tre parti:

Integrati (come 'react') --> Esterni (moduli di node di terze parti) --> Interni.

Puoi gestire tutto da solo oppure lasciar fare il lavoro a un linter.

📔 Imparare diversi schemi di componenti

Per fare in modo di non finire con del codice ingestibile e non scalabile, è essenziale imparare diversi pattern di componenti man mano che acquisisci esperienza con React.

Ma non è tutto. Conoscere i diversi pattern è un buon punto di partenza, ma l'aspetto più importante è sapere quando usare ognuno di essi per uno specifico problema.

Ogni pattern ha il suo scopo. Ad esempio, il compound component pattern evita il prop-drilling non necessario di molti livelli di componenti. Quindi, la prossima volta che inizi a passare delle prop attraverso 5 livelli di componenti per raggiungere alla fine il componente interessato dalla prop, comincerai a dirigere i componenti diversamente.

Una breve nota sul prop-drilling, visto che ho avuto molte discussioni in passato. Ci sono molte opinioni sul fatto che sia una cosa positiva o no. A me piace provare a pensare a un modo/pattern diverso se inizio a passare prop attraverso più di due livelli di componenti.

Ciò ti rende più efficiente come sviluppatore e fa sì che i componenti che scrivi siano più manutenibili e scalabili. Avere questi pattern nel tuo arsenale ti distingue dagli altri sviluppatori React. Ti consiglio vivamente di fare le tue ricerche, ma questo corso su Udemy mi ha aiutato molto.

🔒Usa un linter e segui le sue regole

Un linter non ti aiuta soltanto a mantenere un ordire di import delle dipendenze distinguibile, ti aiuta a scrivere un codice migliore in generale.

Quando utilizzi create-react-app, ESLint è già configurato, ma puoi anche impostarlo completamente da solo o estendere un set di regole preconfigurato.

In pratica, un linter osserva il codice JavaScript che stai scrivendo e ti fa notare gli errori di cui ti accorgeresti probabilmente eseguendo il codice. Ci ho messo un po' per apprezzare davvero l'utilità di un linter, ma oggi non posso immaginare di lavorare senza.

Avere un linter è una cosa, ma seguire le sue regole è un'altra. Naturalmente puoi disabilitarlo, sia per una specifica riga di codice che per un intero file. Potrebbero esserci casi in cui ha senso farlo, ma per esperienza sono piuttosto rari.

Un altro grande vantaggio è che puoi anche regolare il controllo dello stile. È particolarmente utile per il lavoro in gruppo. Una volta che si è d'accordo su certe convenzioni su come scrivere e formattare il codice, è facile combinare ESLint con qualcosa simile a JSPrettify.

🧪 Testare il codice

Lo so, i test non sono la tua attività da sviluppatore preferita. Per me era così. All'inizio sembra un compito non necessario e fastidioso, e sul breve termine può essere vero. Ma sul lungo periodo – e quando un'applicazione cresce – è vitale.

Per me, i test sono diventati una pratica che mi assicura che sto facendo il mio lavoro in modo più professionale, creando software di migliore qualità.

In pratica, non c'è nulla di sbagliato con i test manuali effettuati da una persona, che non dovrebbero essere evitati completamente. Ma immagina di star integrando una nuova funzionalità e di voler essere sicuro che tutto funzioni a dovere. È un'attività che richiede tempo e favorisce l'errore umano.

Mentre stai scrivendo i test ti trovi già nel processo mentale di organizzare il codice in modo che passi i test. Per me è molto utile perché mi aiuta a capire quali insidie possono sorgere e a tenere un occhio su di esse.

Non ti tuffi direttamente a scrivere il tuo codice (cosa che non raccomando mai), ma pensi prima all'obiettivo.

Ad esempio, "Cosa dovrebbe fare uno specifico componente? Quali sono i casi limite rilevanti che devo testare? Posso rendere il componente più semplice in modo che abbia un solo scopo? ..."

Avere una visione del codice che stai per scrivere ti aiuta anche a mantenere alta l'attenzione per soddisfarla.

I test possono anche fungere da documentazione, perché per un nuovo sviluppatore non avvezzo al codebase può essere molto d'aiuto a capire le diverse parti del software e come ci si aspetta che funzionino.

Quindi non evitare i test perché sembrano un lavoro extra. La verità è che puoi risparmiare del tempo in futuro se li imposti appropriatamente.

Dai un'occhiata al capitolo sui test della documentazione di React, segui qualche tutorial sui test in React e inizia a scrivere una piccola applicazione TDD (test-driven development) o implementa dei test in una app su cui stai lavorando al momento.

🧰 Integrare Typescript (o usare almeno le prop di default e prop type)

Ricordo il mio primo progetto in React come sviluppatore software in cui il nostro gruppo ricevette un progetto in pratica già scritto da un'altra azienda. Abbiamo dovuto creare il progetto del client su di esso e Typescript era già integrato.

Fino a quel momento, io e i miei colleghi non avevamo molta esperienza con Typescript, dato che avevamo tutti un background in JavaScript vanilla.

Dopo poche settimane passate a lavorare sul progetto, abbiamo sentito che TypeScript non era un beneficio, ma un ostacolo che bloccava il nostro lavoro. Non stavamo proprio sfruttando i suoi vantaggi, perché avevamo definito tutto con tipo any per bloccare gli avvertimenti di Typescript.

Questo ci portò a decidere di rimuovere Typescript dal progetto e lavorare sul nostro terreno con JavaScript. All'inizio andò bene, ma man mano che il progetto diventava più complesso, iniziarono a venir fuori errori di tipo. Ciò ci fece dubitare della nostra decisione di sbarazzarci completamente di Typescript. Ma queste cose possono accadere e danno una preziosa esperienza per il futuro.

Queste circostanze mi hanno portato a dare a Typescript un'altra opportunità, così l'ho imparato nel mio tempo libero. Dopo avervi costruito alcuni progetti secondari, non potevo immaginare più la vita senza Typescript.

Usare Typescript ha molti lati positivi, come il controllo statico dei tipi, un migliore completamento del codice nel tuo IDE (intellisense), un'esperienza di sviluppo migliorata e l'individuazione di errori di tipo mentre scrivi il codice – tanto per nominarne alcuni.

D'altra parte, ci sono anche delle sfide, perché se non vieni da un background con linguaggi fortemente tipizzati (come Java o C#) potrebbe essere più difficile da afferrare all'inizio.

Ma posso dire che vale davvero la pena di impararlo e integrarlo. Ecco un bell'articolo (risorsa in inglese) che può aiutarti ad avere una panoramica dei pro e dei contro dell'uso di Typescript in una applicazione React. E qui c'è un tutorial (risorsa in inglese) su come programmare le tue app React in Typescript.

Ci potrebbero essere ragioni per cui non vuoi usare Typescript nella tua app React, va bene. Ma consiglio almeno di usare i prop-type e le default-prop per i tuoi componenti per essere sicuro di non fare confusione con le prop.

💎 Usare lazy-loading / code splitting

Se hai passato un po' di tempo nell'universo JavaScript e React, sei probabilmente incappato nell'"impacchettamento" (bundling). Per quelli che stanno sentendo questo termine per la prima volta, vediamo cosa dice la documentazione ufficiale di React:

Molte applicazioni React hanno i loro file “impacchettati” usando strumenti come Webpack, Rollup oppure Browserify. Il processo di “impacchettamento” avviene prendendo tutti i file importati e unendoli tutti in un unico file, chiamato “bundle”. Questo file può essere poi incluso all’interno della pagina web per caricare l’intera applicazione tutta in una volta.

In pratica, si tratta di un'ottima tecnica, ma con la crescita di una app si presenta una sfida. Il bundle inizia a crescere a sua volta. Soprattutto quando stai usando delle grandi librerie di terze parti come three.js.

L'insidia è che questo bundle ha bisogno di essere sempre caricato completamente, anche quando l'utente ha bisogno solo di una frazione del codice. Questo porta a problemi di prestazione perché può volerci un tempo eccessivamente lungo per caricare l'app.

Per evitarlo, esiste una tecnica chiamata code splitting in cui dividi i bundle nelle porzioni di codice di cui ha bisogno l'utente. Questa tecnica è supportata dalla maggior parte degli strumenti comuni come Webpack, Rollup, e Browserify. Il grande beneficio è che puoi creare più bundle e caricarli dinamicamente.

Dividere i bundle ti aiuta a caricare tramite lazy loading solo le cose necessarie all'utente.

Immagina di andare in un negozio di alimentari e di voler comprare solo delle banane, delle mele e del pane. In questo caso, non stai comprando tutta la merce a disposizione nel negozio, sei interessato solo a una porzione della merce a disposizione. Quindi? Compreresti tutto? Ci vorrebbe molto più tempo e sarebbe parecchio più costoso.

Credo sia importante essere consapevoli delle potenziali sfide che possono sorgere man mano che una app cresce e ci sono alcune tecniche a disposizione per liberarsene. Per approfondire, dai un'occhiata alla documentazione di React.

🗄️ Estrarre logica riutilizzabile in hook personalizzati

Secondo la documentazione di React:

Gli hook ci consentono di riutilizzare la logica stateful senza dover cambiare la gerarchia dei componenti.

In pratica, si tratta di una soluzione migliore alle tecniche che erano usate precedentemente in combinazione con i componenti di classe. Se ti interessi di programmazione da un po', potresti ricordarti l'utilizzo di componenti di ordine superiore o render prop.

Ogni volta che ti trovi in una situazione in cui devi riutilizzare la stessa logica stateful già utilizzata in un altro componente funzionale, è un ottimo momento per creare un hook personalizzato. Al suo interno puoi incapsulare la logica e poi ti basterà chiamare l'hook come una funzione all'interno dei componenti.

Diamo un'occhiata a un esempio veloce in cui dobbiamo aggiornare la nostra interfaccia utente in base alla dimensione dello schermo e vogliamo tenere traccia della dimensione attuale della finestra ridimensionando manualmente la finestra del browser.

const ScreenDimensions = () => {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });
  
  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    window.addEventListener('resize', handleResize);
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return (
  	<>
    	<p>Current screen width: {windowSize.width}</p>
        <p>Current screen height: {windowSize.height}</p>
    </>
  )
}

Come puoi vedere, la soluzione è piuttosto diretta e non c'è nulla di sbagliato a definirlo così.

Adesso arriva la parte complessa. Immagina di voler usare la stessa logica in un altro componente, in cui renderizzare un'interfaccia utente diversa (una per smartphone e una per desktop) in base alla dimensione dello schermo.

Naturalmente, potremmo copiare la logica, incollarla, e il gioco è fatto. Ma questa non è una buona pratica, come potresti sapere dal principio DRY (Don't Repeat Yourself, ovvero "non ripeterti").

Se volessimo regolare la logica, dovremmo farlo in entrambi i componenti. E quando incolliamo la logica in ancora più componenti, diventa meno manutenibile e più favorevole agli errori.

Quindi, che faresti normalmente in un progetto JavaScript? Probabilmente definiresti una funzione che incapsula la logica e che può essere usata in molti posti diversi. È esattamente ciò che otteniamo con gli hook. Non sono nulla di più che funzioni JavaScript con alcune specialità di React perché stanno usando gli hook di React.

Vediamo come sarà il nostro hook personalizzato:

const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });
  
  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    window.addEventListener('resize', handleResize);
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return windowSize;
}

Adesso chiamiamolo semplicemente all'interno del componente ScreenDimensions:

const ScreenDimensions = () => {
  const windowSize = useWindowSize()
  
  return (
  	<>
    	<p>Current screen width: {windowSize.width}</p>
        <p>Current screen height: {windowSize.height}</p>
    </>
  )
}

Ciò ci consente di chiamare semplicemente l'hook personalizzato in qualsiasi altro componente e salvare il valore di ritorno (che è la dimensione attuale della finestra) in una variabile che possiamo usare all'interno del componente.

const ResponsiveView = () => {
  const windowSize = useWindowSize()
  
  return (
  	<>
    	{windowSize.width <= 960 ? (
          <SmartphoneView />
        ) : (
          <DesktopView />	
        )}
    </>
  )
}

🖥️ Gestire efficacemente gli errori

La gestione efficace degli errori è spesso trascurata e sottovalutata da molti sviluppatori. Come altre buone pratiche, sembra essere un aspetto secondario all'inizio. Vuoi far funzionare il codice e non vuoi "sprecare" tempo pensando agli errori.

Ma una volta che sei diventato più esperto e sei stato in situazioni spiacevoli in cui una gestione migliore degli errori ti avrebbe risparmiato molte energie (e del tempo prezioso, naturalmente), realizzi che sul lungo termine è obbligatorio avere una valida strategia di gestione degli errori nella tua applicazione. Soprattutto quando l'applicazione è distribuita in produzione.

Ma cosa significa esattamente gestione degli errori nel mondo di React? Ci sono diverse parti che hanno un ruolo. Una per individuare gli errori, un'altra per gestire l'interfaccia utente di conseguenza e l'ultima per registrarli appropriatamente.

React Error Boundary

Questo è un componente di classe personalizzato usato come wrapper per l'intera applicazione. Naturalmente, puoi avvolgere il componente ErrorBoundary anche attorno a componenti più in profondità nell'albero dei componenti per renderizzare UI più specifiche, ad esempio. Fondamentalmente, è una buona pratica usare ErrorBoundary per incapsulare un componente che favorisce l'insorgenza di errori.

Con il metodo di ciclo di vita componentDidCatch() sei in grado di individuare errori durante la fase di rendering o in qualsiasi altro ciclo di vita dei componenti figli. Quindi, quando un errore si verifica in questa fase, arriva in superficie e viene colto dal componente ErrorBoundary.

Se stai usando un servizio di registrazione (che consiglio vivamente), è un ottimo posto da collegare.

La funzione statica getDerivedStateFromError() viene chiamata durante la fase di rendering e viene usata per aggiornare lo stato del componente ErrorBoundary. A seconda dello stato, puoi renderizzare condizionalmente un errore nell'interfaccia.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    //registra l'errore con un ERS
    errorService.log({ error, errorInfo });
  }

  render() {
    if (this.state.hasError) {
      return <h1>Oops, something went wrong.</h1>;
    }
    return this.props.children; 
  }
}

Il grande svantaggio di questo approccio è che non gestisce gli errori in callback asincroni, nel rendering lato server e nei gestori di eventi perché sono al di fuori dei confini.

Usare try-catch per gestire gli errori oltre i confini

Questa tecnica è efficace per individuare errori che possono verificarsi all'interno di callback asincroni. Immagina di star recuperando i dati del profilo di un utente da una API a di volerli visualizzare all'interno di un componente Profile.

const UserProfile = ({ userId }) => {
	const [isLoading, setIsLoading] = useState(true)
	const [profileData, setProfileData] = useState({})
    
    useEffect(() => {
    	// Separate function to make of use of async
        const getUserDataAsync = async () => {
        	try {
            	// Recupera i dati dalla API
            	const userData = await axios.get(`/users/${userId}`)
                // Restituisci un errore se il dato dell'utente è falsy (sarà intercettato da catch)
                if (!userData) {
                	throw new Error("No user data found")
                }
                // Se il dato dell'utente è truthy aggiorna lo stato
                setProfileData(userData.profile)
            } catch(error) {
            	// Registra ogni errore nel servizio di logging
            	errorService.log({ error })
                // Aggiorna stato 
                setProfileData(null)
            } finally {
            	// Resetta il carimento dello stato in ogni caso
                setIsLoading(false)
            }
        }
        
        getUserDataAsync()
    }, [])
    
    if (isLoading) {
    	return <div>Loading ...</div>
    }
    
    if (!profileData) {
    	return <ErrorUI />
    }
    
    return (
    	<div>
        	...User Profile
        </div>
    )
}

Quando il componente viene montato, avvia una richiesta GET alla nostra API per ricevere i dati dell'utente per il corrispondente userId che otterremo dalle prop.

Usare try-catch ci aiuta a individuare qualsiasi errore che può capitare durante la chiamata dell'API. Ad esempio, potrebbe essere una risposta 404 o 500 dall'API.

Una volta che un errore viene individuato, siamo all'interno del blocco catch e riceviamo l'errore come parametro. Adesso siamo in grado di accedere al servizio di logging e aggiornare lo stato di conseguenza per mostrare un errore personalizzato nell'interfaccia utente.

Usare la libreria react-error-boundary library (raccomandazione personale)

In pratica, questa libreria fonde le due tecniche precedenti. Semplifica la gestione degli errori in React e rimedia alle limitazioni del componente ErrorBoundary che abbiamo visto.

import { ErrorBoundary } from 'react-error-boundary'

const ErrorComponent = ({ error, resetErrorBoundary }) => {
  
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
    </div>
  )
}

const App = () => {
  const logError = (error, errorInfo) => {
  	errorService.log({ error, errorInfo })
  }
  

  return (
    <ErrorBoundary 
       FallbackComponent={ErrorComponent}
       onError={logError}
    >
       <MyErrorProneComponent />
    </ErrorBoundary>
  );
}

La libreria esporta un componente costituito dalle funzionalità ErrorBoundary che abbiamo già conosciuto e vi aggiunge alcune sfumature. Consente di passare un FallbackComponent come prop che dovrebbe essere renderizzato una volta individuato l'errore.

Espone anche una prop onError che fornisce una funzione callback quando si verifica un errore. È ottima da usare per registrare l'errore in un servizio di logging.

Ci sono alcune altre prop che sono piuttosto utili. Se vuoi saperne di più, dai pure un'occhiata alla documentazione.

Questa libreria fornisce un hook chiamato useErrorHandler() il cui scopo è individuare ogni errore oltre i confini come i gestori di eventi, nel codice asincrono e nel rendering lato server.

Registrare gli errori

Individuare e gestire efficacemente gli errori è una parte, registrarli in modo appropriato è un'altra. Una volta che hai impostato la gestione degli errori nella tua applicazione, devi registrarli in modo persistente.

Il modo usato più di frequente è il caro vecchio console.log. Potrebbe andare bene durante lo sviluppo, quando vuoi un log rapido. Ma una volta che l'applicazione viene distribuita in produzione, diventa inutile. Questo perché l'errore è visibile soltanto all'interno del browser dell'utente, il che è assolutamente inefficace.

Per registrare gli errori in produzione, in quanto sviluppatore, vuoi vedere gli errori in un posto dedicato per poterli sistemare.

Per questa ragione abbiamo bisogno di un servizio di logging, creato da noi o da terze parti.

Quando usiamo servizi di logging di terze parti, il mio suggerimento personale è senza dubbio Sentry. Quindi ti consiglio vivamente di dargli un'occhiata.

☝️ Mantenere una chiave unica in tutta la tua app

Mappando un array per renderizzare i suoi dati, devi sempre definire una proprietà chiave per ogni elemento. Una pratica comune che ho visto e usato in prima persona è utilizzare semplicemente l'indice di ogni elemento come chiave.

Usare la prop chiave è importante perché aiuta React a identificare l'esatto elemento che viene cambiato, aggiunto o rimosso. Immagina che lo stato del tuo componente cambi e che l'interfaccia utente debba essere ri-renderizzata con il nuovo stato. React ha bisogno di capire la differenza tra l'interfaccia precedente e quella nuova per poterla aggiornare.

"Quali elementi sono stati aggiunti/rimossi o sono cambiati?"

Per questo la chiave deve essere unica. Usare l'indice dell'elemento corrente assicura che sia unica solo in questa particolare funzione di mappatura.

Potrebbe avere questo aspetto, se avessimo deciso di mostrare i punteggi di una squadra di football di questa stagione:

const SeasonScores = ({ seasonScoresData }) => {
	
    return (
    	<>
        	<h3>Our scores in this season:<h3>
        	{seasonScoresData.map((score, index) => (
    			<div key={index}>
        			<p>{score.oponennt}</p>
        			<p>{score.value}</p>
        		</div>
    		))}
        </>
    )
}

Mentre è unica solamente all'interno di questa funzione di mappatura, ciò può portare a potenziali problemi. È molto comune avere più di una funzione di mappatura all'interno di un'applicazione React o anche in un componente.

Assumiamo di avere un'altra funzione di mappatura nel nostro componente per visualizzare l'elenco attuale:

const SeasonScores = ({ seasonScoresData, currentRoster }) => {
	
    return (
    	<>
        	<h3>Our scores in this season:<h3>
        	{seasonScoresData.map((score, index) => (
    			<div key={index}>
        			<p>{score.oponennt}</p>
        			<p>{score.value}</p>
        		</div>
    		))}
            </br>
			<h3>Our current roster:<h3>
        	{currentRoster.map((player, index) => (
            	<div key={index}>
                	<p>{player.name}</p>
                    <p>{player.position}</p>
                    <p>{player.jerseyNumber}</p>
                    <p>{player.totalGoals}</p>
                </div>
    		))}
        </>
    )
}

Ci ritroviamo nella situazione in cui usiamo molte chiavi due volte all'interno del nostro componente. Consideriamo di avere 14 elementi all'interno di seasonScoresData e 30 in currentRoaster. Abbiamo usato i numeri da 0 a 13 due volte come chiave. Ora non ci stiamo più attenendo allo scopo di avere chiavi uniche.

Ciò può portare a potenziali problemi perché React potrebbe ri-renderizzare soltanto un elemento e omettere l'altro. Oppure può portare a inefficienza nell'aggiornamento dell'albero dell'interfaccia. Dai un'occhiata ai post consigliati alla fine di questa sezione per avere degli esempi più dettagliati.

Per evitare questo comportamento indesiderato, assicurati di usare sempre chiavi uniche in tutta l'applicazione. Idealmente ogni elemento nell'array dovrebbe avere il proprio id univoco da utilizzare. Ma questo non è sempre il caso, quindi puoi usare una libreria esterna come uuidv4 per generare id univoci.

Con questo in mente e con l'assunzione che ogni elemento in entrambi gli array ha una proprietà id, il componente dovrebbe avere questo aspetto:

const SeasonScores = ({ seasonScoresData, currentRoster }) => {
	
    return (
    	<>
        	<h3>Our scores in this season:<h3>
        	{seasonScoresData.map((score, index) => (
    			<div key={score.id}>
        			<p>{score.oponennt}</p>
        			<p>{score.value}</p>
        		</div>
    		))}
            </br>
			<h3>Our current roster:<h3>
        	{currentRoster.map((player, index) => (
            	<div key={player.id}>
                	<p>{player.name}</p>
                    <p>{player.position}</p>
                    <p>{player.jerseyNumber}</p>
                    <p>{player.totalGoals}</p>
                </div>
    		))}
        </>
    )
}

Se vuoi andare più a fondo, puoi leggere questo post (risorsa in inglese) sull'argomento.

Suggerimenti per scrivere del codice React migliore – La ciliegina sulla torta

Vorrei paragonare questa guida al processo di costruzione di una casa. La prima parte, Imparare gli elementi fondamentali di React, corrisponde alle solide fondamenta su cui costruisci la tua applicazione. La seconda, Come realizzare dei componenti React puliti, prestanti e manutenibili, è per costruire i muri.

Questa sezioni è sostanzialmente il tetto che va a completare la casa. Ecco perché l'ho chiamata La ciliegina sulla torta. Contiene suggerimenti più dettagliati.

La maggior parte di queste pratiche sono più opzionali delle precedenti, ma possono fare la differenza se le utilizzi nel modo appropriato.

🪄 Implementare prima l'hook useReducer

Probabilmente uno degli hook usati più di frequente in React è useState. Nel tempo, ho creato e visto componenti con un sacco di stati differenti. Quindi è naturale che siano inondati da hook useState.

const CustomersMap = () => {
  const [isDataLoading, setIsDataLoading] = useState(false)
  const [customersData, setCustomersData] = useState([])
  const [hasError, setHasError] = useState(false)
  const [isHovered, setIsHovered] = useState(false)
  const [hasMapLoaded, setHasMapLoaded] = useState(false)
  const [mapData, setMapData] = useState({})
  const [formData, setFormData] = useState({})
  const [isBtnDisabled, setIsBtnDisabled] = useState(false)
  
  ...
  
  return ( ... )
}

Avere molti hook useState diversi è sempre un segno importante che la dimensione e quindi la complessità di un componente sta crescendo.

Se puoi creare dei sotto-componenti più piccoli in cui trasferire alcuni stati e del JSX, si tratta di un'ottima idea, così da ripulire gli hook useState e il JSX in un colpo.

Nell'esempio qui sopra, potremmo mettere gli ultimi due stati in un componente separato che gestisce tutti gli stati e il JSX che riguardano un modulo.

Ma ci sono situazioni in cui ciò non ha senso e devi mantenere tutti questi stati differenti in un solo componente. Per migliorare la leggibilità del componente, esiste l'hook useReducer.

La documentazione ufficiale di React riporta:

useReducer è solitamente da preferire a useState quando si ha una logica di stato complessa che coinvolge sotto-valori multipli o quando lo stato successivo dipende dal precedente. useReducer consente anche di ottimizzare le prestazioni per i componenti che attivano aggiornamenti profondi perché è possibile passare dei messaggi invece di callback.

Avendo questo in mente, il componente potrebbe avere questo aspetto usando useReducer:

// STATO INIZIALE
const initialState = {
  isDataLoading: false,
  customerData: [],
  hasError: false,
  isHovered: false,
  hasMapLoaded: false,
  mapData: {},
  formdata: {},
  isBtnDisabled: false
}

// REDUCER
const reducer = (state, action) => {
  switch (action.type) {
    case 'POPULATE_CUSTOMER_DATA':
      return {
        ...state,
        customerData: action.payload
      }
    case 'LOAD_MAP':
      return {
        ...state,
        hasMapLoaded: true
      }
    ...
    ...
    ...
    default: {
      return state
    }	
  }
}

// COMPONENTE
const CustomersMap = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  
  ...
  
  return ( ... )
}

Il componente stesso ha un aspetto più pulito e possiede anche alcuni vantaggi come puoi vedere nella documentazione. Se sei abituato a Redux, il concetto di reducer e di come viene costruito non ti è nuovo.

La mia regola personale è di implementare l'hook useReducer se un componente supera i quattro hook useState oppure se lo stato stesso è più complesso di un semplice booleano, ad esempio. Potrebbe trattarsi di un oggetto per un modulo con dei livelli più profondi all'interno.

🔌 Usare scorciatoie per prop booleane

Ci sono spesso situazioni in cui si passa una prop booleana a un componente. Ho visto molti sviluppatori fare così:

<RegistrationForm hasPadding={true} withError={true} />

Ma non è necessario farlo necessariamente così perché la ricorrenza di una prop stessa è truthy (se la prop viene passata) o falsy (se è mancante).

Ecco un approccio più chiaro:

<RegistrationForm hasPadding withError />

👎 Evitare le parentesi graffe per le prop stringhe

Un caso di utilizzo simile a quello visto nel suggerimento precedente è l'utilizzo di prop stringhe:

<Paragraph variant={"h5"} heading={"A new book"} />

Non occorre usare le parentesi graffe in questo caso perché puoi usare direttamente delle stringhe all'interno delle prop. Quando vuoi attribuire un className a un elemento JSX è più probabile che tu lo faccia direttamente come una stringa.

Quando vuoi usare un'espressione JavaScript diversa da una stringa, ti servono le parentesi graffe. Ad esempio, se vuoi usare un numero o un oggetto. Questo è vero anche per le stringhe template (non restarci invischiato come ho fatto molte volte, haha).

Con delle normali stringhe, come nell'esempio, diventerebbe così:

<Paragraph variant="h5" heading="A new book" />

🧹 Cancellare attributi non-html distribuendo le prop

Vediamo un esempio rapido:

const MainTitle = ({ isBold, children, ...restProps }) => {
	
  return (
    <h1 
      style={{ fontWeight: isBold ? 600 : 400 }}
      {...restProps}
    >
      {children}
    </h1>
  )
}

Abbiamo appena creato un componente che renderizza un tag h1, estratto delle prop e distribuito tutte le altre potenziali prop nel tag h1. Per ora tutto ok.

Adesso siamo in grado di usarlo in altri componenti e possiamo attivare manualmente se l'h1 dovrebbe essere in grassetto o no:

// CON TITOLO IN GRASSETTO
const IndexPage = () => {
	
  return (
    <>
      <MainTitle isBold>
        Welcome to our new site!
      </MainTitle>
      ...
    </>
  )
}

// SENZA TITOLO IN GRASSETTO
const AboutPage = () => {
	
  return (
    <>
      <MainTitle>
      	Some quick lines about us!
      </MainTitle>
      ...
    </>
  )
}

Finora, tutto funziona perfettamente senza errori o avvisi. La parte interessante inizia adesso, quando usiamo altre prop che sono direttamente distribuite al tag h1.

Quando usiamo degli attributi HTML validi come id o class, tutto funziona senza errori (ricorda --> "className" diventa "class"):

const IndexPage = () => {
	
  return (
    <>
      <MainTitle isBold id="index-main-title" className="align-left">
        Welcome to our new site!
      </MainTitle>
      ...
    </>
  )
}

Quindi tutte le prop qui sopra saranno aggiunte come attributo per l'h1 perché stiamo usando {...restProps}. Le prop che aggiungiamo e NON estraiamo saranno aggiunte al tag h1.

Questo è ottimo per molti casi ma può essere un problema allo stesso tempo:

// Page Component
const IndexPage = () => {
	
  return (
    <>
      <MainTitle isBold hasPadding>
        Welcome to our new site!
      </MainTitle>
      ...
    </>
  )
}

// MainTitle Component
const MainTitle = ({ isBold, children, ...restProps }) => {
	
  return (
    <h1 
      style={{ 
        fontWeight: isBold ? 600 : 400,
        padding: restProps.hasPadding ? 16 : 0
      }}
      {...restProps}
    >
      {children}
    </h1>
  )
}

Nel codice qui sopra abbiamo aggiunto una nuova prop chiamata hasPadding al componente MainTitle, che è opzionale. All'interno del componente non la estraiamo dalle prop e la chiamiamo tramite restProps.hasPadding.

Il codice funziona, ma aprendo il tuo browser riceverai un avviso che hasPadding non è un attributo HTML che stai tentando di applicare al tag h1. Questo per via di {...restProps} sul tag h1 e perché non stiamo estraendo hasPadding come isBold, ad esempio.

Per evitare tutto ciò, estrai sempre tutti gli attributi non-HTML dalle prop, così da assicurarti che ci siano solo attributi HTML validi in restProps che stai distribuendo a un elemento JSX.

Nel nostro esempio sarebbe così:

// Page Component
const IndexPage = () => {
	
  return (
    <>
      <MainTitle isBold hasPadding>
        Welcome to our new site!
      </MainTitle>
      ...
    </>
  )
}

// MainTitle Component
const MainTitle = ({ isBold, children, hasPadding, ...restProps }) => {
	
  return (
    <h1 
      style={{ 
        fontWeight: isBold ? 600 : 400,
        padding: hasPadding ? 16 : 0
      }}
      {...restProps}
    >
      {children}
    </h1>
  )
}

Molti di questi avvisi possono intasare la console nel browser senza che siano necessari, il che può essere sgradevole. Specialmente se stai facendo debugging.

Per ottenere più informazioni su questo argomento e altri modi per risolvere il problema, consulta questa sezione della documentazione.

🔥 Usare le estensioni snippet

In Visual Studio Code, ad esempio, sono disponibili alcune estensioni che migliorano la tua produttività. Tra queste ci sono le estensioni snippet.

Il loro grande vantaggio è che non devi scrivere tutto il codice boilerplate di nuovo. Immagina di star creando molti nuovi componenti a di dover digitare tutto ancora e ancora:

import React from 'react'

const GoogleMap = () => {

}

export default GoogleMap

Con questi snippet devi soltanto digitare rafce, ad esempio, premere tab ed ecco che hai lo stesso codice boilerplate. È davvero un salva tempo e accelera lo sviluppo.

Ma usali con attenzione! Non consiglio di usare snippet a tutti gli sviluppatori. Secondo me, i principianti non dovrebbero usare alcuno snippet e dovrebbero scrivere il boilerplate a mano. Quando lo fai, ottieni una memoria muscolare che esprime tutto ciò che hai imparato.

Se lo hai fatto così spesso da poterlo scrivere nel sonno e diventa noioso, allora è il momento giusto di usare gli snippet.

Ecco i miei consigli:

❌ Scrivere un frammento quando non è necessario un div

Un componente React può renderizzare un solo tag HTML alla volta nella sua radice. Quindi volendo renderizzare due elementi adiacenti, otterrai il famoso errore Adjacent JSX elements must be wrapped in an enclosing tag (gli elementi JSX adiacenti devono essere racchiusi in un tag).

const InfoText = () => {
	
  // Darà un errore
  return (
    <h1>Welcome!</h1>
    <p>This our new page, we're glad you're are here!</p>
  )
}

Quindi, cosa puoi fare? Racchiudi semplicemente l'output in un frammento, che soddisfa React e non aggiunge nessun elemento extra nel browser.

const InfoText = () => {
	
  return (
  	<>
      <h1>Welcome!</h1>
      <p>This our new page, we're glad you're are here!</p>
    </>
  )
}

Naturalmente è possibile risolvere tutto ciò anche con un tag div. Ma usare un div dopo l'altro crea una cosa chiamata inferno dei div nel browser, in cui ci sono un sacco di tag div annidati senza senso.

Quindi ogni volta che devi usare un tag per racchiudere qualcosa in React ma non ti serve necessariamente un tag HTML, allora usa semplicemente un frammento.

👈 Integrare i tag a chiusura automatica quando i figli non sono necessari

Dalla mia esperienza posso dire che questo suggerimento è spesso trascurato, ma rende del codice molto più pulito con uno sforzo minimo.

In React, hai la possibilità di passare elementi figli a un componente, che poi sono disponibili al componente tramite la sua proprietà figlia. Questi componenti sono spesso chiamati componenti compositi.

In questo caso, devi utilizzare un tag di apertura e un tag di chiusura, naturalmente:

<NavigationBar>
  <p>Home</p>
  <p>About</p>
  <p>Projects</p>
  <p>Contact</p>
</NavigationBar>

Ma quando non sono necessari dei figli, non ha senso usare un tag di apertura e un tag di chiusura, vero?

<NavigationBar></NavigationBar>

Invece di fare così, consiglio di usare il componente come un elemento a chiusura automatica come il tag HTML input, che allo stesso modo non accetta figli.

<NavigationBar />

Ha un aspetto molto più pulito, vero?

✅ Seguire le convenzioni di nomenclatura più comuni

Il senso alla base delle convenzioni di nomenclatura è che è più semplice riconoscere il tipo di elemento con cui hai a che fare, oltre ad avere qualcosa nel tuo codice in comune con la comunità.

Da questo punto di vista, ci sono due principali convenzioni di nomenclatura che coinvolgono React e JavaScript che dovresti seguire:

Usare PascalCase in componenti, interfacce o alias di tipo

// Componente React
const LeftGridPanel = () => {
  ...
}

// Interfaccia Typescript
interface AdminUser {
  name: string;
  id: number;
  email: string;
}

// Alias di tipo Typescript
type TodoList = {
	todos: string[];
    id: number;
    name: string;
}

Usare camelCase per tipi di dati JavaScript come variabili, array, oggetti, funzioni e così via

const getLastDigit = () => { ... }

const userTypes = [ ... ]

Dare nomi ai componenti React in PascalCase è molto importante, perché se hai un linter configurato per React, ma i nomi dei tuoi componenti sono in camelCase e stai usando degli hook al loro interno, otterrai un messaggio di avvertimento tutte le volte che gli hook sono consentiti solo nei componenti. Questo perché il linter riconosce un componente React se è scritto in PascalCase oppure no.

Può essere spiacevole, ma si sistema rapidamente adottando le convenzioni stabilite.

🧨 Ripulire il codice per prevenire attacchi XSS

Magari ti sei trovato in una situazione in cui occorre usare la proprietà dangerouslySetInnerHTML su un elemento in React. Sostanzialmente è l'equivalente di React di innerHTML che potresti conoscere da JavaScript.

Quindi usandola puoi impostare direttamente l'HTML da React.

Consideriamo il seguente esempio, in cui vogliamo renderizzare una stringa HTML all'interno di un div. La stringa può venir fuori da un bell'editor di testo in cui c'è già dell'HTML formattato.

const Markup = () => {
  const htmlString = "<p>This is set via dangerouslySetInnerHTML</p>"
  
  return (
    <div dangerouslySetInnerHTML={{ __html: htmlString }} />
  )
}

Il termine dangerously è scelto intenzionalmente. Usare questa proprietà può permettere attacchi di cross-site-scripting (XSS). Quindi è obbligatorio che il codice venga prima ripulito.

Un'ottima libreria che può aiutarti in questo è dompurify.

Conclusione

Wow, è stato divertente, vero? Ho cercato di fare del mio meglio per far uscire tutto quello che avevo accatastato nella mia testa in passato. Quello che mi ha spinto a scrivere questa guida è condividere la mia esperienza con te in modo da farti evitare dei momenti difficili durante lo studio e lo sviluppo con React.

Naturalmente potrebbero esserci delle buone pratiche che consideri più importanti e che potrei aver tralasciato. Ottimo. Mi piacerebbe sentire da te quali sono per poterle aggiungere a questa guida.

Ricorda, si tratta sempre di adattarsi a ciò che utile. Quindi non dare tutto per scontato e pensa a cosa potrebbe esserti utile nella situazione in cui ti trovi. Poi puoi aggiungerlo al tuo elenco di buone pratiche.

Puoi seguire il mio percorso di sviluppo e ottenere molti altri utili consigli sulla vita da sviluppatore sul mio profilo Instagram. Sono sempre disponibili ad aiutare e sono felice di ricevere feedback. Sentiti libero di contattarmi.

Un colloquio tecnico con argomento front-end è una opportunità per un potenziale datore di lavoro per accertare le tue capacità e conoscenze riguardo allo sviluppo web.

L'intervistatore ti farà domande in merito alla tua esperienza e abilità in HTML, CSS e JavaScript. Probabilmente ti verranno poste anche alcune domande specifiche sui framework come React, Angular, Vue o qualsiasi altro framework venga usato.

Potrebbe anche porti un problema di programmazione da risolvere per verificare la tue capacità in un particolare campo.

Oggi esamineremo i problemi più comuni discussi nei colloqui tecnici per sviluppo front-end, concentrandoci su React e Javascript.

Cosa Cercano gli Intervistatori

Quando vai a un colloquio per un posto come sviluppatore web front-end, preparati a discutere delle tue capacità ed esperienza con diversi linguaggi di programmazione, strumenti e framework.

Gli intervistatori vorranno anche vedere se hai una solida comprensione delle ultime tendenze e tecnologie di sviluppo web.

Preparati a parlare dei tuoi progetti precedenti e di come hai affrontato la risoluzione di vari problemi.

Assicurati di mostrare le tue capacità di risoluzione dei problemi discutendo come hai affrontato le diverse sfide durante il tuo processo di sviluppo.

Infine, non dimenticare di evidenziare i tuoi punti di forza.

Le Domande Più Comuni Poste in un Colloquio Tecnico per Front-End

I problemi proposti nei colloqui tecnici relativi al front-end sono piuttosto semplici e comuni. Se hai scritto codice per almeno 6 mesi, ti sarà familiare la maggior parte dei concetti che ti verrà chiesto di esporre.

Se ti eserciti con le giuste domande tenendo anche conto di un limite di tempo, dovresti essere in grado di superare il colloquio.

Esaminiamo le domande che vengono poste più di frequente.

Map, ForEach, Filter e Reduce

Le domande più comunemente poste (in genere all'inizio del colloquio) vertono sui metodi degli array. L'intervistatore vuole accertarsi che tu sia a tuo agio con le manipolazione degli array.

Il metodo .map()

Il metodo .map() esegue iterazioni su un array, calcola qualsivoglia logica tu scriva nel corpo della funzione map e restituisce un NUOVO array.

let arr = [
  { id: 1, age: 12, name: 'Manu' },
  { id: 2, age: 24, name: 'Quincy' },
  { id: 3, age: 22, name: 'Abbey' },
]

let names = arr.map((el) => el.name)
console.log(names)
// Risultato: [ 'Manu', 'Quincy', 'Abbey' ]

Il metodo .forEach()

.forEach è simile a .map() ma NON restituisce un array.

let arr = [
  { id: 1, age: 12, name: 'Manu' },
  { id: 2, age: 24, name: 'Quincy' },
  { id: 3, age: 22, name: 'Abbey' },
]

arr.forEach((el) => el.age+= 10);
console.log(arr);

// Risultato: 
// [
//   { id: 1, age: 22, name: 'Manu' },
//   { id: 2, age: 34, name: 'Quincy' },
//   { id: 3, age: 32, name: 'Abbey' }
// ]

Il metodo .filter()

Questo metodo, come suggerisce il suo nome in inglese, aiuta a filtrare i valori all'interno di un array in base a una condizione booleana.

Se la condizione booleana è true, l'elemento viene ritornato e aggiunto all'array finale. Se la condizione è false l'elemento viene ignorato. Come il metodo .map(), anche .filter() restituisce un nuovo array.

let arr = [
  { id: 1, age: 12, name: 'Manu' },
  { id: 2, age: 24, name: 'Quincy' },
  { id: 3, age: 22, name: 'Abbey' },
]

let tooYoung = arr.filter((el) => el.age <= 14);
console.log(tooYoung);

// Risultato: [ { id: 1, age: 12, name: 'Manu' } ]

Il metodo .reduce()

In termini semplici, .reduce() gestisce un valore precedente, un valore corrente e un accumulatore.

Il tipo restituito da .reduce() è sempre un valore singolo. Utile quando si vogliono elaborare tutti i valori in un array per ricavare un risultato cumulato.

// Calcola l'età totale delle tre persone.
let arr = [
  { id: 1, eta: 12, name: 'Manu' },
  { id: 2, eta: 24, name: 'Quincy' },
  { id: 3, eta: 22, name: 'Abbey' },
]

let sommaEta = arr.reduce((accumulatore, oggettoCorrente) => accumulatore + oggettoCorrente.eta, 0)
console.log(sommaEta)

// Risultato: 58

Qui oggettoCorrente è l'oggetto che viene di volta in volta elaborato, accumulatore conserva il risultato che si accumula a ogni iterazione, che viene restituito alla fine nella variabile sommaEta . L'ultimo parametro (facoltativo, predefinito 0) della funzione rappresenta il valore di partenza per accumulatore.

Come Implementare i Polyfill

Un'altra importante domanda è come è come implementare i polyfill sui metodi di array map() e filter().

Un polyfill è un frammento di codice (nei termini di architettura web JavaScript) usato per dotare di funzionalità recenti vecchie versioni di browser che non le implementano nativamente.

In poche parole, un polyfill è una implementazione personalizzata di funzioni Javascript native. Un po' come creare una tua versione dei metodi .map() o .filter().

Come usare il polyfill .map()

let data = [1, 2, 3, 4, 5];

Array.prototype.myMap = function (cb) {
  let arr = [];
  for (let i = 0; i < this.length; i++) {
    arr.push(cb(this[i], i, this));
  }
  return arr;
};
const mapLog = data.myMap((el) => el * 2);
console.log(mapLog);

Il metodo myMap riceve come argomento un callback che viene eseguito all'interno del corpo di myMap. Praticamente abbiamo un ciclo for all'interno del corpo di myMap che itera su this.length, che non è altro che la lunghezza dell'array dal quale viene chiamata la funzione myMap.

Visto che la sintassi di map() è arr.map(elementoCorrente, indice, array), la funzione myMap() tiene conto esattamente di questo.

Inoltre visto che map() ritorna un nuovo array, creiamo un array vuoto e vi inseriamo i risultati. Alla fine lo restituiamo.

Come usare il polyfill .filter()

let data = [1, 2, 3, 4, 5];

Array.prototype.myFilter = function (cb) {
  let arr = [];
  for (let i = 0; i < this.length; i++) {
    if (cb(this[i], i, this)) {
      arr.push(this[i]);
    }
  }
  return arr;
};
const filterLog = data.myFilter((el) => el < 4);
console.log(filterLog);

.filter() è molto simile a .map() per quanto riguarda l'implementazione. Visto che filter filtra il risultato in base a una condizione booleana, abbiamo un costrutto if() supplementare per filtrare i risultati e inserirli nell'array da restituire se la condizione è soddisfatta.

Cos'è il Debouncing?

Questa è una domanda famosa con molti utilizzi e implementazioni pratiche nel mondo reale.

Debouncing è un metodo per far sì che una funzione non sia chiamata troppo spesso, attendendo un certo periodo di tempo rispetto all'ultima chiamata prima di invocarla nuovamente.

Pensa al sito di Amazon in questo caso. Ogni volta che digiti qualcosa nella casella di ricerca, quando ti fermi per ALMENO mezzo secondo, allora vengono restituiti i risultati. Questo è esattamente quello che si intende per debouncing.

Per implementare il debouncing, facciamo un esempio: generiamo uno username in base a quanto digitato dall'utente.

import "./styles.css";
let inputEle = document.getElementById("inputElement");
let username = document.getElementById("username");

let generateUsername = (e) => {
  username.innerHTML = e.target.value.split(" ").join("-");
};
let debounce = function (cb, delay) {
  let timer;
  return function () {
    let context = this;
    clearTimeout(timer);
    timer = setTimeout(() => {
      cb.apply(context, arguments);
    }, delay);
  };
};

inputEle.addEventListener("keyup", debounce(generateUsername, 300));

Qui stiamo cercando di creare uno username personalizzato in base all'input dell'utente. Se l'utente inizia a digitare, non vogliamo creare lo username immediatamente, ma attendiamo 300 millisecondi prima di farlo. Stiamo cercando di imitare una chiamata API qui, pertanto assumi che l'utente digiti qualcosa e che debba fare una chiamata API al backend per ottenere la risposta.

La funzione debounce() riceve due parametri cb e delay. cb è la funzione callback che viene eseguita quando scade il tempo.

Usiamo setTimeout() per creare un timer, il che vuol dire che la funzione all'interno del corpo di setTimeout() verrà eseguita dopo un determinato tempo.

Il metodo apply viene utilizzato per chiamare la funzione di callback con l'oggetto con il quale è stata inizialmente chiamata, applicando all'oggetto gli argomenti e il contesto.

Cosa sono le Closure?

Secondo la  documentazione mdn per le closure, qui tradotta:

Una closure è la combinazione di una funzione legata insieme (chiusa) ai riferimenti al suo stato circostante (l'ambiente lessicale). In altre parole una closure ti fornisce accesso all'ambito di una funzione più esterna da una funzione interna. In JavaScript le closure sono create ogni volta che viene creata una funzione, nella fase di creazione della funzione.

Per semplificare facciamo un esempio per capire il funzionamento di una closure.

function start() {
  var name = "Manu"; // name è una variabile locale creata da start()
  function displayName() {
    // displayName() è la funzione più interna, una `closure`
    alert(name); // usa la variabile dichiarata nella funzione genitore
  }
  displayName();
}
start(); // "Manu" viene visualizzato nell'alert box

Qui una closure viene formata tra le funzioni start() e displayName(). La funzione displayName() ha accesso alla stessa variabile name presente nella funzione start().

In termini semplici, la funzione interna conoscerà l'ambiente circostante (l'ambiente lessicale).

Ho scritto un intero blog su come superare i colloqui su JavaScript (risorsa in inglese). Puoi dargli un'occhiata se vuoi approfondire l'argomento.

Hook di React

Per quanto riguarda l'argomento hook di React le domande più popolari poste in un colloquio per uno sviluppatore front-end riguardano:

1. useState()
2. useReducer()
3. useEffect()
4. useRef()
5. hook personalizzati e loro implementazione.

Come funziona l'hook useState()

Per gestire uno stato all'interno del tuo componente, useState() è l'hook che ti serve.

Vediamo un esempio per capire:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [title, setTitle] = useState("freeCodeCamp");
  const handleChange = () => {
    setTitle("FCC");
  };
  return (
    <div className="App">
      <h1>{title} useState</h1>
      <button onClick={handleChange}>Change Title</button>
    </div>
  );
}

useState() restituisce due valori: una variabile che contiene il valore dello stato (title nell'esempio), e una funzione per cambiare il valore dello stato (setTitle nell'esempio).

Nel codice qui sopra abbiamo creato uno stato chiamato title  per conservare il titolo della pagina. Il valore iniziale passato è "freeCodeCamp".

Quando si fa click sul bottone "Change Title", possiamo usare la funzione setTitle() per modificare la variabile dello stato title in "FCC".

useState() è la tua risorsa di riferimento per la gestione dello stato in un componente funzionale.

Come funziona l'hook useReducer()

In parole povere, useReducer() è un modo interessante per gestire lo stato nella tua applicazione. È più strutturato e aiuta a mantenere stati complessi nella tua applicazione.

Ecco un esempio per comprendere l'hook useReducer:

import "./styles.css";
import { useReducer } from "react";

const initialState = { title: "freeCodeCamp", count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "change-title":
      return { ...state, title: "FCC" };
    case "increment-counter":
      return { ...state, count: state.count + 1 };
    default:
      throw new Error();
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      <div className="App">
        <h1>{state.title} CodeSandbox</h1>
        <button onClick={() => dispatch({ type: "change-title" })}>
          Change Title
        </button>
        <button onClick={() => dispatch({ type: "increment-counter" })}>
          Increment Counter
        </button>
      </div>
      <p style={{ textAlign: "center" }}>{state.count}</p>.
    </>
  );
}

L'hook useReducer() riceve due parametri, la funzione (parametro reducer) che verrà utilizzata per la gestione dello stato e un valore di stato iniziale (parametro initialState).

La funzione reducer è una implementazione basata so uno switch-case che ritorna lo stato finale del valore che useReducer() usa internamente per fornirlo al componente.

I valori ritornati da useReducer() sono state e dispatch. state è l'effettivo valore dello stato che può essere usato all'interno del componente. Nel nostro caso, lo stato ha due valori: title e count. Questi valori possono essere manipolati usando il metodo dispatch() che viene ritornato da useReducer().

Nel caso qui sopra, per modificare il titolo abbiamo gestito un caso chiamato change-title nell'istruzione di switch. Questo caso è stato attivato tramite dispatch({ type: "change-title" }), che modificherà lo stato, in particolare il valore di title .

Alla stessa stregua la procedura viene seguita per aumentare il contatore count visualizzato nell'applicazione gestendo il caso increment-counter.

Come detto in precedenza, si tratta di un modo interessante per implementare la gestione dello stato nella tua applicazione. 😉

Come funziona l'hook useEffect()

Mettila così: se vuoi ottenere un effetto collaterale rispetto a una variabile di stato quando il suo valore viene modificato, puoi usare l'hook useEffect() per attivarlo.

Ad esempio diciamo che il valore di una casella di input cambia e vuoi chiamare un'API dopo che il valore viene modificato. Puoi scrivere la logica per la gestione dell'API all'interno di useEffect().

import React, {useState, useEffect} from 'react';

export const App = () => {
    const [value, setValue] = useState('');
    useEffect(() => {
      console.log('value changed: ', value);
    }, [value])
	return <div>
        	<input type="text" name="username" value={value} onChange={(e) => setValue(e.target.value)} />
        </div>
}

Qui abbiamo una casella di input che ha un valore di stato value ad essa collegato. Questo valore cambia quando l'utente prova a digitare qualcosa.

Una volta che il valore è stato aggiornato e presentato, il blocco di codice all'interno di useEffect() viene eseguito stampando alla console il valore aggiornato della variabile di stato value.

Un buon caso d'uso per useEffect() può essere l'implementazione di chiamate API. Diciamo che vuoi chiamare una API passando come valore il contenuto della casella di input. useEffect sarà il posto migliore dove eseguire l'implementazione.

useEffect riceve come secondo argomento un array di dipendenze, nel nostro caso [value].

Questo significa che OGNI VOLTA che il valore di una variabile di stato inclusa nell'array di dipendenze (nel nostro caso value) CAMBIA, la funzione all'interno di useEffect viene eseguita, se si passa un array di dipendenze vuoto, la funzione verrà eseguita solo una volta.

Come funziona l'hook useRef()

useRef() ti consente di modificare il DOM (tuttavia questa non è l'unica caratteristica dell'hook).

Secondo la documentazione:

useRef ritorna un oggetto ref mutabile la cui proprietà .current è inizializzata con l'argomento passato (initialValue). L'oggetto restituito persisterà per l'intero ciclo di vita del componente.

Semplificando, usiamo useRef se vogliamo persistere il valore di qualcosa per tutta la durata di vita del componente. L'implementazione base di useRef si applica a elementi DOM. Facciamo un esempio:

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` punta all'elemento input testo montato nel DOM
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

In questo caso stiamo assegnando una proprietà ref all'elemento input, che sarà referenziato dalla variabile inputEl che abbiamo creato.

Questo elemento input può ora essere manipolato in qualsiasi modo vogliamo. Possiamo modificare l'attributo style abbellendo l'elemento, possiamo estrarre la proprietà value per vedere che valore contiene, e così via.

Nell'esempio qui sopra, quando facciamo click sul bottone "Focus the input", l'elemento input riceve il focus e possiamo immediatamente iniziare a scriverci dentro. Lo facciamo chiamando inputEl.current.focus(), in pratica è il metodo focus() presente nell'oggetto current.

Cosa sono gli hook personalizzati?

Una delle domande che ho visto porre con più frequenza nei colloqui relativi al front-end è la richiesta di creare un hook personalizzato per gli eventi da tastiera.

Abbiamo visto tanti hook, ma l'intervistatore potrebbe chiederti di crearne uno tuo. Per alcuni potrebbe essere impegnativo ma con un poco di pratica diventa molto più facile.

Cerchiamo di capire cos'è un hook:

L'utilizzo base di un hook personalizzato è di estrarre la logica di una funzione in un suo proprio componente.

Immagina cosa succederebbe se dovessi catturare la pressione del tasto Invio all'interno di ognuno dei tuoi componenti. Invece di scrivere la logica per un event listener in ogni componente, puoi estrarre detta logica in un componente a sé stante e usarlo ovunque tu voglia (proprio come usiamo useState() o useEffect()).

Ci sono alcune condizioni affiché una funzione possa essere considerata un hook:

1. Il nome del componente deve iniziare sempre con la parola chiave use.
2. Possiamo decidere se debba ricevere argomenti, e cosa, se necessario, dovrebbe ritornare.

// Hook personalizzato: useAvailable
function useAvailabe(resource) {
  const [isAvailable, setIsAvailable] = useState(null);

  // ...

  return isAvailable;
}

// Utilizzo:
  const isAvailable = useAvailable(cpu);

Qui, non importa quanto volte chiamiamo useState e useEffect all'interno dell'hook personalizzato, saranno completamente indipendenti rispetto al punto nel quale lo utilizziamo.

Facciamo un esempio nel quale creiamo un hook personalizzato per conservare dei valori in localStorage.

Come creare un hook personalizzato  – esempio useLocalStorage

L'hook personalizzato useLocalStorage è un modo per salvare i dati in localStorage. Otteniamo e impostiamo i valori all'interno di localStorage usando coppie chiave/valore in modo che ogniqualvolta l'utente ritorna nella nostra applicazione web possa avere a disposizione dati memorizzati nei precedenti utilizzi.

L'implementazione che segue è un semplice elemento select che, una volta modificato il suo valore, salva il dato nel localStorage.

useLocalStorage.js

// Use Local Storage Custom Hook
import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    if (typeof window === 'undefined') {
      return initialValue;
    }
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });
  const setValue = (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      if (typeof window !== 'undefined') {
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      }
    } catch (error) {
      console.log(error);
    }
  };
  return [storedValue, setValue] as const;
}

export default useLocalStorage;

App.js

import * as React from 'react';
import './style.css';
import useLocalStorage from './useLocalStorage';

export default function App() {
  const [storedValue, setStoredValue] = useLocalStorage(
    'select-value',
    'light'
  );

  return (
    <div>
      <select
        className="select"
        value={storedValue}
        onChange={(e) => setStoredValue(e.target.value)}
      >
        <option value="dark">Dark</option>
        <option value="light">Light</option>
      </select>
      <p className="desc">
        Value from local storage: <span>{storedValue}</span>
      </p>
    </div>
  );
}

L'hook useLocalStorage riceve due parametri, il nome della chiave da utilizzare in localStorage e un valore predefinito che deve trovarsi lì.

L'hook ritorna due valori: il valore della chiave in localStorage che abbiamo passato, e una funzione che consente di modificare questo valore, in questo caso setStoredValue.

Nel file useLocalStorage.js per prima cosa cerchiamo di ottenere il valore salvato in localStorage per la chiave passata usando il metodo localStorage.getItem(). Se la chiave esiste otteniamo il valore che, se esiste, ritorniamo elaborandolo con JSON.parse(). Altrimenti il contenuto della variabile initialValue viene fornito come valore predefinito.

La funzione setLocalStorage() gestisce il fatto che il valore passato sia una funzione o un semplice valore di variabile. Inoltre si occupa di impostare il valore in localStorage usando la funzione localStorage.setItem().

Come Distinguersi Come Sviluppatore Creando Progetti Secondari

La cosa che ha sempre funzionato per me e mi ha aiutato a spiccare sono i progetti secondari che ho creato.

Secondo me, non devi costruire 10 progetti secondari di base fatti in serie. Prova invece a costruire uno o due progetti davvero buoni nei quali puoi implementare tutti i concetti di React/HTML/CSS/JavaScript e tutto ciò che hai imparato.

Supponiamo che l'intervistatore abbia 14 colloqui in una settimana e debba esaminare il curriculum di altrettanti candidati. È più probabile che sia interessato al tuo profilo perché hai creato un sito Web che genera link shortener e addebita 1 dollaro dopo ogni 1000 visite al link anziché un clone Amazon / Netflix.

Ancora una volta, non c'è nulla di sbagliato nel creare cloni per esercitare le tue abilità. Tuttavia è sempre bello avere almeno 1 progetto che ti aiuta a distinguerti nella folla.

Inoltre, la creazione di progetti secondari ti aiuterà a progredire come sviluppatore. È improbabile sapere tutto in anticipo quando si crea un progetto da zero. Lungo il percorso, dovrai imparare e padroneggiare molte abilità diverse.

Pratica, Pratica, Pratica.

C'è un detto famoso che dice:

(traduzione: "Ogni intervista è un'intervista di prova per te fino a quando non ottieni il tuo primo lavoro front-end"), e questo è vero in larga misura.

Io stesso ho fallito centinaia di volte prima di ottenere il mio primo lavoro. È il feedback costante e le iterazioni che devi fare per ottenere ciò che desideri.

Nel nostro caso, ottenere un posto come sviluppatore front-end diventa facile quando:

• Hai una profonda conoscenza delle tue abilità, React in questo caso (oltre a HTML, CSS e JS).
• Hai un gruppo di progetti da mostrare, che ti mettono in evidenza.
• Sei disposto a dedicare tempo e sforzo per imparare nuove cose e metterti alla prova.
• Leggi regolarmente il blog di freeCodeCamp e ti eserciti qui con le domande (😉)

Conclusione

Ci sono molte domande su cui esercitarsi per un machine-coding round.

N.d.T.
Si tratta di risolvere un problema di progettazione in un paio d'ore. Richiede la progettazione e la scrittura del codice per una soluzione pulita, lineare ed espandibile in base a uno specifico insieme di requisiti. In genere segue un processo di revisione dove l'intervistatore esamina il codice e tenta di capire la logica del progetto.

L'intervistatore può porti diversi gruppi di domande per mettere alla prova le tue abilità.

Puoi usare Algochurn per esercitarti con le più popolari domande per colloqui su JavaScript, per domande per colloqui su React e domande relative agli algoritmi (tutte le risorse collegate sono in lingua inglese) poste in un colloquio tecnico sul front-end con i loro approcci e soluzioni.

Se hai una qualsiasi domanda, contattami via  Twitter(@mannupaaji) e/o sul mio sito web (manuarora.in)

Buona fortuna e buona programmazione! 👑🫡

Material UI Data Grid (Griglia Dati di Material UI) è una tabella dati potente e flessibile. Ti facilita il compito di visualizzare dati ed è dotata di funzionalità già pronte per applicare modifiche, ordinare e filtrare, paginazione e altro ancora.

In questo articolo, esamineremo le ragioni per le quali dovresti usare la Material UI Data Grid nel tuo progetto. Successivamente vedremo come installare e configurare Material UI Data Grid, come utilizzare e integrare un'API RESTful e abilitare la paginazione oltre all'ordinamento e il filtro dati.

Sommario

• Introduzione a Material UI Data Grid
• Perché usare Material UI Data Grid
• Installazione e Configurazione di React e della Material UI Data Grid
• Integrazione e Utilizzo API
• Visualizzare Risultati dall'API nella Material UI Data Grid
• Conclusione

Puoi vedere la versione video (in inglese) di questo articolo qui sotto oppure sul mio canale YouTube:

Introduzione a Material UI Data Grid

Secondo la documentazione, Material UI Data Grid è una

"tabella dati e griglia dati React veloce ed estensibile. È un componente ricco di funzionalità disponibile nelle versioni con licenza MIT o Commerciale".

In pratica, la Material UI Data Grid è dotata di alcune caratteristiche come la possibilità di eseguire modifiche, di ordinare, filtrare, aggiornare, eseguire paginazione dei dati, esportare e altro ancora già a disposizione nella modalità predefinita.

Gli sviluppatori di Material UI hanno piani per il futuro riguardo l'implementazione di funzionalità aggiuntive come l'esportazione in formato Excel, la selezione di intervalli di dati, raggruppamenti, pivot, aggregazioni.

Per lo scopo di questo tutorial, implementeremo alcune delle caratteristiche della Material UI Data Grid con una API REST pubblica chiamata JSONPlaceholder, che restituisce dati riguardo a post di fantasia utili per i test.

Perché usare Material UI Data Grid

Ci sono alcune importanti ragioni per le quali vorrai usare la Material UI Data Grid:

• Accessibilità
• Interazione con Utente
• Presentazione Dati

Accessibilità

La Material UI Data Grid offre funzionalità di accessibilità come l'evidenziazione della cella, vale a dire che ogni cella è accessibile tramite tastiera.

Fornisce anche altre funzionalità come lo spostamento tra le celle con la tastiera utilizzando determinati tasti per cambiare il focus delle celle della tabella, oltre a proprietà di gestione della dimensione dell'altezza di righe e colonne nella tabella.

Interazione con utente

Per quanto riguarda l'interazione, la Material UI Data Grid fornisce una caratteristica incorporata come la selezione della riga in modalità predefinita. Questo consente all'utente di selezionare determinate righe tramite click del mouse oppure usare determinate scorciatoie da tastiera.

La Material UI Data Grid supporta la selezione di riga singola o di righe multiple, la capacità di disabilitare la selezione di determinate righe o tutte le righe, caselle di spunta per la selezione e molto altro.

Presentazione Dati

La Material UI Data Grid fornisce una caratteristica integrata che consente di esportare i dati in formato CSV.

Inoltre i dati possono essere manipolati tramite click su una intestazione di colonna. Questo attiverà le funzionalità di ordinamento e filtro.

Altra caratteristica base incorporata è lo scorrimento, che non si trova in una normale tabella come funzionalità predefinita.

Installazione e Configurazione di React e di Material UI Data Grid

Per creare un nuovo progetto in React devi avere installato Node.js. Questo ti darà accesso al comando npm nel terminale. Possiamo quindi installare e usare Create React App tramite npm per creare il nostro progetto, eseguendo il seguente comando:

npm i create-react-app

Il passo successivo è la creazione di un nuovo progetto React dal terminale eseguendo i comandi seguenti:

npx create-react-app data-grid 
cd data-grid 
npm start

Con i comandi qui sopra abbiamo creato un progetto chiamato data-grid. Poi ci siamo spostati nella nuova directory del progetto appena creata e abbiamo lanciato il progetto con npm start.

Nella modalità predefinita il nostro progetto sarà in esecuzione nel browser all'indirizzo localhost:3000.

Per finire la fase di installazione, dobbiamo aggiungere due pacchetti: Material UI e Data Grid (la Griglia Dati) tramite il comando seguente:

npm install @mui/x-data-grid @mui/material

Integrazione e Utilizzo API

Per integrare la nostra API, dobbiamo creare nella directory src, che è stata creata per noi durante la generazione del progetto con Create-React-App, una nuova cartella component, all'interno della quale creare un file che chiameremo DataTable.js.

Alla fine, la nostra struttura di directory del progetto sarà tipo questa:

> src 
    > component
        > DataTable.js 
.gitignore 
package-lock.json 
package.json 
README

Nel file DataTable.js useremo un componente funzionale, con il quale implementeremo un paio di hook di React (useState e useEffect) e l'API Fetch, integrata in JavaScript.

Hook useState

Questo hook è una funzione integrata di React che aiuta a tenere traccia dello stato in un componente funzionale.

Hook useEffect

Questo hook consente di gestire effetti collaterali nel nostro componente funzionale. Alcuni di questi effetti collaterali potrebbero comprendere cose come l'aggiornamento del DOM, il recupero dati da un'API RESTful, eventi temporizzati e così via.

API Fetch

Questa API in JavaScript consente ai browser di eseguire richieste HTTP ai server web. La richiesta può essere rivolta verso qualsiasi API che invii o riceva dati in formato JSON o XML.

Ora che abbiamo esplorato i concetti di hook e dell'API Fetch, generiamo il codice boilerplate per un componente funzionale nel file DataTable.js:

import React from 'react'

const DataTable= () => {
  return (
    <div>
      
    </div>
  )
}

export default DataTable

Il prossimo passo è l'utilizzo dell'API REST da  JSON placeholder.

Per fare questo la prima cosa che dobbiamo fare è l'importazione degli hook useState e useEffect:

import React, { useState, useEffect } from 'react'

Successivamente creiamo due variabili destrutturando l'oggetto ritornato dall'hook useState:

const [tableData, setTableData] = useState([])

La variabile tableData conterrà i dati da utilizzare nella tabella e setTableData sarà la funzione che chiameremo per valorizzare la variabile tableData con i dati recuperati dall'API.

Per ultimo, per accedere ai dati quando il componente viene caricato, useremo l'API Fetch all'interno dell'hook useEffect:

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/posts")
    .then((data) => data.json())
    .then((data) => setTableData(data))
}, [])
 console.log(tableData)

Nel codice qui sopra, all'interno di useEffect abbiamo fatto tre cose, nell'ordine:

• usato fetch per ricevere i dati dall'API REST JSON placeholder
• convertito la risposta ottenuta nel formato JSON
• passato i dati della risposta ricevuta alla funzione dichiarata in precedenza, setTableData

Per assicurarci di avere ottenuto la giusta risposta, stampiamo i dati ricevuti nella console. Per vedere il risultato dobbiamo importare DataTable.js all'interno del file App.js:

import './App.css';
import DataTable from './component/DataTable';

function App() {
  return (
    <div className="App">
      <DataTable />
    </div>
  );
}

export default App;

Alla console vedremo i risultati come segue, vale a dire un array costituito da 100 elementi oggetto:

Visualizzare i Risultati dell'API nella Material UI Data Grid

Per visualizzare i dati ricevuti dall'API nella griglia dobbiamo importare il pacchetto DataGrid nel nostro file DataTable.js:

import { DataGrid } from '@mui/x-data-grid'

Successivamente impostiamo la configurazione delle intestazioni delle colonne della Material UI Data Grid:

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'title', headerName: 'TITOLO', width: 300 },
  { field: 'body', headerName: 'TESTO', width: 600 }
]

Ogni oggetto nell'array viene valorizzato con:

• field (nome campo) è il valore della chiave corrispondente per gli oggetti ottenuti dall'API REST, id è l'identificativo del post, title è il titolo e body è il contenuto.
• headerName (nome intestazione) è il nome dell'intestazione della colonna che verrà visualizzato
• width (larghezza) è la larghezza in pixel assegnata alla colonna (può mancare e in questo caso verrà calcolata automaticamente da DataGrid

Per ultimo inseriamo il componente DataGrid nell'istruzione di return per presentarlo:

<div style={{ height: 700, width: '100%' }}>
     <DataGrid
       rows={tableData}
       columns={columns}
       pageSize={12}
     />
   </div>

Nel codice qui sopra passiamo tre proprietà al componente DataGrid:

• la proprietà rows (righe) contiene il risultato ottenuto dall'API REST, che si trova memorizzato nella variabile tableData.
• la proprietà colums (colonne) viene valorizzata con l'array di oggetti  columns, precedentemente creato, che contiene la configurazione per le colonne della tabella (identificativo, titolo e corpo del post).
• la proprietà pageSize (dimensionePagina)  ci aiuta a impostare un limite massimo di righe da visualizzare per videata. Come vedi l'ho impostata a 12, con i comandi di paginazione sarà possibile visualizzare i restanti dati.

Il codice finale contenuto nel file DataTable.js è il seguente:

import React, { useState, useEffect } from 'react'
import { DataGrid } from '@mui/x-data-grid'

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'title', headerName: 'Title', width: 300 },
  { field: 'body', headerName: 'Body', width: 600 }
]

const DataTable = () => {

  const [tableData, setTableData] = useState([])

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((data) => data.json())
      .then((data) => setTableData(data))

  }, [])

  console.log(tableData)

  return (
    <div style={{ height: 700, width: '100%' }}>
      <DataGrid
        rows={tableData}
        columns={columns}
        pageSize={12}
      />
    </div>
  )
}

export default DataTable

I risultati nel browser dovrebbero assomigliare all'immagine qui sotto:

Una cosa stupenda da notare è che abbiamo funzionalità di ordinamento e filtro già pronte, basta fare click sull'intestazione della colonna desiderata.

Conclusione

In questo articolo abbiamo imparato a usare la Material UI Data Grid, alcuni hook di React, l'acquisizione e utilizzo dati da un'API REST e molto altro.

Ecco il link al codice di questo articolo che puoi trovare su GitHub.

Se hai apprezzato questo articolo, dimostrami il tuo supporto iscrivendoti al mio canale YouTube dove creo tutorial riguardanti le tecnologie di sviluppo web come JavaScript, React, Angular, Node.js, e altro.

Se hai qualche osservazione o domanda riguardo a questo articolo o sulla programmazione, puoi trovarmi su Twitter @thecodeangle.

Se stai lavorando con React, comprendere e implementare le richieste API può essere piuttosto difficile.

In questo articolo impareremo come funziona il tutto, implementando operazioni CRUD (Creazione, Lettura,  Aggiornamento, Eliminazione) usando React, gli hook di React, React Router e Axios.

Iniziamo.

Come Installare Node e npm

Per prima cosa occorre installare Node nel nostro sistema. Lo useremo principalmente per eseguire il nostro codice Javascript.

Per scaricare Node, vai su https://nodejs.org/it/.

Ti servirà anche il gestore di pacchetti di node, o npm, che è incorporato in Node. Puoi usarlo per installare pacchetti per le tue app Javascript. Fortunatamente è incluso assieme a Node, quindi non serve scaricarlo separatamente.

Una volta terminata l'installazione, apri un terminale o prompt dei comandi e digita node -v per verificare quale versione di Node hai.

Come Creare la Tua Applicazione React

Per creare un'applicazione React digita npx create-react-app <nome app> nel terminale, oppure, in questo caso, npx create-react-appreact-crud.

Vedrai che verranno installati dei pacchetti.

Una volta completata l'operazione, spostati all'interno della cartella del progetto e digita npm start.

Vedrai il template predefinito di React, come questo:

Come installare il pacchetto Semantic UI per React

Adesso, installiamo nel progetto il pacchetto Semantic UI React. Semantic UI è una libreria di interfacce utente fatta per React che ha componenti di interfaccia utente preconfezionati come tabelle, bottoni e molte altre funzionalità.

Puoi installarlo usando uno dei comandi qui sotto, a seconda del tuo gestore di pacchetti.

yarn add semantic-ui-react semantic-ui-css

npm install semantic-ui-react semantic-ui-css

Occorre anche importare la libreria nel file principale dell'applicazione, vale a dire index.js.

import 'semantic-ui-css/semantic.min.css'

Come Costruire l'Applicazione CRUD

Ora iniziamo a costruire l'Applicazione CRUD usando React.

Per prima cosa aggiungeremo un'intestazione all'applicazione.

Nel file App.js, aggiungi un'intestazione in questo modo:

import './App.css';

function App() {
  return (
    <div>
      React Crud Operations
    </div>
  );
}

export default App;

Ora assicuriamoci che sia centrata.

Dai all'attributo className del div genitore il valore main. Nel file App.css, useremo Flexbox per centrare l'intestazione.

import './App.css';

function App() {
  return (
    <div className="main">
      React Crud Operations
    </div>
  );
}

export default App;

.main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Ora l'intestazione è centrata perfettamente.

Così sembra un po' meglio, dobbiamo renderla in grassetto e aggiungere un font carino. Per farlo useremo dei tag di intestazione in cui inseriremo l'intestazione, in questo modo:

import './App.css';

function App() {
  return (
    <div className="main">
      <h2 className="main-header">React Crud Operations</h2>
    </div>
  );
}

export default App;

Ora importiamo un font da Google Font. Vai su https://fonts.google.com/ per sceglierne uno.

Scegli un font qualsiasi di tuo gradimento, per questo articolo io userò la famiglia di font Montserrat.

Importa il font nel file App.css, in questo modo:

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

Ora cambiamo il font dell'intestazione.

<div className="main">
      <h2 className="main-header">React Crud Operations</h2>
</div>

Dai al tag di intestazione un attributo className del valore di main-header, come si vede sopra.

Qundi nel file  App.css, aggiungi la proprietà font-family:

.main-header{
  font-family: 'Montserrat', sans-serif;
}

Ora vedrai che l'aspetto dell'intestazione è cambiato.

Come Creare i tuoi Componenti CRUD

Andremo a creare quattro componenti CRUD che saranno Create per la creazione, Read per la lettura, Update per l'aggiornamento e Delete per l'eliminazione.

All'interno della cartella src, crea una cartella chiamata components e all'interno di questa crea 3 file: create.js, read.js e update.js. Per le operazioni di eliminazione non servono componenti extra.

Ora implementiamo l'operazione di creazione.

Per fare questo dobbiamo usare l'API Mock. Questa API invia dati fittizi a un server che ora creeremo, solo a scopo di apprendimento.

Vai su https://mockapi.io/ e crea un account.

Crea un progetto facendo click sul bottone con il segno più.

Aggiungi il nome del progetto e clicca sul bottone Create.

Ora crea una nuova risorsa facendo click sul bottone NEW RESOURCE.

Ti verrà chiesto il nome della risorsa (Resource Name), per cui puoi digitare un nome a piacimento.

Elimina i campi extra come name, avatar, o createdAt, in quanto non necessari. Infine fai click su Create.

Ora abbiamo creato la nostra API per i dati fittizi, che io ho chiamato fakeData.

Clicca su fakeData (o il nome che hai scelto), e vedrai aprirsi una nuova scheda nel browser che mostra il contenuto del database, attualmente vuoto.

Come Creare un Form per il Componente Create

Useremo un form dalla libreria Semantic UI.

Vai su Semantic React e cerca "Form" nella barra di ricerca sulla sinistra.

Vedrai un form come questo, quindi fai click sul bottone "Try it" in alto a destra per fare apparire il codice.

Copia e incolla il codice nel file create.js in questo modo:

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const Create = () => (
    <Form>
        <Form.Field>
            <label>First Name</label>
            <input placeholder='First Name' />
        </Form.Field>
        <Form.Field>
            <label>Last Name</label>
            <input placeholder='Last Name' />
        </Form.Field>
        <Form.Field>
            <Checkbox label='I agree to the Terms and Conditions' />
        </Form.Field>
        <Button type='submit'>Submit</Button>
    </Form>
)

export default Create;

Importa il componente Create nel file App.js.

import './App.css';
import Create from './components/create';

function App() {
  return (
    <div className="main">
      <h2 className="main-header">React Crud Operations</h2>
      <div>
        <Create/>
      </div>
    </div>
  );
}

export default App;

In questo modo:

Qui c'è un problema, gli elementi non sono propriamente allineati e il colore delle etichette per le caselle di testo è nero, quindi cambiamolo.

Nel file create.js, dai all'attributo className di Form il valore di create-form.

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const Create = () => (
    <Form className="create-form">
        <Form.Field>
            <label>First Name</label>
            <input placeholder='First Name' />
        </Form.Field>
        <Form.Field>
            <label>Last Name</label>
            <input placeholder='Last Name' />
        </Form.Field>
        <Form.Field>
            <Checkbox label='I agree to the Terms and Conditions' />
        </Form.Field>
        <Button type='submit'>Submit</Button>
    </Form>
)

export default Create;

Quindi aggiungi la seguente classe al file App.css:

.create-form label{
  color: whitesmoke !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px !important;
}

Questa classe si applicherà a tutte le etichette del form alle quali verrà dato il colore whitesmoke. Anche il font viene modificato incrementandone la dimensione.

Ora, nella classe main, aggiungi una proprietà flex-direction. Questa proprietà imposterà la visualizzazione degli elementi su colonne, in modo che ogni elemento con className main venga allineato verticalmente.

.main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #212121;
  color: whitesmoke;
  flex-direction: column;
}

Ora puoi vedere che il form ha un aspetto migliore.

Successivamente, stampiamo i dati ottenuti dai campi del form nella console. Per fare questo useremo l'hook  di React useState.

Nel file create.js, importa useState da React.

import React, { useState } from 'react';

Poi crea gli stati per il nome (firstName), il cognome (lastName) e la casella di spunta. Inizializza tutti gli stati come vuoti o false.

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

export default function Create() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);
    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' />
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' />
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' />
                </Form.Field>
                <Button type='submit'>Submit</Button>
            </Form>
        </div>
    )
}

Puoi vedere che adesso sta agendo come un componente funzionale. Quindi dobbiamo dobbiamo cambiare il componente in un componente funzionale. Questo perché possiamo usare gli hook solo in componenti funzionali.

Ora impostiamo il nome, il cognome e la casella di spunta usando rispettivamente le proprietà setFirstName, setLastName e setCheckbox.

<input placeholder='First Name' onChange={(e) => setFirstName(e.target.value)}/>

<input placeholder='Last Name' onChange={(e) => setLastName(e.target.value)}/>

<Checkbox label='I agree to the Terms and Conditions' onChange={(e) => setCheckbox(!checkbox)}/>

Stiamo catturando gli stati per il nome, cognome e casella di spunta.

Crea una funzione postData che useremo per inviare dati all'API. All'interno della funzione scrivi questo codice:

const postData = () => {
        console.log(firstName);
        console.log(lastName);
        console.log(checkbox);
}

Stiamo stampando i valori di nome (firstName), cognome (lastName) e casella di spunta (checkbox) nella console.

Assegna all'evento onClick del pulsante Submit la funzione postData in modo che venga chiamata ogni volta che si fa click sul pulsante.

<Button onClick={postData} type='submit'>Submit</Button>

Ecco l'intero codice per il file create.js:

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

export default function Create() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);
    const postData = () => {
        console.log(firstName);
        console.log(lastName);
        console.log(checkbox);
    }
    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' onChange={(e) => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button onClick={postData} type='submit'>Submit</Button>
            </Form>
        </div>
    )
}

Digita qualche valore nei campi del form e seleziona la casella di spunta. Poi fai click sul pulsante Submit. Vedrai apparire i dati nella console, in questo modo:

Come Usare Axios per Inviare Richieste all'API Mock

Usiamo Axios per inviare i dati del form al server.

Per prima cosa occorre installare Axios.

Digita semplicemente npm i axios per installare il pacchetto.

Dopo avere installato il pacchetto iniziamo l'operazione di creazione.

Importa Axios all'inizio del file.

import axios from 'axios';

Nella funzione postData, useremo Axios per inviare una richiesta di tipo POST.

const postData = () => {
        axios.post(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
            firstName,
            lastName,
            checkbox
        })
    }

Come puoi vedere stiamo usando axios.post. I parametri passati alla funzione sono l'endpoint dell'API, che abbiamo creato in precedenza, e un oggetto che contiene i dati dei campi del form.

Quando facciamo click sul bottone Submit, verrà chiamata questa funzione che invierà i dati al server API.

Digita il tuo nome, cognome e seleziona la casella di spunta. Clicca su Submit.

Successivamente, se controlli l'API, vedrai i tuoi nome, cognome e il valore della casella di spunta come true impacchettati in un oggetto.

Come Implementare le Operazioni di Lettura e Aggiornamento

Per l'operazione di lettura occorre creare una pagina Read. Ci servirà anche il pacchetto React Router per navigare tra le varie pagine.

Vai su https://reactrouter.com/web/guides/quick-start e installa il pacchetto usando npm i react-router-dom.

Dopo l'installazione occorre importare nel file App.js quanto segue da React Router:

import { BrowserRouter as Router, Route } from 'react-router-dom'

In App.js inserisci il componente <Router> come elemento genitore nell'istruzione di return, il che significa che qualsiasi cosa si trovi come figlio di quel componente sarà in grado di usare le rotte in React.

import './App.css';
import Create from './components/create';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="main">
        <h2 className="main-header">React Crud Operations</h2>
        <div>
          <Create />
        </div>
      </div>
    </Router>
  );
}

export default App;

Ora App.js apparirà come sopra.

Sostituisci <Create /> all'interno dell'istruzione return aggiungendo il seguente codice:

import './App.css';
import Create from './components/create';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="main">
        <h2 className="main-header">React Crud Operations</h2>
        <div>
          <Route exact path='/create' component={Create} />
        </div>
      </div>
    </Router>
  );
}

export default App;

Qui stiamo usando il componente Route come Create. Abbiamo associato la rotta '/create' al componente Create. Quindi se vai su http://localhost:3000/create, vedrai la pagina presentata dal componente Create.

Analogamente, ci servono rotte per lettura (read) e aggiornamento (update).

import './App.css';
import Create from './components/create';
import Read from './components/read';
import Update from './components/update';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="main">
        <h2 className="main-header">React Crud Operations</h2>
        <div>
          <Route exact path='/create' component={Create} />
        </div>
        <div style={{ marginTop: 20 }}>
          <Route exact path='/read' component={Read} />
        </div>

        <Route path='/update' component={Update} />
      </div>
    </Router>
  );
}

export default App;

Quindi crea le due rotte read e update come si vede qui sopra.

Se vai su http://localhost:3000/read, vedrai quanto segue:

Su http://localhost:3000/update, vedrai il componente Update in questo modo:

Operazione di Lettura

Per l'operazione di lettura ci servirà un componente Table, pertanto portiamoci su React Semantic UI e utilizziamo una tabella dalla libreria.

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        <div>
            <Table singleLine>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>Name</Table.HeaderCell>
                        <Table.HeaderCell>Registration Date</Table.HeaderCell>
                        <Table.HeaderCell>E-mail address</Table.HeaderCell>
                        <Table.HeaderCell>Premium Plan</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    <Table.Row>
                        <Table.Cell>John Lilki</Table.Cell>
                        <Table.Cell>September 14, 2013</Table.Cell>
                        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
                        <Table.Cell>No</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <Table.Cell>Jamie Harington</Table.Cell>
                        <Table.Cell>January 11, 2014</Table.Cell>
                        <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
                        <Table.Cell>Yes</Table.Cell>
                    </Table.Row>
                    <Table.Row>
                        <Table.Cell>Jill Lewis</Table.Cell>
                        <Table.Cell>May 11, 2014</Table.Cell>
                        <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
                        <Table.Cell>Yes</Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table>
        </div>
    )
}

Qui puoi vedere che abbiamo una tabella con alcuni dati fittizi, ma ci serve solo un componente Table.Row, per cui eliminiamo il resto.

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        <div>
            <Table singleLine>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>Name</Table.HeaderCell>
                        <Table.HeaderCell>Registration Date</Table.HeaderCell>
                        <Table.HeaderCell>E-mail address</Table.HeaderCell>
                        <Table.HeaderCell>Premium Plan</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    <Table.Row>
                        <Table.Cell>John Lilki</Table.Cell>
                        <Table.Cell>September 14, 2013</Table.Cell>
                        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
                        <Table.Cell>No</Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table>
        </div>
    )
}

Questo è il risultato della pagina Read. Abbiamo una tabella con quattro colonne, ma ne servono solo tre.

Rimuovi le colonne extra e rinomina i campi in questo modo:

Ed ecco come si presenta la pagina Read:

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        <div>
            <Table singleLine>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>First Name</Table.HeaderCell>
                        <Table.HeaderCell>Last Name</Table.HeaderCell>
                        <Table.HeaderCell>Checked</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    <Table.Row>
                        <Table.Cell>Nishant</Table.Cell>
                        <Table.Cell>Kumar</Table.Cell>
                        <Table.Cell>Yes</Table.Cell>
                    </Table.Row>
                </Table.Body>
            </Table>
        </div>
    )
}

Ora inviamo la richiesta GET per ottenere i dati dall'API.

Ci servono i dati quando l'applicazione si carica. Quindi useremo l'hook useEffect.

import React, { useEffect } from 'react';

 useEffect(() => {
       
 }, [])

Crea uno stato che conterrà i dati in arrivo. Questo sarà un array.

import React, { useEffect, useState } from 'react';

const [APIData, setAPIData] = useState([]);
useEffect(() => {
       
}, [])

Dall'hook useEffect inviamo la richiesta GET.

 useEffect(() => {
        axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
            .then((response) => {
                setAPIData(response.data);
            })
    }, [])

Stiamo usando axios.get per inviare la richiesta GET all'API. Successivamente, se la richiesta è soddisfatta, imposteremo i dati di risposta nello stato APIData.

Ora popoliamo le righe della tabella in base al contenuto di APIData.

Per fare questo useremo la funzione map. Eseguirà un'iterazione sui dati dell'array e i dati verranno visualizzati.

<Table.Body>
  {APIData.map((data) => {
     return (
       <Table.Row>
          <Table.Cell>{data.firstName}</Table.Cell>
           <Table.Cell>{data.lastName}</Table.Cell>
           <Table.Cell>{data.checkbox ? 'Checked' : 'Unchecked'}</Table.Cell>
        </Table.Row>
   )})}
</Table.Body>

Stiamo mappando nome (firstName), cognome (lastName), e casella di spunta (checkbox) in base ai dati nell'API, tuttavia la casella di spunta è un po' diversa. Qui ho usato l'operatore ternario ('?'). Se data.checkbox è true, verrà visualizzato 'Checked` (spuntato), altrimenti 'Unchecked' (non spuntato).

L'Operazione di Aggiornamento

Crea un'ulteriore intestazione per l'aggiornamento e una colonna nella riga della tabella che conterrà un bottone per l'aggiornamento. Usa il bottone da Semantic UI React.

<Table.HeaderCell>Update</Table.HeaderCell>

<Table.Cell> 
  <Button>Update</Button>
</Table.Cell>

Quando facciamo click su questo pulsante dovremmo essere reindirizzati verso la pagina di aggiornamento. A questo scopo, ci occorre il componente Link da React Router.

Importa Link da React Router, quindi racchiudi il codice per la cella di tabella per il bottone di aggiornamento all'interno di Link.

import { Link } from 'react-router-dom';

<Link to='/update'>
  <Table.Cell> 
     <Button>Update</Button>
   </Table.Cell>
</Link>

Ora se facciamo click sul bottone di aggiornamento Update saremo reindirizzati alla pagina di aggiornamento.

Per poter aggiornare i dati della riga ci serviranno i rispettivi ID, ricevuti dall'API.

Crea una funzione chiamata setData e collegala al bottone Update.

 <Button onClick={() => setData()}>Update</Button>

Ora dovremo passare i dati come parametro per la funzione di cui sopra.

 <Button onClick={() => setData(data)}>Update</Button>

All'interno della funzione stampiamo questi dati sulle console:

const setData = (data) => {
   console.log(data);
}

Fai click sul bottone Update nella tabella e controlla la console. Dovresti vedere i dati dei rispettivi campi della tabella.

Ora conserviamo questi dati in localStorage.

const setData = (data) => {
        let { id, firstName, lastName, checkbox } = data;
        localStorage.setItem('ID', id);
        localStorage.setItem('First Name', firstName);
        localStorage.setItem('Last Name', lastName);
        localStorage.setItem('Checkbox Value', checkbox)
}

Stiamo destrutturando i dati in id, firstName, lastName e checkbox, quindi li inseriamo nel localStorage. Puoi usare localStorage per conservare localmente dati nel browser.

Ora, nel componente Update, ci serve un form per l'operazione di aggiornamento. Riutilizziamo il form dal componente Create. Cambiamo semplicemente il nome della funzione da Create a Update.

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
import axios from 'axios';

export default function Update() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);

    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' onChange={(e) => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button type='submit'>Update</Button>
            </Form>
        </div>
    )
}

Crea un hook useEffect nel componente Update. Lo useremo per ottenere i dati precedentemente conservati in localStorage. Inoltre, crea un ulteriore stato per il campo ID.

const [id, setID] = useState(null);

useEffect(() => {
        setID(localStorage.getItem('ID'))
        setFirstName(localStorage.getItem('First Name'));
        setLastName(localStorage.getItem('Last Name'));
        setCheckbox(localStorage.getItem('Checkbox Value'))
}, []);

Imposta i rispettivi dati in base alle tue chiavi da localStorage. Dobbiamo impostare questi valori nei campi del form. Quando la pagina di aggiornamento Update si caricherà i campi verranno automaticamente popolati.

<Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' value={lastName} onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' checked={checkbox} onChange={(e) => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button type='submit'>Update</Button>
            </Form>

Ora, se facciamo click sul bottone Update nella pagina di lettura Read, saremo reindirizzati alla pagina di aggiornamento, dove vedremo tutti i dati del form popolati automaticamente.

Ora creiamo una richiesta di aggiornamento per i dati.

Crea una funzione chiamata  updateAPIData. All'interno di questa funzione andremo a usare axios.put per inviare una richiesta PUT che aggiornerà i nostri dati.

const updateAPIData = () => {
    axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`, {
        firstName,
         lastName,
         checkbox
	})
}

Qui puoi vedere che stiamo accodando un campo id all'endpoint dell'API.

Quando facciamo click sul bottone Update nella tabella, l'ID che rappresenta il relativo record viene conservato in localStorage. Nella pagina di aggiornamento lo recuperiamo. Successivamente conserviamo quell'ID nello stato id.

Dopodiché passiamo l'id all'endpoint. Questo ci consente di aggiornare il record di cui stiamo passando l'ID.

Collega la funzione updateAPIData al bottone Update.

<Button type='submit' onClick={updateAPIData}>Update</Button>

Clicca sul bottone Update nella tabella nella pagina di lettura Read, modifica il cognome, quindi fai click sul bottone Update nella pagina di aggiornamento Update.

Ritorna alla pagina di lettura Read oppure controlla l'API. Dovresti vedere che il cognome è stato modificato.

L'Operazione di Eliminazione

Aggiungi un altro pulsante alla tabella in read.js, che useremo per l'operazione di eliminazione.

<Table.Cell>
   <Button onClick={() => onDelete(data.id)}>Delete</Button>
</Table.Cell>

Crea una funzione chiamata onDelete e collegala al bottone Delete. Questa funzione riceverà un ID come parametro quando si fa click sul pulsante Delete.

const onDelete = (id) => {

}

Useremo axios.delete per eliminare le rispettive righe.

const onDelete = (id) => {
  axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`)
}

Fai click sul bottone Delete e controlla l'API. Dovresti vedere che il record è stato eliminato.

Dopo l'eliminazione dobbiamo ricaricare i dati della tabella.

Quindi crea una funzione per caricare i dati dall'API.

const getData = () => {
    axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
        .then((getData) => {
             setAPIData(getData.data);
         })
}

Ora, nella funzione onDelete, dobbiamo caricare i dati aggiornati dopo avere eliminato un record.

const onDelete = (id) => {
        axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`)
     .then(() => {
        getData();
    })
}

Ora se se facciamo click su Delete in qualsiasi riga della tabella, verrà eliminato il record rappresentato e la tabella si aggiornerà automaticamente.

Facciamo Qualche Miglioramento alla nostra App CRUD

Quando inviamo i dati nella pagina Create, stiamo semplicemente inserendo gli elementi nel database di dati fittizi. Dobbiamo reindirizzarci verso la pagina di lettura Read dopo che il nuovo record è stato creato nella pagina Create.

Importa useHistory da React Router.

import { useHistory } from 'react-router';

Crea una variabile chiamata history e associala alla funzione useHistory.

let history = useHistory();

Quindi usa la funzione history.push per la redirezione verso la pagina di lettura Read appena dopo la chiamata post fatta all'API.

const postData = () => {
        axios.post(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
            firstName,
            lastName,
            checkbox
        }).then(() => {
            history.push('/read')
        })
    }

Usando l'hook useHistory l'app verrà diretta verso la pagina di lettura Read.

Fai la stessa cosa per la pagina di aggiornamento Update.

import React, { useState, useEffect } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
import axios from 'axios';
import { useHistory } from 'react-router';

export default function Update() {
    let history = useHistory();
    const [id, setID] = useState(null);
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);

    useEffect(() => {
        setID(localStorage.getItem('ID'))
        setFirstName(localStorage.getItem('First Name'));
        setLastName(localStorage.getItem('Last Name'));
        setCheckbox(localStorage.getItem('Checkbox Value'));
    }, []);

    const updateAPIData = () => {
        axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`, {
            firstName,
            lastName,
            checkbox
        }).then(() => {
            history.push('/read')
        })
    }
    return (
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>First Name</label>
                    <input placeholder='First Name' value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <label>Last Name</label>
                    <input placeholder='Last Name' value={lastName} onChange={(e) => setLastName(e.target.value)}/>
                </Form.Field>
                <Form.Field>
                    <Checkbox label='I agree to the Terms and Conditions' checked={checkbox} onChange={() => setCheckbox(!checkbox)}/>
                </Form.Field>
                <Button type='submit' onClick={updateAPIData}>Update</Button>
            </Form>
        </div>
    )
}

Adesso sai come fare per eseguire operazioni di creazione, lettura, aggiornamento e cancellazione (CRUD) usando React e gli hook di React!

Puoi trovare il codice su GitHub se vuoi sperimentare ulteriormente.

Buon apprendimento.

localStorage è un oggetto di archiviazione web che consente a siti e app che utilizzano JavaScript di conservare coppie chiave-valore in un browser web senza scadenza.

Il che vuol dire che i dati sopravvivono ad aggiornamenti della pagina (sessionStorage) e anche a riavvii del browser. Questo significa che i dati conservati nel browser rimarranno anche quando il browser viene chiuso.

In termini semplici, localStorage consente agli sviluppatori di conservare e recuperare dati nel browser.

È fondamentale capire, tuttavia, che utilizzare localStorage come un database per il tuo progetto non è buona pratica, visto che i dati andranno persi, se l'utente svuota la cache, tra le altre cose.

Gli sviluppatori usano frequentemente localStorage per aggiungere una funzionalità di tema scuro in un'applicazione, salvare una voce di una lista di cose da fare, o persistere i valori di un form immessi da un utente, oltre a tanti altri scenari.

In questo post, daremo un'occhiata a come usare localStorage con gli hook di React per salvare e recuperare facilmente elementi.

Cosa Sono gli Hook di React?

Gli hook di React sono funzioni JavaScript che puoi importare dal pacchetto React per aggiungere funzionalità ai tuoi componenti.

Gli hook consentono agli sviluppatori di usare lo stato e i metodi del ciclo di vita con i componenti funzionali. Operano anche con il codice esistente, rendendoli facilmente adottabili al codebase.

Ci servono due hook per l'uso con localStorage:

• useState() – È garantito che lo stato della tua applicazione prima o poi cambierà. L'hook useState() è una funzione che accetta un parametro, lo stato iniziale (che potrebbe essere il valore di una variabile, un oggetto o qualsiasi altra sorta di dato nel tuo componente), e ritorna due valori: lo stato corrente e una funzione che può essere usata per aggiornare lo stato.
• useEffect() – Questo hook viene attivato in modalità predefinita alla prima presentazione del componente e ogni volta che cambia lo stato. È usato per eseguire un'attività ogni volta che cambia lo stato. Questo hook è ottimo per la configurazione di listener, il recupero di dati da un'API e l'eliminazione di listener prima che il componente sia rimosso dal DOM.

Come implementare localStorage in React

localStorage ci fornisce un accesso all'oggetto di archiviazione del browser tramite cinque metodi:

• setItem(): Questo metodo è usato per aggiungere una chiave e un valore a localStorage.
• getItem(): Questo metodo è usato per ottenere un valore da localStorage usando la chiave.
• removeItem(): Questo metodo è usato per eliminare un elemento da localStorage in base alla sua chiave.
• clear(): Questo metodo è usato per eliminare tutti gli elementi da localStorage.
• key(): Questo metodo ottiene il nome di una chiave da localStorage passando come parametro l'indice della chiave stessa.

In questo post prenderemo in considerazione solo i due metodi più utilizzati: setItem() e getItem().

Come Usare il Metodo setItem()

Questo metodo viene usato per conservare oggetti in localStorage, assegnando un valore a una chiave. Il valore può essere di qualunque tipo, compresi testo, numero, oggetto, array, e così via.

È essenziale ricordare che i dati da conservare in localStorage devono essere salvati sotto forma di stringa con la funzione JSON.stringify() .

const [items, setItems] = useState([]);

useEffect(() => {
  localStorage.setItem('items', JSON.stringify(items));
}, [items]);

Nel codice qui sopra, abbiamo creato prima uno stato e lo abbiamo assegnato a un array vuoto (ma il tuo potrebbe essere di qualsiasi altro tipo). Successivamente abbiamo usato useEffect() per aggiungere oggetti a local Storage ogniqualvolta il valore del nostro stato venga modificato. Lo facciamo passando lo stato come secondo argomento.

Fondamentalmente, questo è il codice principale responsabile dell'aggiunta di coppie chiave-valore a localStorage:

localStorage.setItem('items', JSON.stringify(items));

In poche parole, il codice precedente nomina la chiave (items) e quindi le assegna un valore, ma dobbiamo prima assicurarci che i dati che stiamo aggiungendo siano sotto forma di stringa JSON.

Usiamo JSON.stringify() per convertire un oggetto JSON in testo JSON conservato in una stringa, che può essere trasmessa al server web.

Come Usare il Metodo getItem()

Questo metodo recupera oggetti da localStorage. Ci sono altri metodi per farlo con React, ma useremo l'hook useEffect(), visto che è il modo migliore.

useEffect() ci aiuta a recuperare tutti gli elementi alla prima presentazione, il che significa che quando il componente viene montato o ripresentato, estrae tutti i nostri dati da localStorage.

Nota che questa è la ragione per la quale abbiamo passato un array vuoto come secondo argomento di useEffect().

const [items, setItems] = useState([]);

useEffect(() => {
  const items = JSON.parse(localStorage.getItem('items'));
  if (items) {
   setItems(items);
  }
}, []);

È importante ricordare che prima di essere salvati, i dati sono stati convertiti in stringa JSON. Ne consegue che per utilizzarli dobbiamo convertirli nuovamente in oggetto JSON. Lo facciamo con il metodo JSON.parse() .

Conclusione

In questo articolo abbiamo imparato come usare localStorage con gli hook di React, quando usarlo e quali hook usare.

Se vuoi vedere come funziona in pratica, qui puoi ottenere il codice sorgente di una semplice applicazione per gestire un elenco di cose da fare che utilizza localStorage e questi hook.

Il contesto di React è uno strumento essenziale da conoscere per qualunque sviluppatore React. Ti consente di condividere facilmente lo stato nelle tue applicazioni.

In questa guida completa, tratteremo cos'è il contesto di React, come usarlo, quando usarlo e quando non, e molto altro.

Anche se non hai mai lavorato prima con il contesto di React, sei nel posto giusto. Imparerai tutto quello che ti serve sapere con semplici esempi passo dopo passo.

Iniziamo!

Sommario

• Cosa è il contesto di React?
• Quando dovresti usare il contesto di React?
• Quali problemi risolve il contesto di React?
• Come uso il contesto di React?
• Cos'è l'hook useContext?
• Potrebbe non servirti il contesto
• Il contesto di React sostituisce Redux?
• Avvertenze sul contesto di React

Cosa è il contesto di React?

Il contesto in React ci consente di passare e utilizzare dati in qualunque componente servano nella nostra app React senza usare le prop.

In altre parole, il contesto in React ci consente di condividere dati (lo stato) tra i nostri componenti più facilmente.

Quando dovresti usare il contesto di React?

Il contesto di React è ottimo quando devi passare dati che possono essere usati in qualunque componente nella tua applicazione.

Questi tipi di dato includono:

• Dati relativi a un tema (come la modalità chiara o scura)
• Dati utente (l'utente attualmente autenticato)
• Dati specifici di posizione (come la lingua dell'utente o le impostazioni locali)

I dati che dovrebbero essere inseriti nel contesto di React non dovrebbero essere dati che devono essere aggiornati frequentemente.

Questo perché il contesto non è stato concepito come un intero sistema di gestione dello stato. È stato creato per utilizzare dati più facilmente.

Puoi pensare al contesto di React come l'equivalente di variabili globali per i componenti React.

Quali problemi risolve il contesto di React?

Il contesto di React ci consente di evitare un problema noto come "prop drilling".

Prop drilling descrive una situazione nella quale i dati vengono passati come prop attraverso più livelli di componenti annidati, che non ne hanno bisogno, fino a raggiungere il componente che ne deve fare effettivamente uso.

Ecco un esempio di prop drilling. In questa applicazione abbiamo accesso ai dati di un tema che vogliamo passare come prop a tutti i componenti della nostra applicazione.

Come puoi vedere, anche i diretti discendenti di App, come Header, devono passare i dati del tema ai propri discendenti usando le prop.

export default function App({ theme }) {
  return (
    <>
      <Header theme={theme} />
      <Main theme={theme} />
      <Sidebar theme={theme} />
      <Footer theme={theme} />
    </>
  );
}

function Header({ theme }) {
  return (
    <>
      <User theme={theme} />
      <Login theme={theme} />
      <Menu theme={theme} />
    </>
  );
}

Qual è il problema con questo esempio?

Il problema è che stiamo passando la prop theme attraverso componenti multipli, ai quali non serve direttamente.

Il componente Header non ha bisogno di theme, se non per passarlo ai suoi discendenti. In altre parole, sarebbe meglio che User, Login e Menu utilizzassero i dati in theme direttamente.

Questo è il vantaggio del contesto di React, possiamo evitare interamente l'uso delle prop, di conseguenza evitando il problema del prop drilling.

Come uso il contesto di React?

Il contesto è una API integrata in React, a partire dalla versione 16.

Ciò significa che possiamo creare e utilizzare il contesto direttamente importando React in qualunque progetto React.

Ci sono quattro passaggi per usare il contesto di React:

1. Crea il contesto usando il metodo createContext.
2. Prendi il contesto che hai creato e racchiudi all'interno del fornitore di contesto (context provider) la tua alberatura di componenti .
3. Inserisci qualunque valore desideri nel tuo fornitore di contesto usando la prop value.
4. Utilizza quel valore all'interno di qualsiasi componente usando l'utilizzatore di contesto  (context consumer).

Tutto ciò può sembrare confuso, ma è più semplice di quanto pensi.

Diamo un'occhiata a un esempio molto semplice. Dal componente App passiamo il nostro nome tramite contesto e lo leggiamo in un componente annidato: User.

import React from 'react';

export const UserContext = React.createContext();

export default function App() {
  return (
    <UserContext.Provider value="Reed">
      <User />
    </UserContext.Provider>
  )
}

function User() {
  return (
    <UserContext.Consumer>
      {value => <h1>{value}</h1>} 
      {/* stampa: Reed */}
    </UserContext.Consumer>
  )
}

Analizziamo passo dopo passo quello che stiamo facendo:

1. Al di sopra del componente App creiamo il contesto con React.createContext() e lo assegniamo a una variabile, UserContext. In quasi tutti i casi, vorrai esportarlo nel modo in cui lo stiamo facendo qui, in quanto i tuoi componenti si troveranno in un altro file. Nota che possiamo passare un valore iniziale alla prop value quando chiamiamo React.createContext().
2. Nel componente App usiamo UserContext. In particolare UserContext.Provider. Il contesto creato è un oggetto con due proprietà: Provider (fornitore) e Consumer (consumatore), entrambi i quali sono componenti. Per passare il nostro valore a ogni componente nella nostra app, dobbiamo racchiudere all'interno del componente Provider il componente (o i componenti) che deve utilizzare il contesto (in questo caso User).
3. In UserContext.Provider, inseriamo il valore che vogliamo passare a tutta la nostra alberatura di componenti. Per farlo lo assegniamo alla prop value. In questo caso il nostro nome (il mio è Reed).
4. In User, o qualunque componente che vogliamo utilizzi quello che viene fornito nel nostro contesto, utilizziamo il componente UserContext.Consumer. Per passare il valore usiamo quello che è noto come modello di presentazione delle prop (render props pattern). È semplicemente una funzione che il componente consumer ci fornisce come prop. Come valore di ritorno di quella funzione, possiamo restituire e usare value.

Cos'è l'hook useContext?

Se esaminiamo l'esempio qui sopra, il modello di presentazione delle prop per l'utilizzo del contesto ti potrebbe sembrare un po' strano.

Un altro modo di utilizzare il contesto è disponibile in React dalla versione 16.8 con l'arrivo degli hook di React. Ora possiamo usare il contesto con l'hook useContext .

Invece di usare il modello di presentazione delle prop possiamo passare l'intero oggetto contesto a React.useContext() per utilizzarlo all'inizio del nostro componente.

Ecco l'esempio di cui sopra usando l'hook useContext:

import React from 'react';

export const UserContext = React.createContext();

export default function App() {
  return (
    <UserContext.Provider value="Reed">
      <User />
    </UserContext.Provider>
  )
}

function User() {
  const value = React.useContext(UserContext);  
    
  return <h1>{value}</h1>;
}

Il vantaggio dell'hook useContext è che rende il nostro componente più conciso e ci consente di creare i nostri hook personalizzati.

Puoi usare il componente consumer direttamente oppure usare l'hook useContext, a seconda del modello che preferisci.

Potrebbe non servirti il contesto

L'errore che molti sviluppatori commettono è usare il contesto quando devono solo passare prop attraverso diversi livelli per raggiungere un componente.

Ecco un'applicazione con un componente Avatar annidato a cui servono due prop, username e avatarSrc dal componente App .

export default function App({ user }) {
  const { username, avatarSrc } = user;

  return (
    <main>
      <Navbar username={username} avatarSrc={avatarSrc} />
    </main>
  );
}

function Navbar({ username, avatarSrc }) {
  return (
    <nav>
      <Avatar username={username} avatarSrc={avatarSrc} />
    </nav>
  );
}

function Avatar({ username, avatarSrc }) {
  return <img src={avatarSrc} alt={username} />;
}

Se possibile, vorremmo evitare di passare prop multiple attraverso componenti a cui non servono.

Come possiamo fare?

Invece di ripiegare immediatamente sul contesto, in quanto stiamo facendo prop drilling, dovremmo costruire meglio i nostri componenti.

Visto che solo il componente di livello più alto, App, deve sapere che esiste un componente Avatar, possiamo crearlo direttamente all'interno di App.

Questo ci consente di passare una singola prop, avatar, invece di due.

export default function App({ user }) {
  const { username, avatarSrc } = user;

  const avatar = <img src={avatarSrc} alt={username} />;

  return (
    <main>
      <Navbar avatar={avatar} />
    </main>
  );
}

function Navbar({ avatar }) {
  return <nav>{avatar}</nav>;
}

In breve: non considerare subito il contesto. Vedi se puoi organizzare meglio i tuoi componenti per evitare il prop drilling.

Il contesto di React sostituisce Redux?

Sì e no.

Per molti principianti di React, Redux è un modo per passare dati molto più facilmente. Questo perché Redux stesso è dotato di un contesto React.

Tuttavia, se non stai anche aggiornando lo stato, ma passi semplicemente i dati attraverso la tua alberatura di componenti, non ti serve una libreria di gestione dello stato come Redux.

Avvertenze sul contesto di React

Come mai non è possibile aggiornare il valore che il contesto di React mette a disposizione?

Sebbene sia possibile combinare il contesto di React con un hook come useReducer e creare una libreria di gestione dello stato improvvisata senza ricorrere a librerie di terze parti, in genere non è consigliato per ragioni di prestazione.

Il problema con questo approccio è dato dal fatto che il contesto di React fa scattare una ripresentazione (re-rendering) dei componente.

Se stai passando un oggetto sul tuo fornitore di contesto React e una qualunque proprietà in esso si aggiorna, cosa succede? Qualsiasi componente che utilizzi quel contesto verrà ripresentato.

Questo potrebbe non costituire un problema di prestazioni in piccole applicazioni con pochi valori di stato che non sono aggiornati molto spesso (tipo i dati di un tema). Il problema sorge se esegui molti aggiornamenti di stato in un'applicazione con molti componenti nella tua alberatura.

Conclusione

Spero che questa guida ti abbia dato una migliore comprensione di come utilizzare il contesto di React in ogni suo aspetto.

Se approfondire ulteriormente l'utilizzo del contesto di React per creare fantastici progetti React, dai un'occhiata a The React Bootcamp (risorsa in inglese).

Ottimizzare le risorse che utilizzi sui tuoi siti web – come il caricamento lazy delle immagini – è uno dei modi più efficaci per migliorare le prestazioni web.

Facendo ciò ti assicuri che i tuoi siti siano veloci, che abbiano un'ottima SEO e aiuti a migliorare l'esperienza utente.

In quest'articolo, imparerai come caricare immagini tramite lazy loading in una applicazione React. Parleremo di quali sono i vantaggi e di come implementarlo nel tuo codice.

Ma prima di iniziare, cosa vuol dire lazy loading e come funziona?

Così il Lazy Loading?

Il lazy loading è una strategia che ritarda il caricamento di alcune risorse (ad esempio immagini) fino a che non sono necessarie all'utente in base alla sua attività e al pattern di navigazione. Tipicamente, queste risorse vengono caricate soltanto quando lo scorrimento le porta nella vista della pagina. (Fonte: MDN Docs)

Puoi vederne un eccellente esempio su Unsplash quando scorriamo lungo la lista delle immagini. Inizialmente, vediamo delle immagini segnaposto di bassa qualità (LQIP) sfocate e poi, quando scorrono nella vista della pagina, le intere immagini vengono caricate.

L'idea alla base di questo processo è di rimandare il caricamento delle immagini fuori dal viewport per ridurre l'utilizzo di banda, migliorare l'esperienza utente e velocizzare il caricamento della pagina.

Oggi usare il lazy loading per un'immagine o un iframe è facile quanto aggiungere l'attributo loading="lazy" all'interno dell'elemento img/iframe, in questo modo:

<img src="image.jpg" alt="Image Alt" loading="lazy" />
<iframe src="iframe" loading="lazy"></iframe>

E funziona senza ulteriori configurazioni.

Sfortunatamente, secondo caniuse.com, il caricamento lazy delle immagini in questo modo non è supportato da tutti i browser. Inoltre, per browser come Firefox, l'attributo loading= "lazy" non funziona per l'elemento iframe. In questi casi, dovrai usarlo/combinarlo con altre librerie o strumenti.

Come iniziare con Lazy Loading

In questo articolo, utilizzerò una libreria JavaScript React Lazy Load Image Component.
Questa popolare libreria fornisce le funzionalità per presentare immagini e degli effetti che puoi implementare in modo facile e veloce nelle tue applicazioni React.

Il codice di questa demo è disponibile su GitHub qui.

Step 1 – Installa React Lazy Load Image Component

La prima cosa di cui abbiamo bisogno è installare la libreria React lazy load image component usando NPM:

// Yarn
$ yarn add react-lazy-load-image-component

//o NPM
$ npm i --save react-lazy-load-image-component

Step 2 – Importa il componente

Importeremo soltanto la nostra immagine e il componente lazy load, ma puoi usare un URL esterno se preferisci. Nel mio caso, lo sto importando come un componente dalla cartella immagini.

import Image from "../images/bird.jpg";
import { LazyLoadImage } from "react-lazy-load-image-component";

Step 3 – Dichiarare l'immagine

Per iniziare a utilizzarlo, invece di dichiarare le immagini in un tag img, sostituisci questo tag con LazyLoadImage e dichiara l'immagine con un attributo src come faresti normalmente.

Ecco l'aspetto che ha il codice:

import React from "react";
import Image from "../images/bird.jpg";
import { LazyLoadImage } from "react-lazy-load-image-component";

export default function App() {
  return (
    <div>
      <LazyLoadImage src={Image}
        width={600} height={400}
        alt="Image Alt"
      />
     </div>
  );
}

Abbiamo definito esplicitamente la larghezza e l'altezza dell'immagine. Questo aiuta a evitare problemi come il cumulative layout shift (CLS).

Per vedere gli effetti del componente, vai sulla scheda "Rete" dopo aver aperto gli strumenti per sviluppatori usando Ctrl + Shift + J su Windows, o Cmd + Opt + J su Mac. Poi imposta la limitazione su una rete più lenta (3G), disabilita la cache e ricarica la pagina.

Ecco il risultato:

Di default, puoi vedere che l'immagine non si carica sulla schermo perché non è visibile nel viewport. Una volta che inizi a scorrere e l'immagine è nella vista, lazy load viene disabilitato e possiamo vedere l'immagine.

Live Demo

Step 4 – Aggiungi un'immagine segnaposto

Alternativamente, possiamo aggiungere un'anteprima di un'immagine a bassa risoluzione mentre avviene il caricamento della pagina principale. Può essere utile per riempire l'area dell'immagine in modo che gli utenti sappiano che c'è una foto che si sta caricando. Ci riferiamo a questa immagine segnaposto come LQIP (low-quality image placeholder).

Fare ciò non migliora soltanto la pagina, ma dà anche all'utente un'idea dell'aspetto dell'immagine effettiva.

Per ottenere un'immagine di dimensione minore, mi piace usare squoosh.app. Importa l'immagine e sperimenta con la risoluzione e la qualità finché non sei convinto della dimensione.

Altri strumenti per immagini che puoi usare sono:

• Photoshop
• Responsive Breakpoints

Inizialmente, l'immagine era di 288KB, ma l'abbiamo compressa con successo fino a una versione a bassa risoluzione di 2.41KB. Per usare un'immagine segnaposto, aggiungi all'immagine un attributo PlaceholderSrc con l'immagine come valore.

import Image from "../images/bird.jpg";
import PlaceholderImage from "../images/placeholder.jpg";

<LazyLoadImage src={Image}
    width={600} height={400}
    PlaceholderSrc={PlaceholderImage}
    alt="Image Alt"
/>

Come puoi vedere, inizialmente avviene il caricamento dell'immagine segnaposto e, una volta terminato, viene rimpiazzata dell'immagine principale.

Live Demo

Step 5 – Aggiungere una sfocatura

LazyLoadImage fornisce anche un plugin per presentare inizialmente un'immagine sfocata per poi rimuovere la sfocatura a caricamento completato.

In combinazione con l'immagine segnaposto, renderà più bello l'aspetto complessivo, offrendo un output migliore.

Per utilizzare la sfocatura (blur), dobbiamo importare il file CSS che la governa:

import Image from "../images/bird.jpg";
import PlaceholderImage from "../images/placeholder.jpg";
import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';

<LazyLoadImage src={Image}
    width={600} height={400}
    PlaceholderSrc={PlaceholderImage}
    effect="blur"
/>

Live Demo

Perché dovresti usare Lazy Load per le tue immagini?

Potresti chiederti perché dovresti affrontare tutti i problemi del caricare le immagini fuori schermata nelle tua applicazioni web con lazy load. Ne vale la pena? E perché dovresti interessarti dei punti condivisi in questo articolo?

Ecco una lista di ragioni:

1. Lazy Loading risparmia dati e banda

Dato che le immagini fuori dal viewport non sono caricate immediatamente, il lazy loading risparmia l'utilizzo della banda. È favorevole alle prestazioni, soprattutto per gli utenti mobile.

2. Lazy Loading abbassa il costo di un CDN

I servizi di contenuti multimediali come Cloudinary o Imagekit offrono dei piani a pagamento per l'archiviazione multimediale. Caricare le immagini con lazy loading ti assicura che solo le immagini richieste dal CDN siano caricate, riducendo i costi del server.

3. Lazy Loading migliora la SEO

La velocità di una pagina è un fattore critico che influenza la SEO (e rende più probabile che i motori di ricerca suggeriscano la tua pagina). Se il tempo di caricamento della tua pagina è molto basso, i motori di ricerca ameranno il tuo sito.

Conclusione

Ottimizzare le immagini è una buona capacità che credo ogni sviluppatore web debba coltivare. Crea un'esperienza migliore per gli utenti, soprattutto quelli su dispositivi mobili.

Ecco il file del codice di questo articolo su GitHub.

Per ora è tutto, grazie per aver letto questo articolo!

Seguimi su twitter @victorekea.

Risorse

• React Lazy Load Image Component
• Demo

Se hai appena iniziato con React, probabilmente ti stai arrovellando sul concetto di Applicazione a Pagina Singola (Single Page Application).

Tradizionalmente l'instradamento funziona in questo modo: supponiamo che digiti /contact come URL. Il browser eseguirà una richiesta GET al server, il quale restituirà una pagina HTML come risposta.

Tuttavia con il paradigma della Applicazione a Pagina Singola, tutte le richieste via URL sono servite usando il codice lato client.

Applicando questo nel contesto di React, ciascuna pagina sarà un componente React. React-Router cerca una corrispondenza con l'URL e carica il componente per quella particolare pagina.

Tutto accade così velocemente e perfettamente, che l'utente ottiene nel browser la stessa esperienza che avrebbe utilizzando una app nativa. Non ci sono pagine vuote lampeggianti durante la transizione tra le rotte.

In questo articolo, imparerai coma usare React-Router e i suoi componenti per creare una Applicazione a Pagina Singola. Quindi apri il tuo editor preferito e iniziamo.

Impostare il Progetto

Crea un nuovo progetto React eseguendo il seguente comando.

yarn create react-app react-router-demo

Userò yarn per l'installazione delle dipendenze ma puoi usare anche npm.

Ora installiamo react-router-dom.

yarn add react-router-dom

Per lo stile dei componenti userò il framework CSS Bulma, quindi aggiungiamolo.

yarn add bulma

Successivamente, importa bulma.min.css nel file index.js ed elimina tutto il codice boilerplate dal file App.js.

import "bulma/css/bulma.min.css";

Ora che hai il progetto impostato iniziamo a creare alcuni componenti per rappresentare le pagine.

Creare i Componenti di Pagina

Crea una directory pages all'interno della cartella src, dove verranno inseriti tutti i componenti di pagina.

Per questa dimostrazione, crea tre pagine - Home, About, e Profile.

Incolla il seguente codice all'interno dei componenti Home e About.

// pages/Home.js

import React from "react";

const Home = () => (
  <div>
    <h1 className="title is-1">This is the Home Page</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida,
      risus at dapibus aliquet, elit quam scelerisque tortor, nec accumsan eros
      nulla interdum justo. Pellentesque dignissim, sapien et congue rutrum,
      lorem tortor dapibus turpis, sit amet vestibulum eros mi et odio.
    </p>
  </div>
);

export default Home;

// pages/About.js

import React from "react";

const About = () => (
  <div>
    <h1 className="title is-1">This is the About Page</h1>
    <p>
      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
      inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus
      et ultrices posuere cubilia curae; Duis consequat nulla ac ex consequat,
      in efficitur arcu congue. Nam fermentum commodo egestas.
    </p>
  </div>
);

export default About;

Creeremo la pagina Profile successivamente.

Creare il Componente Navbar

Iniziamo creando la barra di navigazione per l'app, la quale utilizzerà il componente <NavLink /> di react-router-dom.

Crea una directory chiamata components all'interno della cartella src.

// components/Navbar.js

import React, { useState } from "react";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  const [isOpen, setOpen] = useState(false);
  return ( 
  	<nav
      className="navbar is-primary"
      role="navigation"
      aria-label="main navigation"
    >
      <div className="container">
      	{/* ... */}
      </div>
    </nav>
  );
 };
 
 export default Navbar;

La variabile di stato isOpen sarà usata per attivare il menu su dispositivi mobili o tablet.

Aggiungiamo quindi il menu "hamburger".

const Navbar = () => {
  const [isOpen, setOpen] = useState(false);
  return ( 
  	<nav
      className="navbar is-primary"
      role="navigation"
      aria-label="main navigation"
    >
      <div className="container">
      <div className="navbar-brand">
          <a
            role="button"
            className={`navbar-burger burger ${isOpen && "is-active"}`}
            aria-label="menu"
            aria-expanded="false"
            onClick={() => setOpen(!isOpen)}
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
      	{/* ... */}
      </div>
    </nav>
  );
 };

Per aggiungere il link al menu utilizza il componente <NavLink /> di react-router-dom.

Il componente NavLink fornisce un modo dichiarativo per navigare nell'applicazione. È simile al componente Link, tranne per il fatto che è possibile applicare uno stile che lo evidenzia se il link è attivo.

Per specificare verso quale rotta navigare, usa la proprietà to assegnandole come valore il nome del percorso.
Nel caso il link sia attualmente attivo, la proprietà activeClassName aggiungerà una classe per evidenziarlo.

<NavLink
    className="navbar-item"
    activeClassName="is-active"
    to="/"
    exact
>
	Home
</NavLink>

Nel browser, il componente NavLink viene presentato come un tag <a> con un valore dell'attributo href corrispondente a quello che è stato passato alla proprietà to .

Inoltre occorre specificare qui la proprietà exact in modo che corrisponda precisamente con l'URL.

Aggiungi tutti i link e termina il componente Navbar.

import React, { useState } from "react";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  const [isOpen, setOpen] = useState(false);
  return (
    <nav
      className="navbar is-primary"
      role="navigation"
      aria-label="main navigation"
    >
      <div className="container">
        <div className="navbar-brand">
          <a
            role="button"
            className={`navbar-burger burger ${isOpen && "is-active"}`}
            aria-label="menu"
            aria-expanded="false"
            onClick={() => setOpen(!isOpen)}
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>

        <div className={`navbar-menu ${isOpen && "is-active"}`}>
          <div className="navbar-start">
            <NavLink className="navbar-item" activeClassName="is-active" to="/">
              Home
            </NavLink>

            <NavLink
              className="navbar-item"
              activeClassName="is-active"
              to="/about"
            >
              About
            </NavLink>

            <NavLink
              className="navbar-item"
              activeClassName="is-active"
              to="/profile"
            >
              Profile
            </NavLink>
          </div>

          <div className="navbar-end">
            <div className="navbar-item">
              <div className="buttons">
                <a className="button is-white">Log in</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;

Se hai notato, qui ho aggiunto un bottone Login. Torneremo sul componente Navbar quando discuteremo le rotte protette successivamente in questo articolo.

Presentare le Pagine

Ora che il componente Navbar è stato impostato aggiungiamolo alla pagina e iniziamo a presentare le pagine.

Visto che la barra di navigazione è un componente comune a tutte le pagine, invece di chiamare il componente in ciascuna di esse, sarà un approccio migliore presentare Navbar secondo un layout comune a tutte le pagine.

// App.js

function App() {
  return (
    <>
      <Navbar />
      <div className="container mt-2" style={{ marginTop: 40 }}>
        {/* Render the page here */}
      </div>
    </>
  );
}

Ora aggiungi i componenti di pagina all'interno del contenitore.

// App.js

function App() {
  return (
    <>
      <Navbar />
      <div className="container mt-2" style={{ marginTop: 40 }}>
        <Home />
      	<About />
      </div>
    </>
  );
}

Se controlli il risultato adesso, noterai che i componenti di pagina Home e About sono presentati entrambi all'interno della pagina. Questo perché non abbiamo ancora aggiunto alcuna logica di instradamento.

Per aggiungere la capacità di navigare tra i componenti devi importare il componente di React Router BrowserRouter. Tutto quello che devi fare è racchiudere tutti i componenti di pagina all'interno del componente BrowserRouter. Questo consentirà a tutti i componenti di pagina di avere una logica di instradamento. Perfetto!

Ma ancora una volta, nulla cambia per quanto riguarda il risultato – vedrai ancora entrambe le pagine presentate. Dovrai presentare il componente di pagina solo se l'URL corrisponde a un particolare percorso. È qui che entra in gioco il componente di React Router Route.

Il componente Route ha una proprietà path che accetta il percorso della pagina e il componente di pagina dovrebbe essere inserito all'interno di Route, come mostrato qui sotto.

<Route path="/about">
  <About />
</Route>

Facciamo lo stesso per il componente Home .

<Route exact path="/">
  <Home />
</Route>

La proprietà exact qui sopra dice al componente Route di cercare corrispondenza esatta per il percorso. Senza aggiungere la proprietà exact al percorso /, ci sarebbe corrispondenza con tutte le rotte che iniziano con / compreso /about.

Se adesso verifichi i risultati, vedrai ancora presentati entrambi i componenti, ma se vai su /about, noterai che solo il componente About viene presentato. Questo comportamento si verifica in quanto il router continua a cercare corrispondenza dell'URL con le rotte anche dopo che ne ha già trovata una.

Dobbiamo dire al router di interrompere la ricerca di corrispondenza una volta che ha trovato una rotta che corrisponde. Questo si ottiene usando il componente Switch di React Router.

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <div className="container mt-2" style={{ marginTop: 40 }}>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

Ed ecco fatto! Hai configurato con successo l'instradamento nella tua app React.

Rotte Protette e Redirezione

Lavorando su applicazioni per il mondo reale, ci saranno alcune rotte che sono dipendenti da un sistema di autenticazione. Avrai rotte o pagine che saranno accessibili solamente da un utente connesso. In questa sezione, imparerai come implementare queste rotte.

Per favore nota che non andrò a creare alcun form di accesso o un qualsiasi servizio back-end per autenticare l'utente. In una applicazione reale, non implementeresti l'autenticazione nel modo qui mostrato.

Creiamo il componente di pagina Profile al quale dovrebbe avere accesso solo un utente autenticato.

// pages/Profile.js

import { useParams } from "react-router-dom";

const Profile = () => {
  const { name } = useParams();
  return (
    <div>
      <h1 className="title is-1">This is the Profile Page</h1>
      <article className="message is-dark" style={{ marginTop: 40 }}>
        <div className="message-header">
          <p>{name}</p>
        </div>
        <div className="message-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "}
          <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
          nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida
          purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac{" "}
          <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
          sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi
          magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales
          sem.
        </div>
      </article>
    </div>
  );
};

Utilizzando i parametri di rotta recupereremo dall'URL il nome utente.

Aggiungi la rotta Profile all'interno del router.

<Route path="/profile/:name">
  <Profile />
</Route>

Attualmente si può accedere direttamente alla pagina Profile. Facciamo in modo che sia una rotta autenticata creando un componente di livello più alto (Higher-Order component - HOC) per incapsulare la logica di autenticazione.

const withAuth = (Component) => {
  const AuthRoute = () => {
    const isAuth = !!localStorage.getItem("token");
    // ...
  };

  return AuthRoute;
};

Per determinare se un utente sia o meno autenticato, recupera il token di autenticazione che è conservato nel browser quando l'utente si connette. Se l'utente non è autenticato, reindirizza l'utente alla pagina Home. Il componente di React Router Redirect può essere usato per reindirizzare l'utente verso un altro percorso.

const withAuth = (Component) => {
  const AuthRoute = () => {
    const isAuth = !!localStorage.getItem("token");
    if (isAuth) {
      return <Component />;
    } else {
      return <Redirect to="/" />;
    }
  };

  return AuthRoute;
};

Puoi anche passare altre informazioni sull'utente come il nome e il suo ID passandole come proprietà verso il componente incapsulato.

Successivamente usa l'HOC withAuth nel componente Profile.

import withAuth from "../components/withAuth";

const Profile = () => {
 // ...
}

export default withAuth(Profile);

Ora se provi a visitare /profile/JohnDoe, sarai reindirizzato alla pagina Home. Questo perché il token di autenticazione non è ancora stato impostato e conservato nel browser.

Bene, torniamo al componente Navbar e aggiungiamo le funzionalità di connessione e disconnessione. Quando l'utente è autenticato viene mostrato il pulsante Logout per disconnettersi e quando l'utente non è ancora connesso viene mostrato il pulsante Login per connettersi.

// components/Navbar.js

const Navbar = () => {
	// ...
    return (
    	<nav
          className="navbar is-primary"
          role="navigation"
          aria-label="main navigation"
        >
        <div className="container">
        	{/* ... */}
            <div className="navbar-end">
            <div className="navbar-item">
              <div className="buttons">
                {!isAuth ? (
                  <button className="button is-white" onClick={loginUser}>
                    Log in
                  </button>
                ) : (
                  <button className="button is-black" onClick={logoutUser}>
                    Log out
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
        </nav>
    );
}

Quando l'utente fa click sul pulsante Login, imposta un token fittizio nel localStorage e reindirizza l'utente alla pagina Profile.

In questo caso, tuttavia, non possiamo usare il componente Redirect – dobbiamo reindirizzare l'utente programmaticamente. Dato che il token per l'autenticazione costituisce un dato sensibile, in genere è conservato in un cookie per ragioni di sicurezza.

React Router ha un componente HOC withRouter che inserisce l'oggetto history nelle proprietà del componente per sfruttare l'API History. Passa anche al componente incapsulato le proprietà match e location aggiornate.

// components/Navbar.js

import { NavLink, withRouter } from "react-router-dom";

const Navbar = ({ history }) => { 
  const isAuth = !!localStorage.getItem("token");

  const loginUser = () => {
    localStorage.setItem("token", "some-login-token");
    history.push("/profile/Vijit");
  };

  const logoutUser = () => {
    localStorage.removeItem("token");
    history.push("/");
  };
  
  return ( 
   {/* ... */}
  );
};

export default withRouter(Navbar);

E voilà! Questo è tutto. Hai conquistato anche la terra delle rotte autenticate.

Puoi trovare la dimostrazione live qui e il codice completo in questo repository come riferimento.

Conclusione

Spero che ormai ti sia fatto una buona idea di come funziona l'instradamento lato client in generale e come implementarlo in React usando la libreria React Router.

In questa guida, hai imparato a conoscere i componenti vitali di React Router quali Route, withRouter, Link e così via, assieme ad alcuni concetti avanzati come le rotte autenticate, che sono richieste per costruire un'applicazione.

Consulta la documentazione di  React Router per ottenere una panoramica più dettagliata di ciascuno dei componenti.

Un front end React collegato a un back end Node è una combinazione solida per realizzare qualsiasi applicazione.

Questa guida è stata pensata per aiutarti a creare progetti full-stack con React nel modo più semplice possibile.

Vediamo come impostare da zero un intero progetto con React e Node e come distribuirlo sul web.

Strumenti necessari

1. Assicurati che Node e NPM siano installati sul tuo computer. Puoi scaricarli entrambi da nodejs.org (NPM è incluso nell'installazione di Node)
2. Utilizza un editor di codice di tua scelta. Io sto usando e personalmente consiglio di usare VSCode. È possibile scaricare VSCode all'indirizzo code.visualstudio.com.
3. Assicurati di avere Git installato sul computer. Questo è necessario per distribuire la nostra applicazione con Heroku. È possibile ottenerlo all'indirizzo git-scm.com
4. Un account su heroku.com. Utilizzeremo Heroku per pubblicare la nostra applicazione sul web in modo completamente gratuito.

Nota: dal 28 Novembre 2022 il servizio gratuito di Heroku non sarà più disponibile.

Passo 1: Creare il back end Node (Express)

Per prima cosa, crea una cartella per il progetto chiamata react-node-app (per esempio).

Quindi, trascina la cartella nell'editor di codice.

Per creare il nostro progetto Node, esegui il seguente comando nel terminale:

npm init -y

Questo creerà un file package.json che ci permetterà di tenere traccia di tutti gli script dell'applicazione e di gestire le dipendenze di cui l'applicazione Node ha bisogno.

Il nostro codice server si troverà in una cartella con lo stesso nome: server. Creiamo questa cartella.

Al suo interno, collocheremo un singolo file, dal quale faremo partire il nostro server: index.js.

Utilizzeremo il framework Express per creare un semplice web server, che verrà eseguito sulla porta 3001 se non specificato alcun valore per la variabile d'ambiente PORT (Heroku imposterà questo valore quando distribuiremo la nostra applicazione).

// server/index.js

const express = require("express");

const PORT = process.env.PORT || 3001;

const app = express();

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Successivamente, installeremo Express come dipendenza eseguendo nel nostro terminale:

npm i express

Dopodiché, creeremo uno script in package.json che avvierà il nostro server web quando eseguiremo il comando npm start:

// server/package.json

...
"scripts": {
  "start": "node server/index.js"
},
...

Finalmente possiamo eseguire la nostra applicazione utilizzando questo script eseguendo npm start nel nostro terminale e dovremmo vedere che è in esecuzione sulla porta 3001:

npm start

> node server/index.js

Server listening on 3001

Passo 2: Creare un endpoint API

Vogliamo utilizzare il nostro server Node con Express come un'API, in modo che possa fornire dati alla nostra applicazione React, modificarli o eseguire altre operazioni che solo un server può fare.

Nel nostro caso, invieremo semplicemente un messaggio alla nostra applicazione React che dice "Hello from server!" in un oggetto JSON.

Il codice sottostante crea un endpoint per la rotta /api.

Se la nostra applicazione React effettua una richiesta GET a tale rotta, risponderemo (usando res, che sta per response) con il nostro dato in formato JSON:

// server/index.js
...

app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Nota: assicurati di posizionare questa funzione al di sopra della funzione app.listen.

Poiché abbiamo apportato delle modifiche al codice Node, dobbiamo riavviare il nostro server.

Per farlo, devi terminare lo script di avvio nel terminale premendo Command/Ctrl + C. Quindi devi riavviare eseguendo nuovamente npm start.

Per verificarlo, possiamo semplicemente visitare http://localhost:3001/api nel nostro browser e visualizzare il nostro messaggio:

Passo 3: Creare il front end React

Dopo aver creato il back end, passiamo al front end.

Apriamo un'altra scheda di terminale e usiamo create-react-app per creare un nuovo progetto React con il nome client:

npx create-react-app client

Dopo di che, avremo un'applicazione React con tutte le sue dipendenze installate.

L'unica modifica da fare è aggiungere una proprietà chiamata proxy al nostro file package.json.

Questo ci permetterà di fare richieste al nostro server Node senza dover fornire l'origine su cui è in esecuzione (http://localhost:3001) ogni volta che facciamo una richiesta di rete:

// client/package.json

...
"proxy": "http://localhost:3001",
...

Quindi possiamo avviare la nostra applicazione React eseguendo il suo script di avvio, che è lo stesso del nostro server Node. Per prima cosa assicuriamoci di fare un cd nella cartella client appena creata.

Dopodiché, si avvierà su localhost:3000:

cd client
npm start

Compiled successfully!

You can now view client in the browser.

Local:            http://localhost:3000

Passo 4: Effettuare richieste HTTP da React a Node

Ora che abbiamo un'applicazione React funzionante, vogliamo usarla per interagire con la nostra API.

Vediamo come recuperare i dati dall'endpoint /api che abbiamo creato in precedenza.

Per farlo, possiamo andare dal nostro componente App.js nella cartella src e fare una richiesta HTTP usando useEffect.

Faremo una semplice richiesta GET, utilizzando l'API Fetch, al nostro back end e ci verranno restituiti i dati in formato JSON.

Una volta che i dati ci saranno restituiti, otterremo la proprietà message (per avere il saluto che abbiamo inviato dal server) e la metteremo in una variabile di stato chiamata data.

Questo ci consentirà di visualizzare il messaggio nella nostra pagina, se presente. Utilizziamo una condizione nel JSX per dire che se i nostri dati non sono ancora presenti, deve essere mostrato il testo "Loading...".

// client/src/App.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}

export default App;

Passo 5: Distribuire la app sul web utilizzando Heroku

Infine, distribuiremo la nostra applicazione sul web.

Per prima cosa, all'interno della nostra cartella client, assicuriamoci di rimuovere il repository Git che viene inizializzato automaticamente da create-react-app.

Questo è essenziale per distribuire la nostra applicazione, perché inizializzeremo un repository Git nella cartella principale del nostro progetto (react-node-app), non nel client:

cd client
rm -rf .git

Al momento del deployment, sia il back end Node che il front end React saranno serviti sullo stesso dominio (cioè mycoolapp.herokuapp.com).

Vediamo come saranno gestite le nostre richieste  dall'API di Node. Il nostro scopo è quello di visualizzare l'applicazione React quando viene richiesta dall'utente (per esempio, quando si va alla home page della nostra applicazione).

Possiamo farlo aggiungendo al file server/index.js il seguente codice:

// server/index.js
const path = require('path');
const express = require('express');

...

// Chiede a Node di servire i file per la nostra applicazione React
app.use(express.static(path.resolve(__dirname, '../client/build')));

// gestisce richieste GET per la rotta /api
app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

// Tutte le altre richieste di tipo GET non gestite dal metodo precedente, restituiranno l'applicazione REACT
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});

Questo codice permetterà a Node di accedere al nostro progetto React di cui si è effettuato precedentemente un build, utilizzando la funzione express.static per i file statici.

Se arriva una richiesta GET che non è gestita dalla rotta /api route, il server risponderà con la nostra applicazione React.

Questo codice consente alle nostre applicazioni React e Node di essere distribuite insieme sullo stesso dominio.

Possiamo comunicare alla nostra applicazione Node come farlo aggiungendo uno script di compilazione build al file package.json del server, che costruisce la nostra applicazione React per la produzione:

// server/package.json

...
"scripts": {
    "start": "node server/index.js",
    "build": "cd client && npm install && npm run build"
  },
...

Consiglio anche di aggiungere un ulteriore campo chiamato "engines", in cui specificare la versione di Node che stiamo usando per costruire il progetto. Questa sarà usata per la distribuzione.

È possibile ottenere la versione di Node eseguendo node -v e inserire il risultato in "engines". (ad esempio 14.15.4):

// server/package.json

"engines": {
  "node": "la-tua-versione-di-node"
}

Dopo di che, siamo pronti a eseguire il deployment utilizzando Heroku. Assicuriamoci di avere un account su Heroku.com.

Una volta effettuato l'accesso e visualizzata la dashboard, dovremo selezionare New > Create New App e fornire un nome univoco all'applicazione.

Una volta fatto ciò, dovremo installare la Heroku CLI sul nostro computer, in modo da poter distribuire l'applicazione ogni volta che apportiamo modifiche utilizzando Git. È possibile installare la CLI eseguendo:

npm i -g heroku

Una volta installata, dobbiamo accedere a Heroku tramite la CLI utilizzando il comando heroku login:

heroku login

Press any key to login to Heroku

Una volta effettuato l'accesso, è sufficiente seguire le istruzioni di distribuzione per l'applicazione creata nella scheda "Deploy".

Con i quattro comandi seguenti, inizializzeremo un nuovo repository Git per il nostro progetto, vi aggiungeremo dei file, ne faremo il commit e inseriremo una destinazione remota Git per Heroku.

git init
heroku git:remote -a insert-your-app-name-here
git add .
git commit -am "Deploy app to Heroku"

L'ultimo passo consiste nel pubblicare la nostra applicazione, effettuando il push del commit sul Git di Heroku appena aggiunto:

git push heroku master

Congratulazioni! La nostra applicazione full-stack React e Node è in funzione! 🎉

Quando desideri apportare modifiche all'applicazione (e distribuirle), è sufficiente utilizzare Git per aggiungere i file, eseguire il commit e quindi eseguire il push sul nostro sito Heroku:

git add .
git commit -m "my commit message"
git push heroku master

Grazie per aver letto questo articolo!

Buona programmazione.

Spesso ci troviamo a lavorare con applicazioni web che devono recuperare grandi quantità di dati da un server tramite API e presentarli sullo schermo.

Ad esempio, in un'applicazione per un social media si recuperano e si presentano i post e i commenti degli utenti. In una dashboard per la gestione delle risorse umane si visualizzano informazioni sui candidati che fanno domanda per un posto di lavoro. In un Client Email si mostrano le mail dell'utente.

Presentare questi dati tutti in una volta sullo schermo potrebbe causare un considerevole rallentamento nel caricamento della pagina web, a causa del gran numero di elementi DOM presenti nella pagina stessa.

Se vuoi ottimizzare le prestazioni, è possibile adottare varie tecniche per presentare i dati in modo più efficiente. Alcuni di questi metodi includono lo scorrimento infinito con virtualizzazione e la paginazione.

La paginazione funziona bene quando la dimensione dei dati è nota in anticipo e non si devono fare frequenti aggiunte o cancellazioni all'insieme di dati.

Ad esempio, in un sito web di social media dove i nuovi post sono pubblicati ogni pochi millisecondi, la paginazione non sarebbe la soluzione ideale. Tuttavia andrebbe bene per una dashboard per la gestione delle risorse umane, dove sono visualizzate le domande dei candidati e devono essere anche ordinate o filtrate.

In questo articolo, ci focalizzeremo sulla paginazione e costruiremo un componente controllato personalizzato che gestisce i pulsanti della pagina in base alla pagina corrente e al conteggio totale dei dati.

Scriveremo anche un hook React personalizzato che fornisce un intervallo di numeri renderizzato dal componente di paginazione. Potremo usare questo hook indipendentemente, così come quando vogliamo presentare un componente di paginazione con stili diversi o in una diversa progettazione.

Di seguito, una dimostrazione di quello che realizzeremo in questo tutorial:

Come Impostare il Progetto

Se hai familiarità con l'impostazione di un progetto React puoi saltare questa sezione.

Per impostare il progetto React useremo il pacchetto da riga di comando create-react-app. Puoi installare il pacchetto globalmente usando npm install -g create-react-app oppure yarn add global create-react-app.

Esegui create-react-app dalla riga di comando per creare un nuovo progetto, in questo modo:

npx create-react-app react-pagination

Successivamente, devi installare le dipendenze. Useremo una semplice dipendenza addizionale, chiamata classnames, che fornisce flessibilità nella gestione condizionale di valori multipli per l'attributo className.

Per installare il pacchetto, esegui npm install classnames oppure yarn add classnames.

Ora è possibile eseguire il progetto con il comando:

yarn start

oppure con il comando:

npm start

Come Definire l'Interfaccia

Ora che il progetto è in esecuzione, passeremo direttamente al componente di paginazione Pagination.

Prima di tutto, vediamo quali valori servono come props per il componente Pagination:

• totalCount: rappresenta il conteggio totale dei dati disponibili dalla sorgente.
• currentPage: rappresenta la pagina attiva corrente. Useremo un indice a base 1 invece del tradizionale indice a base 0 per il valore di currentPage.
• pageSize: rappresenta il massimo dei dati visibili in una singola pagina.
• onPageChange: funzione callback chiamata con il valore della pagina aggiornato quando la pagina viene cambiata.
• siblingCount (opzionale): rappresenta il numero minimo di bottoni di pagina da mostrare su ciascun lato del bottone della pagina corrente. Valore predefinito: 1.

• className (opzionale): nome di classe da aggiungere al contenitore di livello superiore.

Dal componente di paginazione chiameremo l'hook usePagination che riceverà i seguenti parametri per calcolare gli intervalli di pagina: totalCount, currentPage, pageSize, siblingCount.

Come Implementare l'hook usePagination

Qui sotto ci sono alcune cose che occorre tenere a mente durante l'implementazione dell'hook usePagination:

• L'hook di paginazione deve restituire l'intervallo di numeri da visualizzare nel componente di paginazione come un array.
• La logica di calcolo deve essere rieseguita ogniqualvolta i valori di currentPage, pageSize, siblingCount ototalCount cambiano.
• Il numero totale di elementi restituiti dall'hook dovrebbe rimanere costante. Questo eviterà il ridimensionamento del componente di paginazione se la lunghezza dell'array dell'intervallo cambia mentre l'utente sta interagendo con il componente.

Tenendo conto di quanto sopra, creiamo un file chiamato usePagination.js nella cartella src del progetto e iniziamo con l'implementazione.

Il codice di base è il seguente:

export const usePagination = ({
  totalCount,
  pageSize,
  siblingCount = 1,
  currentPage
}) => {
  const paginationRange = useMemo(() => {
     // La logica di implementazione andrà qui 
      
  }, [totalCount, pageSize, siblingCount, currentPage]);

  return paginationRange;
};

Se guardiamo il codice qui sopra, possiamo notare l'utilizzo dell'hook useMemo per calcolare la logica fondamentale. Il callback useMemo verrà eseguito quando cambia un qualunque valore nell'array di dipendenze.

Inoltre, impostiamo 1 come valore predefinito per la prop siblingCount come prop opzionale.

Prima di proseguire con l'implementazione della logica del codice, cerchiamo di comprendere i diversi comportamenti del componente Pagination. L'immagine qui sotto contiene gli stati possibili del componente di paginazione:

Nota che ci sono quattro stati possibili per il componente, che verranno analizzati uno per uno.

• Il conteggio di pagine totale è minore delle icone di pagina che si vogliono mostrare. In questo caso si ritorna l'intervallo da 1 a totalPageCount.
• Il conteggio di pagine totale è maggiore delle icone di pagina ma sono visibili solo i puntini a destra.
• Il conteggio di pagine totale è maggiore delle icone di pagina ma sono visibili solo i puntini a sinistra.
• Il conteggio di pagine totale è maggiore delle icone di pagina e sono visibili i puntini su entrambi i lati.

Come primo passo dobbiamo calcolare il numero totale di pagine da totalCount e pageSize, in questo modo:

const totalPageCount = Math.ceil(totalCount / pageSize);

Nota che stiamo usando Math.ceil per arrotondare il numero alla cifra più vicina al prossimo valore intero più alto. Questo assicura che venga riservata una pagina extra per  i dati rimanenti.

Successivamente, proseguiamo implementando una funzione personalizzata range, che riceve un valore  start e un valore end e restituisce un array con gli elementi da start (inizio) fino a end (fine):

const range = (start, end) => {
  let length = end - start + 1;
  /*
  	Crea un array di una certa lunghezza e imposta gli elementi all'interno dal valore di start al valore di end.
  */
  return Array.from({ length }, (_, idx) => idx + start);
};

Infine, implementeremo la logica fondamentale tenendo a mente i casi sopra citati.

n.d.t: per la comprensione del codice che segue, per DOTS si indende una costante definita ed esportata dall'hook usePagination, ed è una stringa che rappresenta 3 puntini.

export const usePagination = ({
  totalCount,
  pageSize,
  siblingCount = 1,
  currentPage
}) => {
  const paginationRange = useMemo(() => {
    const totalPageCount = Math.ceil(totalCount / pageSize);

    // Il conteggio delle pagine è determinato come siblingCount + firstPage + lastPage + currentPage + 2*DOTS
    const totalPageNumbers = siblingCount + 5;

    /*
      Caso 1:
      Se il numero di pagine è minore del numero da mostrare nel componente, restituiamo l'intervallo [1..totalPageCount]
    */
    if (totalPageNumbers >= totalPageCount) {
      return range(1, totalPageCount);
    }
	
    /*
    	Calcola gli indici di destra e sinistra e si assicura che siano all'interno dell'intervallo 1 e totalPageCount
    */
    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
    const rightSiblingIndex = Math.min(
      currentPage + siblingCount,
      totalPageCount
    );

    /*
      Non mostriamo i puntini quando c'è un solo numero di pagina da inserire
      tra le estremità degli indici e i limiti di pagina, vale a dire 1 e totalPageCount.
      Quindi stiamo usando  leftSiblingIndex > 2 e rightSiblingIndex < totalPageCount - 2
    */
    const shouldShowLeftDots = leftSiblingIndex > 2;
    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;

    const firstPageIndex = 1;
    const lastPageIndex = totalPageCount;

    /*
    	Caso 2: Non ci sono puntini a sinistra da mostrare ma 
        quelli a destra devono essere mostrati
    */
    if (!shouldShowLeftDots && shouldShowRightDots) {
      let leftItemCount = 3 + 2 * siblingCount;
      let leftRange = range(1, leftItemCount);

      return [...leftRange, DOTS, totalPageCount];
    }

    /*
    	Caso 3: Non ci sono puntini a destra da mostrare ma 
        quelli a sinistra devono essere mostrati
    */
    if (shouldShowLeftDots && !shouldShowRightDots) {
      
      let rightItemCount = 3 + 2 * siblingCount;
      let rightRange = range(
        totalPageCount - rightItemCount + 1,
        totalPageCount
      );
      return [firstPageIndex, DOTS, ...rightRange];
    }
     
    /*
    	Caso 4: Sia i puntini a destra che quelli a sinistra 
        sono da mostrare
    */
    if (shouldShowLeftDots && shouldShowRightDots) {
      let middleRange = range(leftSiblingIndex, rightSiblingIndex);
      return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
    }
  }, [totalCount, pageSize, siblingCount, currentPage]);

  return paginationRange;
};

L'idea dell'implementazione è che identifichiamo l'intervallo di numeri da mostrare nel componente, per poi unirli ai separatori o puntini, quando viene restituito l'intervallo finale.

Per il primo scenario dove  totalPageCount è minore del numero totale di icone, calcolato in base agli altri parametri, restituiamo semplicemente un intervallo di numeri  1..totalPageCount .

Per gli altri scenari, occorre identificare se servono i puntini alla sinistra o alla destra di currentPage calcolando gli indici di destra e sinistra dopo avere incluso le icone sorelle a currentPage e quindi prendere le decisioni.

Una volta che sappiamo dove vogliamo mostrare i puntini, il resto dei calcoli è piuttosto semplice.

Come Implementare il Componente Pagination

Come detto in precedenza, useremo l'hook usePagination nel componente di paginazione e verrà usato nell'interazione sull'intervallo restituito per presentarlo.

Creiamo un file Pagination.js nella cartella src e implementiamo la logica del codice in questo modo:

import React from 'react';
import classnames from 'classnames';
import { usePagination, DOTS } from './usePagination';
import './pagination.scss';
const Pagination = props => {
  const {
    onPageChange,
    totalCount,
    siblingCount = 1,
    currentPage,
    pageSize,
    className
  } = props;

  const paginationRange = usePagination({
    currentPage,
    totalCount,
    siblingCount,
    pageSize
  });

  // Se l'intervallo di paginazione è minore di due il componente non viene presentato
  if (currentPage === 0 || paginationRange.length < 2) {
    return null;
  }

  const onNext = () => {
    onPageChange(currentPage + 1);
  };

  const onPrevious = () => {
    onPageChange(currentPage - 1);
  };

  let lastPage = paginationRange[paginationRange.length - 1];
  return (
    <ul
      className={classnames('pagination-container', { [className]: className })}
    >
       {/* Freccia di navigazione sinistra */}
      <li
        className={classnames('pagination-item', {
          disabled: currentPage === 1
        })}
        onClick={onPrevious}
      >
        <div className="arrow left" />
      </li>
      {paginationRange.map(pageNumber => {
         
        // Se  pageItem è DOTS si presenta il carattere unicode per i puntini
        if (pageNumber === DOTS) {
          return <li className="pagination-item dots">&#8230;</li>;
        }
		
        // Presenta le pillole di pagina
        return (
          <li
            className={classnames('pagination-item', {
              selected: pageNumber === currentPage
            })}
            onClick={() => onPageChange(pageNumber)}
          >
            {pageNumber}
          </li>
        );
      })}
      {/*  Freccia di navigazione destra */}
      <li
        className={classnames('pagination-item', {
          disabled: currentPage === lastPage
        })}
        onClick={onNext}
      >
        <div className="arrow right" />
      </li>
    </ul>
  );
};

export default Pagination;

Non presentiamo il componente Pagination se ci sono meno di due pagine (quindi restituiamo null).

Il componente  Pagination viene presentato come una lista con le frecce destra e sinistra che gestiscono le azioni di spostamento in avanti o indietro compiute dall'utente. Tra le frecce stabiliamo una corrispondenza attraverso paginationRange e presentiamo i numeri di pagina come pagination-items. Se l'elemento della pagina è DOTS, viene presentato il carattere unicode corrispondente ai puntini di sospensione.

Come gestione speciale, aggiungiamo una classe disabled alle frecce sinistra/destra per renderle inattive se currentPage è rispettivamente la prima o l'ultima pagina. Disabilitiamo pointer-events e aggiorniamo gli stili delle icone di freccia tramite CSS se l'icona deve essere disabilitata.

Vengono anche aggiunti gestori di evento click alle pillole di pagina che chiameranno la funzione callback onPageChanged con il valore aggiornato di  currentPage.

Il file CSS conterrà i seguenti stili:

.pagination-container {
  display: flex;
  list-style-type: none;

  .pagination-item {
    padding: 0 12px;
    height: 32px;
    text-align: center;
    margin: auto 4px;
    color: rgba(0, 0, 0, 0.87);
    display: flex;
    box-sizing: border-box;
    align-items: center;
    letter-spacing: 0.01071em;
    border-radius: 16px;
    line-height: 1.43;
    font-size: 13px;
    min-width: 32px;

    &.dots:hover {
      background-color: transparent;
      cursor: default;
    }
    &:hover {
      background-color: rgba(0, 0, 0, 0.04);
      cursor: pointer;
    }

    &.selected {
      background-color: rgba(0, 0, 0, 0.08);
    }

    .arrow {
      &::before {
        position: relative;
        /* top: 3pt; Togliere il commento per abbassare le icone come richiesto nei commenti*/
        content: '';
        /* Usando una scala em, le dimensione delle frecce sarà relativa a quella del font*/
        display: inline-block;
        width: 0.4em;
        height: 0.4em;
        border-right: 0.12em solid rgba(0, 0, 0, 0.87);
        border-top: 0.12em solid rgba(0, 0, 0, 0.87);
      }

      &.left {
        transform: rotate(-135deg) translate(-50%);
      }

      &.right {
        transform: rotate(45deg);
      }
    }

    &.disabled {
      pointer-events: none;

      .arrow::before {
        border-right: 0.12em solid rgba(0, 0, 0, 0.43);
        border-top: 0.12em solid rgba(0, 0, 0, 0.43);
      }

      &:hover {
        background-color: transparent;
        cursor: default;
      }
    }
  }
}

Questo è tutto!

L'implementazione di paginazione generica è pronta e possiamo usarla in qualunque parte del nostro codebase.

Come Usare il Componente di Paginazione Personalizzato

Come ultimo passo, incorporiamo il componente in un piccolo esempio.

Per lo scopo di questo articolo, presenteremo dati statici in forma di tabella. Quindi per prima cosa scriviamo:

import React from 'react';
import data from './data/mock-data.json';

export default function App() {
  return (
    <>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>FIRST NAME</th>
            <th>LAST NAME</th>
            <th>EMAIL</th>
            <th>PHONE</th>
          </tr>
        </thead>
        <tbody>
          {data.map(item => {
            return (
              <tr>
                <td>{item.id}</td>
                <td>{item.first_name}</td>
                <td>{item.last_name}</td>
                <td>{item.email}</td>
                <td>{item.phone}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </>
  );
}

A questo punto l'interfaccia utente si presenta come segue:

Ora occorrono due cose per incorporare il componente  Pagination.

• Primo, manteniamo uno stato currentPage.
• Secondo, calcoliamo i dati da presentare per una data pagina, ci iteriamo su per poi presentarli.

Per lo scopo di questa dimostrazione, manteniamo PageSize costante impostandone il valore a 10. Possiamo anche fornire un selettore per l'utente in modo che possa selezionare la dimensione della pagina desiderata.

Una volta effettuate le modifiche, possiamo proseguire con la presentazione del componente Pagination con le props appropriate.

Con queste modifiche in mente, il codice finale sarà questo:

import React, { useState, useMemo } from 'react';
import Pagination from '../Pagination';
import data from './data/mock-data.json';
import './style.scss';

let PageSize = 10;

export default function App() {
  const [currentPage, setCurrentPage] = useState(1);

  const currentTableData = useMemo(() => {
    const firstPageIndex = (currentPage - 1) * PageSize;
    const lastPageIndex = firstPageIndex + PageSize;
    return data.slice(firstPageIndex, lastPageIndex);
  }, [currentPage]);

  return (
    <>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>FIRST NAME</th>
            <th>LAST NAME</th>
            <th>EMAIL</th>
            <th>PHONE</th>
          </tr>
        </thead>
        <tbody>
          {currentTableData.map(item => {
            return (
              <tr>
                <td>{item.id}</td>
                <td>{item.first_name}</td>
                <td>{item.last_name}</td>
                <td>{item.email}</td>
                <td>{item.phone}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
      <Pagination
        className="pagination-bar"
        currentPage={currentPage}
        totalCount={data.length}
        pageSize={PageSize}
        onPageChange={page => setCurrentPage(page)}
      />
    </>
  );
}

Ecco la dimostrazione dal vivo di questo tutorial:

Conclusione

In questo articolo abbiamo creato un hook personalizzato usePagination e lo abbiamo usato all'interno del componente Pagination. Abbiamo anche implementato una breve dimostrazione che fa uso di questo componente.

Puoi vedere l'intero codice sorgente per questo tutorial in questo repository GitHub.

Grazie per aver letto questo articolo.

Ciao a tutti! Molte parole sono già state spese a proposito di argomenti relativamente facili come "Fare X in React" o "Usare React con la tecnologia X".

In questo articolo, invece, voglio parlare delle esperienze che ho avuto costruendo front end da zero presso Delightchat e precedentemente in altre aziende.

Questi progetti richiedono una comprensione più profonda di React e un prolungato utilizzo in un contesto di produzione.

Introduzione

In breve, un progetto React complesso dovrebbe essere strutturato in questo modo. Sebbene io utilizzi NextJS in produzione, questa struttura di file dovrebbe essere abbastanza utile in qualsiasi impostazione di React.

src
|---adapters
|---contexts
|---components
|---styles
|---pages

Nota: nella struttura di file qui sopra, le risorse o i file statici dovrebbero essere inseriti in una qualunque variante della cartella public per il proprio framework.

Passiamo a esaminare le cartelle qui sopra in ordine.

1. Adattatori

Gli adattatori (adapter) sono i connettori di una applicazione con il mondo esterno. Qualsiasi forma di chiamata API o interazione websocket necessaria per condividere dati con un servizio esterno o un client dovrebbe verificarsi all'interno dell'adattatore stesso.

Ci sono casi in cui alcuni dati sono sempre condivisi tra tutti gli adattatori – ad esempio, la condivisione di cookie, URL base e header su tutti gli adattatori AJAX (XHR). Questi possono essere inizializzati nella cartella xhr, quindi importati all'interno di altri adattatori da usare successivamente.

La struttura avrà questo aspetto:

adapters
|---xhr
|---page1Adapter
|---page2Adapter

Nel caso di axios, puoi usare axios.create per creare un adattatore base ed esportare questa istanza inizializzata, oppure creare funzioni diverse per get, post, patch e delete per una ulteriore astrazione. Qualcosa di questo tipo:

// adapters/xhr/index.tsx

import Axios from "axios";

function returnAxiosInstance() {
  return Axios.create(initializers);
}

export function get(url){
  const axios = returnAxiosInstance();
  return axios.get(url);
}

export function post(url, requestData){
  const axios = returnAxiosInstance();
  return axios.post(url, requestData);
}

... e così via ...

Dopo che il file di base (o i file) è pronto, crea un file adattatore separato per ciascuna pagina, o ciascun insieme di funzionalità, a seconda della complessità dell'applicazione. Una funzione con un nome descrittivo rende molto facile comprendere ciò che fa ciascuna chiamata API e quello che dovrebbe ottenere.

// adapters/page1Adapter/index.tsx

import { get, post } from "adapters/xhr";
import socket from "socketio";

// funzioni con nome descrittivo
export function getData(){
  return get(someUrl);
}

export function setData(requestData){
  return post(someUrl, requestData);
}

... e così via ...

In che modo gli adattatori possono essere utili? Scopriamolo nella prossima sezione.

2. Componenti

Sebbene in questa sezione dovremmo parlare dei contesti, vorrei parlare prima dei componenti. Questo per capire il motivo per cui è richiesto (e necessario) un contesto in applicazioni complesse.

I componenti (component) sono la linfa vitale di un'applicazione. Gestiscono l'interfaccia utente (UI) dell'applicazione e possono talvolta contenere la logica di business e anche qualsiasi stato che debba essere mantenuto.

Nel caso in cui un componente diventi troppo complesso per esprimere una logica di business con una interfaccia utente, è meglio essere in grado di dividerlo in un file bl.tsx separato, con la radice index.tsx che importa tutte le funzioni e i gestori da esso.

La struttura dovrebbe essere simile a questa:

components
|---page1Components
        |--Component1
        |--Component2
|---page2Component
        |--Component1
               |---index.tsx
               |---bl.tsx

In questa struttura, ogni pagina è contenuta nella propria cartella all'interno di components, in modo che sia agevole scoprire su cosa influisce ogni componente.

È anche importante limitare l'ambito di azione di un componente. Vale a dire che un componente dovrebbe usare solo adattatori per il recupero dei dati, avere un file separato per logiche di business complesse, e focalizzarsi solo sulla parte dell'interfaccia utente.

// components/page1Components/Component1/index.tsx

import businessLogic from "./bl.tsx";

export default function Component2() {
  
  const { state and functions } = businessLogic();

  return {
    // JSX
  }
}

Mentre il file con la logica di business importa solo i dati e li restituisce:

// components/page1Components/Component1/bl.tsx

import React, {useState, useEffect} from "react";
import { adapters } from "adapters/path_to_adapter";

export default function Component1Bl(){
  const [state, setState] = useState(initialState);

  useEffect(() => {
    fetchDataFromAdapter().then(updateState);
  }, [])
}

Tuttavia, c'è un problema che è comune nell'ambito di tutte le applicazioni complesse. La gestione dello stato e come condividere lo stato attraverso componenti distanti fra loro. Per esempio, consideriamo la seguente struttura di file:

components
|---page1Components
        |--Component1
               |---ComponentA
|---page2Component
        |--ComponentB

Se occorre condividere un qualche stato attraverso ComponentA e ComponentB, nell'esempio qui sopra, esso dovrebbe essere passato attraverso tutti i componenti intermedi, e anche a qualsiasi altro componente che voglia interagire con lo stato.

Per risolvere ciò ci sono parecchie soluzioni che possono essere usate, come Redux, Easy-Peasy e React Context, ognuna della quali ha i propri pro e contro. In generale, React Context dovrebbe essere "sufficientemente valido" per risolvere questo problema. Tutti i file relativi al contesto vengono conservati in contexts.

3. Contesti

La cartella contexts è una cartella minimale che contiene solo lo stato che deve essere condiviso tra questi componenti. Ciascuna pagina può avere parecchi contesti annidati, ciascuno dei quali fa solamente da tramite per passare i dati verso il basso nella gerarchia. Tuttavia, per evitare complessità, è meglio avere un singolo file di contesto. La struttura dovrebbe essere tipo questa:

contexts
|---page1Context
        |---index.tsx (Esporta consumer, provider, ...)
        |---Context1.tsx (Contiene parte dello stato)
        |---Context2.tsx (Contiene parte dello stato)
|---page2Context
        |---index.tsx (Abbastanza semplice da avere anche lo stato)

Nel caso qui sopra, visto che page1 potrebbe essere un poco più complessa, è consentito un qualche contesto annidato passando al genitore il contesto figlio. Tuttavia, generalmente, un singolo file index.tsx che contenga lo stato ed esporti i file rilevanti dovrebbe essere sufficiente.

Non approfondirò la parte relativa all'implementazione delle librerie relative alla gestione dello stato di React, visto che ognuna di esse è distinta dalle altre e ha i propri vantaggi e svantaggi. Di conseguenza, raccomando di seguire il tutorial di qualunque cosa decidi di usare per impararne le migliori pratiche.

Al contesto è consentito importare dagli adattatori per recuperare dati e reagire a effetti esterni. Nel caso di React Context, i provider sono importati all'interno delle pagine per condividere lo stato tra tutti i componenti, usando qualcosa tipo useContext all'interno di questi componenti per riuscire a utilizzare i dati.

E ora passiamo all'ultimo grande pezzo del puzzle, le pagine.

4. Pagine

Voglio evitare di essere di parte rispetto a un framework per questo articolo, ma in generale, avere una cartella specifica nella quale piazzare componenti a livello di rotta è una buona pratica.

Gatsby e NextJS obbligano ad avere tutte le rotte in una cartella chiamata pages. Questo è un modo piuttosto leggibile per definire componenti a livello di rotta, e mimando questo in una applicazione generata con CRA (create-react-app) si ha come risultato anche una migliore leggibilità del codice.

Un punto centralizzato per le rotte aiuta anche all'utilizzo della funzionalità "Vai Al File" della maggior parte degli ambienti di sviluppo integrati (IDE) per accedere a un file usando Cmd (o Ctrl) + Click su un'istruzione di import.

Questo aiuta a spostarsi attraverso il codice velocemente, avendo chiara l'appartenenza di ogni cosa. Imposta anche una chiara gerarchia di differenziazione tra pagine e componenti, laddove una pagina può importare un componente per visualizzarlo senza fare altro, neppure logica di business.

In ogni caso, è possibile importare fornitori di contesto (context provider) all'interno di una pagina, in modo che i componenti figli li possano utilizzarli. Oppure, nel caso di NextJS, scrivere del codice lato server in grado di passare dati ai componenti usando getServerSideProps o getStaticProps.

5. Stili

Infine, eccoci agli stili. Nonostante il mio metodo sia di incorporare semplicemente gli stili all'interno dell'interfaccia utente usando una soluzione CSS-in-JS come gli styled-component, a volte è utile avere un insieme globale di stili in un file CSS.

Un puro e semplice file CSS è più condivisibile tra i progetti e può anche agire sul  CSS di componenti, laddove non possono arrivare gli styled-component (ad esempio componenti di terze parti).

Quindi, è possibile conservare tutti questi file CSS all'interno di una cartella  styles e importarli o linkarli liberamente da qualsiasi parte desideri.

React è una libreria JavaScript ideale per sviluppare applicazioni impressionanti. Ci sono infiniti progetti che puoi sviluppare con React, mentre qui ne ho riportati sette dalla mia lista dei progetti da sviluppare nel 2021.

Perché ho selezionato questi sette progetti in particolare? Li ho scelti perché si sviluppano l'uno dall'altro. Richiedono che tu conosca concetti essenziali analoghi come l'autenticazione, il modo di lavorare con una API e con i database, usare un router React per aggiungere pagine alla tua app e riprodurre media come audio o video.

Inoltre, molte applicazioni possono essere (e spesso lo sono) integrate l'una nell'altra. I social media possono includere app per chattare, le app di musica e video possono includere app di e-commerce, e così via.

In altre parole, sviluppare uno qualsiasi di questi progetti ti darà le abilità e le conoscenze richieste per costruire le restanti applicazioni della lista, inclusi i tuoi progetti personali.

Per ogni progetto, ho fornito vari esempi pratici che puoi usare per trovare ispirazione, più alcune idee riguardanti gli strumenti che proverò ad utilizzare per costruire ogni app.

1.  App per chattare in tempo reale

Esempi reali: Slack, Messenger, Discord, Crisp Chat

In pratica, tutti noi usiamo un tipo di app per chattare in tempo reale, che sia una app per il telefono come Whatsapp o Viber oppure strumenti per la produttività come Slack o Discord. Potrebbe anche far parte di un widget di chat all'interno di un sito web in cui i clienti possono parlare direttamente con i proprietari del sito.

Tutte le applicazioni per chattare permettono agli utenti di inviare messaggi agli altri in tempo reale, di reagire ai messaggi e mostrano quando gli utenti sono online oppure offline.

Come sviluppare una app per chattare in tempo reale:

• Costruisci il tuo progetto con create-react-app oppure Next.js
• Usa un servizio come Firebase oppure le iscrizioni GraphQL per mandare e ricevere messaggi agli utenti
• Aggiungi reazioni ai messaggi con le emoji usando il pacchetto npm emoji-mart
• Esegui il deployment sul web usando strumenti di Firebase

2. App per un social media

Esempi reali: Facebook, Twitter, Instagram

Le app con le quali hai più familiarità sono i social media. In parte, sono simili alle app per chattare, ma sono estese a una comunità di utenti più grande.

Gli utenti possono interagire l'uno con l'altro in diversi modi: possono seguirsi a vicenda per vedere i post, aggiungere media come immagini e video da condividere con gli altri e interagire con i post mettendo like o commentandoli.

Come sviluppare una app per un social media

• Sviluppa il tuo front end con create-react-app, e il back end usando una API Node
• Usa un database come Postgres o MongoDB, con un ORM come Prisma (Postgres) o Mongoose (MongoDB)
• Usa l'autenticazione social con Google, Facebook o Twitter, usando Passport oppure un servizio più semplice come Auth0
• Esegui il deployment del back end su Heroku e del front end su Netlify

3. App di e-commerce

Esempi reali: Shopify, Etsy, Dev.to Storefront

Le vetrine online dove possiamo comprare prodotti digitali o fisici sono ovunque. Le app di e-commerce permettono agli utenti di aggiungere o rimuovere oggetti da un carrello, di visualizzare il proprio carrello e pagare utilizzando una carta di credito, così come con altre opzioni di pagamento come Google Pay o Apple Pay.

Se stai cercando ispirazione, dai un'occhiata ad alcune vetrine più semplici come Shopify invece di un grande rivenditore come Amazon o Walmart.

Come sviluppare un app di e-commerce :

• Crea l'app con create-react-app o Next.js
• Aggiungi il pacchetto NPM stripe  e use-shopping-cart per gestire facilmente i pagamenti direttamente con Stripe Checkout
• Sviluppa una API Node per gestire la creazione di sessioni con Stripe
• Esegui il deployment del back end su Heroku, del front end su Netlify (oppure entrambi su Heroku)

4. App per la condivisione di video

Esempi reali: YouTube, TikTok, Snapchat

Una app per la condivisione di video è probabilmente una delle categorie più varie, poiché i video sono utilizzati su diverse piattaforme e in modi diversi.

Esistono app per la condivisione di video come Youtube che ti permettono di cercare su qualsiasi browser e di guardare qualsiasi video che potresti immaginare che gli utenti abbiano creato. Inoltre, Tiktok e Snapchat ci permettono di guardare video di altri utenti registrati in un tempo ancora più breve, in un formato più accessibile e sono più orientati sulle interazioni come i like e le visualizzazioni.

Come costruire una app per condividere video

• Crea l'app con create-react-app e sviluppa il back end con Node/Express
• Usa Cloudinary per i caricamenti delle immagini e dei video sulla API di Cloudinary
• Usa un database come Postgres o MongoDB, insieme a un ORM come Prisma (Postgres) o Mongoose (MongoDB)
• Esegui il deployment del back end su Heroku, del front end su Netlify (oppure entrambi su Heroku)

5. App per un blog/portfolio

Esempi reali: Medium, Dev.to, HashNode

Questo esempio di app è il più pratico. Creare un blog o un portfolio è la scelta pratica più diretta per mettere in mostra le tue abilità. Ti consente di mostrare cosa puoi fare come sviluppatore, permettendoti anche di includere post e contenuti che riflettono ciò che sai.

Sviluppare queste app con strumenti come Gatsby o Nextjs (entrambi framework di React) ora è più facile che mai.

Come sviluppare una app per un blog/portfolio :

• Sviluppa l'app con Gatsby o Next.js
• Usa il markdown per i post del blog con un plugin particolare come remark che converte il markdown
• Esegui il deployment del sito su Netlify o Vercel

6. App per forum

Esempi reali: Reddit, StackOverflow, freeCodeCamp Forum

Un forum è il posto in cui andiamo quando abbiamo bisogno di aiuto, ed essendo programmatori visitiamo forum come Reddit e Stack Overflow per ottenere risposte alle nostre domande di programmazione.

Inoltre, i forum combinano vari elementi delle app per chattare e social media attraverso post, commenti e reazioni. Un forum è come una versione più organizzata di una app di social media, in cui gli utenti possono trovare più facilmente le risposte alle domande che stanno cercando.

Come sviluppare una app per forum:

• Sviluppa il front end con create-react-app e il back end usando una API Node
• Usa un database come Postgres o MondoDB, insieme ad un ORM come Prisma (Postgres) o Mongoose (MongoDB)
• Usa l'autenticazione social con Google, Facebook o Twitter, usando Passport oppure un servizio più semplice come Auth0
• Esegui il deployment del back end su Heroku e del front end su Netlify

7. App di musica in streaming

Esempi reali: Spotify, Soundcloud, Pandora

Le app in React sono perfette per mostrare contenuti video così come sono ottime per i media in streaming come la musica.

Le app di musica hanno una struttura simile alle app di condivisione dei video e possono o non possono permettere agli utenti di caricare la propria musica. Queste app permettono agli utenti di ascoltare musica, mettere like alle canzoni, commentarle ed eventualmente anche di comprare musica.

In questo modo, una app di musica in streaming può unire elementi delle app di condivisione dei video a quelli delle app di e-commerce.

Come sviluppare una app di musica in streaming

• Crea l'app con create-react-app, e sviluppa il  back end con Node/Express
• Usa Cloudinary per i caricamenti delle immagini e dei video sull'API di Cloudinary
• Usa un database come Postgres o MondoDB, insieme ad un ORM come Prisma (Postgres) o Mongoose (MongoDB)
• Esegui il deployment del back end su Heroku, del front end su Netlify (oppure entrambi su  Heroku)

Buona programmazione!

React è una delle librerie JavaScript più popolari per la realizzazione di interfacce utente.

Se vuoi diventare uno sviluppatore front-end o trovare un lavoro nel campo dello sviluppo web, probabilmente è bene che tu conosca approfonditamente React.

In questo articolo, imparerai alcuni concetti di base di React come creare un componente, la sintassi JSX e le props. Se hai poca o nessuna esperienza con React, questo è l'articolo adatto a te.

Per iniziare, ecco come installare React.

Cos'è JSX?

La prima cosa che capirai dopo aver installato il tuo primo progetto React è che una funzione JavaScript restituisce sempre del codice HTML:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
      </header>
    </div>
  );
}

Questa è una particolare estensione della sintassi valida per React, detta JSX (JavaScript XML). Di norma, nei progetti che si occupano di front-end, manteniamo HTML, CSS e JavaScript in file separati. Tuttavia, in React funziona in modo leggermente diverso.

Nei progetti React, non creiamo file HTML separati, perché JSX ci permette di scrivere HTML e JavaScript nello stesso file, come nell'esempio precedente. Puoi comunque separare il CSS in un altro file.

All'inizio, JSX potrebbe sembrare un po' strano, ma ti ci abituerai.

JSX è molto pratico, perché possiamo eseguire qualsiasi codice JavaScript (logica, funzioni, variabili e così via) all'interno dell'HTML direttamente usando le parentesi graffe { }, in questo modo:

function App() {
  const text = 'Hello World';
  
  return (
    <div className="App">
      <p> {text} </p>
    </div>
  );
}

Puoi anche assegnare i tag HTML alle variabili JavaScript:

const message = <h1>React is cool!</h1>;

O puoi restituire dell'HTML all'interno della logica JavaScript (come dei casi if-else):

render() {
    if(true) {
        return <p>YES</p>;
    } else {
        return <p>NO</p>;
    }
}

Non mi soffermerò oltre sui dettagli di JSX, ma assicurati di seguire le seguenti regole quando scrivi del codice JSX:

• i tag HTML e dei componenti devono essere sempre chiusi < />
• Alcuni attributi come “class” diventano “className” (perché class fa riferimento alle classi JavaScript), “tabindex” diventa “tabIndex” (va scritto in camelCase)
• Non possiamo restituire più di un elemento HTML alla volta, quindi assicurati di racchiudere il tutto nei tag dell'elemento genitore:

return (
  <div>
    <p>Hello</p>
    <p>World</p>
  </div>
);

• o in alternativa, tra tag vuoti:

return (
  <>
    <p>Hello</p>
    <p>World</p>
  </>
);

Cosa sono i componenti funzionali e di classe?

Dopo esserti abituato alla sintassi JSX, la prossima cosa da capire è la struttura basata sui componenti di React.

Se torni a guardare il primo esempio di codice in cima al post, vedrai che il codice JSX viene restituito da una funzione. Ma la funzione App( ) non è una funzione ordinaria – in realtà è un componente. Quindi, cos'è un componente?

Cos'è un componente?

Un componente è un blocco di codice indipendente e riutilizzabile che divide l'interfaccia utente in porzioni più piccole. Ad esempio, se stiamo costruendo l'interfaccia utente di Twitter con React:

Piuttosto che creare l'intera interfaccia utente in un singolo file, possiamo e dovremmo dividere tutte le sezioni (evidenziate in rosso) in parti più piccole e indipendenti, ovvero in componenti.

React ha due tipi di componenti: funzionali e di classe. Vediamoli entrambi nel dettaglio.

Componenti funzionali

Il primo tipo di componente in React è il funzionale. Un componente funzionale è praticamente una funzione JavaScript/ES6 che restituisce un elemento React (JSX). Secondo la documentazione ufficiale di React, la funzione qui sotto è un componente funzionale:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Alternativamente, puoi creare un componente funzionale con la definizione di una funzione freccia:

const Welcome = (props) => { 
  return <h1>Hello, {props.name}</h1>; 
}

Questa funzione è un componente valido di React perché accetta un singolo oggetto "props" (che sta per proprietà) come argomento con dati e restituisce un elemento React. — reactjs.org

Per essere in grado di usare un componente in un secondo momento, hai bisogno di esportarlo, per poi importarlo dove necessario:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

Dopo averlo importato, puoi chiamare il componente come in questo esempio:

import Welcome from './Welcome';

function App() { 
  return (
    <div className="App">
      <Welcome />
    </div>
  );
}

Quindi un componente funzionale di React:

• è una funzione JavaScript/ES6
• deve restituire un elemento React (JSX)
• inizia sempre con una lettera maiuscola (convenzione)
• prende props come parametro se necessario

Cosa sono i componenti di classe?

Il secondo tipo di componenti sono i componenti di classe, cioè delle classi ES6 che restituiscono JSX. Qui sotto puoi vedere la stessa funzione Welcome, questa volta come componente di classe:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

A differenza dei componenti funzionali, i componenti di classe devono avere un metodo addizionale render( ) per restituire JSX.

Perché usiamo i componenti di classe?

Utilizziamo i componenti di classe per via dello "stato". Nelle versioni più vecchie di React (precedenti alla 16.8), non era possibile usare lo stato all'interno dei componenti funzionali.

Perciò, c'era bisogno dei componenti funzionali solo per renderizzare le interfacce grafiche, mentre avremmo usato i componenti di classe per la gestione dei dati e per altre operazioni aggiuntive (come i metodi del ciclo di vita).

Tutto questo è cambiato con l'introduzione degli Hooks e adesso possiamo utilizzare gli stati anche nei componenti funzionali.

Un componente di classe:

• è una classe ES6, sarà un componente tramite l'uso della parola chiave ‘extends’.
• accetta props (nel costruttore) se necessario
• deve avere un metodo render( ) per restituire JSX

Cosa sono le props in React?

Un altro importante concetto dei componenti è il modo in cui comunicano. React ha degli oggetti speciali chiamati props (da proprietà) che usiamo per trasportare dati da un componente all'altro.

Ma attenzione – le props trasportano i dati soltanto in una direzione (dal componente genitore al figlio). Non è possibile per delle props trasportare dati dal figlio al genitore o a componenti dello stesso livello.

Riconsideriamo la funzione App( ) precedente per vedere come passare dei dati con le props.

Per prima cosa, dobbiamo definire una proprietà sul componente Welcome e assegnarle un valore:

import Welcome from './Welcome';

function App() { 
  return (
    <div className="App">
      <Welcome name="John"/>
      <Welcome name="Mary"/>
      <Welcome name="Alex"/>
    </div>
  );
}

Le props sono valori personalizzati a rendono i componenti più dinamici. Dato che il componente Welcome è il figlio in questo caso, dobbiamo definire le prop sul suo genitore (App), in modo da poter passare dei valori e ottenere il risultato semplicemente accedendo al nome della prop:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Le prop di React sono davvero utili

Gli sviluppatori React usano le props per passare dati e le prop sono davvero utili per svolgere questo compito. Ma per quanto riguarda la gestione dei dati? Le props vengono usate per passare dati, ma non per manipolarli. Parlerò della gestione dei dati in un prossimo articolo qui su freeCodeCamp.

Grazie per aver letto questo articolo!

React è una delle librerie JavaScript più popolari nel campo dello sviluppo web.

Come sviluppatore front-end, ho lavorato personalmente con React per i miei progetti e probabilmente continuerò a farlo in futuro. Uno dei passaggi con cui molte persone faticano è il processo di installazione/configurazione di React.

Quindi partiamo dalle basi. In questo articolo, imparerai come installare ed eseguire una applicazione React nel modo più semplice.

Come scaricare e installare Node.js

Prima di tutto, avrai bisogno di NPM (o Yarn, in alternativa). In questo esempio useremo NPM.

Se non lo hai installato sul tuo sistema, puoi andare al sito web ufficiale di Node.js per scaricare e installare Node, che include anche NPM (Node Package Manager).

Seleziona il pulsante "Consigliata" (Recommended for most users) e scarica la versione attuale per il tuo sistema operativo.

Dopo aver scaricato e installato Node, apri il tuo terminale/prompt dei comandi ed esegui node -v e npm -v per vedere quale versione hai.

Dovresti avere almeno la versione 5.2.0 di NPM o una delle successive perché create-react-app richiede di avere installato NPX. Se hai una versione più vecchia, puoi eseguire questo comando per aggiornarla:

npm install -g npm

Cos'è create-react-app?

Visto che è piuttosto complicato e richiede molto tempo, non vogliamo configurare manualmente React. create-react-app è un modo molto più semplice per effettuare automaticamente tutta la configurazione e le installazioni dei pacchetti necessari e avviare una nuova app React localmente, pronta per lo sviluppo.

Un altro vantaggio dell'utilizzo di create-react-app è che non devi avere a che fare con la configurazione di Babel o Webpack. Tutte le configurazioni necessarie verranno svolte dall'app create-react-app.

Secondo la documentazione di React, create-react-app è uno dei modi supportati ufficialmente per creare un'applicazione di una pagina singola in React. Puoi trovare altri modi qui.

Come installare create-react-app

Per installare la tua app, vai nel tuo spazio di lavoro (il desktop o una cartella) ed esegui il comando:

npx create-react-app la-mia-app

Il processo di installazione potrebbe richiedere qualche minuto. Una volta fatto ciò, nel tuo spazio di lavoro dovresti vedere una cartella con il nome che hai dato alla tua app.

Nota: se usi Mac e ricevi errori di permessi, usa il comando sudo.

Come eseguire l'app che hai creato con create-react-app

Dopo che l'installazione è completata, spostati nella cartella in cui l'app è stata installata:

cd la-mia-app

ed esegui npm start per vedere la tua app live su localhost:

npm start

Se vedi qualcosa del genere nel tuo browser, sei pronto per lavorare con React. Congratulazioni! :)

Grazie per aver letto questo articolo!

Ci sono quattro modi per impostare una proprietà di stile backgroundImage usando il CSS in linea in React.

Questo tutorial ti mostrerà i quattro metodi, con del codice di esempio per ognuno.

Come impostare un'immagine di sfondo in React usando un URL esterno

Se la tua immagine si trova da qualche parte online, puoi impostare l'immagine di sfondo del tuo elemento mettendo l'URL in questo modo:

function App() {
  return (
    <div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>
      Hello World
    </div>
  );
}

Il codice sopra renderizzerà un singolo elemento div con lo style background-image: url(https://via.placeholder.com/500) applicato ad esso.

Come impostare un'immagine di sfondo in React dalla tua cartella /src

Se crei l'applicazione usando Create React App e hai le tue immagini nella cartella src/, puoi prima importare l'immagine e poi piazzarla come sfondo del tuo elemento:

import React from "react";
import background from "./img/placeholder.png";

function App() {
  return (
    <div style={{ backgroundImage: `url(${background})` }}>
      Hello World
    </div>
  );
}

export default App;

Quando esegui il comando npm start, React mostrerà un errore "Failed to Compile" e fermerà il build quando l'immagine non viene trovata:

In questo modo non mostrerai link di immagini mancanti nella tua app web. Nel codice qui sopra, il valore di backgroundImage è impostato usando una stringa template, che permette di incorporare un'espressione JavaScript.

Come impostare un'immagine di sfondo in React usando il metodo dell'URL relativo

La cartella public/ in Create React App può essere usata per aggiungere risorse statiche nella tua applicazione React. Qualsiasi file metti in questa cartella sarà accessibile online.

Puoi quindi assegnare l'URL relativo al tuo indirizzo di host per impostare l'immagine di sfondo. Ecco un esempio:

<div style={{ backgroundImage: "url(/image.png)" }}>
  Hello World
</div>

Impostando il path dell'URL a /image.png come nell'esempio qui sopra, il browser cercherà l'immagine di sfondo in <your host address>/image.png.

Puoi anche creare un'altra cartella dentro public/ se vuoi organizzare le tue immagini in cartelle. Per esempio:

Non dimenticarti di aggiustare il valore di backgroundImage in url(/img/image.png) se decidi di creare la cartella.

Impostare un'immagine di sfondo in react usando il metodo dell'URL assoluto

Puoi anche includere l'URL assoluto usando la variabile di ambiente di Create React App PUBLIC_URL in questo modo:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})` 
}}>
  Hello World
</div>

Quando esegui questo sul tuo computer, gli script di React gestiscono il valore di PUBLIC_URL. Quando lo esegui in locale, apparirà come un URL relativo invece di un URL assoluto:

L'URL assoluto sarà visto solo una volta fatto il deployment di React in una applicazione di produzione.

Come impostare un'immagine di sfondo con proprietà aggiuntive

Se vuoi personalizzare ulteriormente l'immagine di sfondo, lo puoi fare aggiungendo proprietà addizionali dopo backgroundImage. Ecco un esempio:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
  backgroundRepeat: 'no-repeat',
  width:'250px' 
}}>
  Hello World
</div>

Le proprietà impostate aggiungeranno background-repeat: no-repeat e width: 250px assieme allo stile background-image all'elemento div.

Grazie per aver letto, spero che quest'articolo ti sia stato utile. 🙂