CONTATTACI

I pericoli delle ottimizzazioni in React

Programmatore che esamina react al microscopio

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 […]

Ottimizzazione dei cicli di rendering di React

Programmatore che esamina react al microscopio

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 […]

Le domande da porsi per ottimizzare il codice in React

Programmatore che esamina react al microscopio

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 […]

Che cos’è una reference in React

Programmatore che esamina react al microscopio

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 […]

Quando evitare l’uso di Context in React

Programmatore che esamina react al microscopio

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 […]

Context in React

Programmatore che esamina react al microscopio

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 […]

Introduzione agli stati globali in React

Programmatore che esamina react al microscopio

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 […]

Portali in React

Programmatore che esamina react al microscopio

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. […]

Quando usare gli effetti collaterali in React

Programmatore che esamina react al microscopio

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”; […]

Quando evitare gli effetti collaterali in React

Programmatore che esamina react al microscopio

Gli effetti collaterali sono il concetto più mal interpretato e impropriamente usato di React. Vediamo una lista di casi in cui potresti essere tentato ad usare un effetto collaterale, e come evitare di farlo. In generale, ci sono due casi in cui gli effetti collaterali non servono mai: per trasformare i dati in JSX per […]

Gli effetti collaterali in React

Abbiamo detto che le funzioni pure ci regalano riutilizzabilità, componibilità e confidenza, ma non possiamo rinunciare agli effetti collaterali: avremo sempre bisogno di salvare dati, mandare richieste di rete, modificare strutture di dati. React prevede due momenti in cui possiamo eseguire effetti collaterali, uno per React e uno per noi: Il rendering: l’attività con cui […]

Che cos’è una funzione pura

Programmatore che esamina react al microscopio

Il prossimo concetto è forse il più delicato da affrontare, perché chi è abituato alla programmazione imperativa, quando lo scopre, non vuole più farne a meno. Vedremo perché questo concetto è così affine alla programmazione imperativa e anche perché, in React, la cosa è molto pericolosa. In programmazione funzionale, che è uno dei quattro grandi […]

Componenti dichiarativi in React

Programmatore che esamina react al microscopio

Nel corso di questa guida abbiamo creato un componente, Query, che gestisce le richieste di rete di tipo query al suo interno. La versione “successful” dell’interfaccia, però, è un paragrafo che dice “Success!” senza utilizzare i dati della risposta in nessun modo, e la parte di creazione degli elementi (gestita da TodoItemForm) è completamente sganciata […]

Rendering condizionale in React

Programmatore che esamina react al microscopio

Abbiamo creato una funzione hook, useQuery, che ci permette di gestire delle richieste di rete, facendole partire non appena il componente che usa useQuery viene chiamato per la prima volta.  Possiamo pensare di creare un componente che rappresenti, tramite interfaccia grafica, una richiesta di rete. Questo ci permetterà di gestire nello stesso modo tutte le […]

Esempi di hooks: richieste di rete di tipo query

Programmatore che esamina react al microscopio

Ora che sappiamo come creare una funzione hook e abbiamo una classe che rappresenta una richiesta di rete, possiamo pensare di creare una seconda funzione hook, per gestire, stavolta, le richieste di rete di tipo query.  Le richieste di tipo query sono quelle che partono appena viene visualizzata la pagina, per caricare i dati iniziali […]

Esempi di hooks: richieste di rete di tipo comando

Programmatore che esamina react al microscopio

Nelle sezioni precedenti, abbiamo gestito in modo dichiarativo la richiesta di rete per creare un elemento della lista di cose da fare:   // File: src/components/TodoItemForm.jsx // … const NetworkRequestType = { idle: “idle”, loading: “loading”, success: “success”, failure: “failure”, }; function makeIdleNetworkRequest() { return { type: NetworkRequestType.idle }; } function makeLoadingNetworkRequest() { return { […]

Cos’è una funzione Hook in React

Programmatore che esamina react al microscopio

Una funzione hook (in italiano “gancio”, “amo”) è un componente senza interfaccia. useState è una funzione hook. Ma se i componenti sono funzioni che restituiscono JSX e una funzione hook è un componente senza interfaccia, allora una funzione hook non restituisce JSX: questo la rende una funzione che non restituisce JSX ..cioè una normale funzione? […]

Economia dei componenti in React

Programmatore che esamina react al microscopio

In questo momento, la nostra applicazione ha due problemi: Troppo codice nel componente App. È davvero bruttina da vedere; non che il nostro CSS sia da premio, ci stiamo concentrando sui concetti di React, ma così siamo proprio in preda all’aspetto di default del browser. Come possiamo risolvere?  Ci sono due elementi div, rispettivamente con […]

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.