Archivi: React | Aulab

tag

react

post_count 42 risultati
cover
GUIDA GRATUITA

I pericoli delle ottimizzazioni in React

Come abbiamo appena visto, tutte le funzioni hook che richiedono una lista di dipendenze in React (useEffect, useMemo e useCallback, per esempio) creano un albero di dipendenze che può diventare molto facilmente un ammasso di costrizioni auto-imposte. Per ogni uso delle funzioni hook che richiedono una lista di dipendenze, siamo costretti a prendere in considerazione…

GUIDA GRATUITA

Ottimizzazione dei cicli di rendering di React

Al di là delle domande elencate nella sezione precedente, React fornisce dei modi per ottimizzare i cicli di rendering. Ne vedremo quattro.   Lazy e i componenti Il primo modo per ottimizzare un’applicazione React ha a che fare con i componenti.  Essendo le applicazioni React delle SPA (che non sta per “Società per Azioni” ma…

GUIDA GRATUITA

Le domande da porsi per ottimizzare il codice in React

In quest’ultimo passo del nostro viaggio, parliamo di ottimizzazione delle applicazioni React. Quando si tratta di front-end, l’attore più lento in ogni processo dovrebbe essere sempre l’utente, l’essere umano che sta interagendo con l’interfaccia. Molto spesso questa cosa è semplice da ottenere, perché i computer sono molto, molto più veloci degli esseri umani. Quando un’applicazione…

Vuoi avviare una nuova carriera o fare un upgrade?

Trova il corso Digital & Tech più adatto a te nel nostro catalogo!

GUIDA GRATUITA

Che cos’è una reference in React

Nel corso delle varie sezioni, abbiamo citato un paio di volte il concetto di ref: una volta per dire che, insieme a key e children, è un attributo valido per ogni elemento o componente React; un’altra volta quando si parlava dei valori che sopravvivono (cioè non vengono ricalcolati) ai cicli di rendering di React. In…

GUIDA GRATUITA

Quando evitare l’uso di Context in React

Quando si parla di Context, c’è un classico caso d’uso problematico che andrebbe evitato: vediamo quale e perché. Normalmente, l’utilizzo di Context si divide in tre passi:   La chiamata a createContext. La creazione del Provider. Le chiamate a useContext.   Due classici errori che si fanno quando si utilizza Context sono:   Non passare…

GUIDA GRATUITA

Context in React

Per fare un esempio dell’utilizzo di Context, immaginiamo di voler implementare una funzione di login, per proteggere la nostra applicazione e anche per creare liste di cose da fare legate a utenti diversi. Implementiamo prima di tutto il form che, grazie alle nostre funzioni hook useForm e useCommand, alla nostra macchina a stati finiti NetworkRequest…

GUIDA GRATUITA

Introduzione agli stati globali in React

Torniamo alle origini con le proprietà e gli eventi. Abbiamo visto, ormai, davvero moltissimi esempi del passaggio dei dati in React: i dati viaggiano sempre in una direzione, dai componenti genitori ai figli. I valori dei dati viaggiano tramite props, mentre gli eventi vanno nella direzione opposta. Molto spesso i valori coincidono con degli stati…

GUIDA GRATUITA

Portali in React

La nostra applicazione di esempio sa creare e leggere gli elementi di cose da fare. Delle quattro operazioni CRUD (Create, Read, Update, Delete), sappiamo fare le prime due. È ora di aggiungere la terza! Per quanto riguarda l’interfaccia grafica, dato che abbiamo l’intera applicazione in un’unica pagina, implementeremo il form di modifica in una modale.…

GUIDA GRATUITA

Quando usare gli effetti collaterali in React

Nella sezione in cui abbiamo parlato di useEffect, abbiamo visto alcuni ottimi esempi di utilizzo corretto degli effetti collaterali. Nella nostra applicazione di esempio, possiamo usare useEffect all’interno di useQuery e useQueryState, per sottolineare l’effetto collaterale che esiste già:   // File: src/hooks/useQuery.js import { useEffect } from "react"; import { useCommand } from "./useCommand";…